@atlaskit/editor-plugin-quick-insert 19.0.6 → 19.0.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 CHANGED
@@ -1,5 +1,27 @@
1
1
  # @atlaskit/editor-plugin-quick-insert
2
2
 
3
+ ## 19.0.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [`a1df9dd2d8f02`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a1df9dd2d8f02) -
8
+ Add the optional `showNoResultsMessage` empty-state handler parameter and
9
+ `platform_editor_slash_command`-gated Ask Rovo and View more recovery for registered quick insert
10
+ searches with no matches. Respect registry visibility and keep Marketplace content separate from
11
+ listbox navigation while preserving its native keyboard controls.
12
+
13
+ Show the registered Ask Rovo action alongside Marketplace suggestions in the element browser's
14
+ no-match state, with a divider separating the fallback action from Marketplace content. Keep the
15
+ toolbar's View more footer visible while Marketplace content scrolls and preserve native Tab
16
+ navigation.
17
+
18
+ Respect `data-keyboard-navigation-independent` containers in both toolbar keyboard navigation
19
+ providers. Apply the attribute to the registered insert menu, whose rendering is gated by
20
+ `platform_editor_slash_command`, so its controls retain their own key handling and native tab
21
+ stops.
22
+
23
+ - Updated dependencies
24
+
3
25
  ## 19.0.6
4
26
 
5
27
  ### Patch Changes
@@ -39,6 +39,7 @@ var headerSearchStyles = null;
39
39
  var resultsId = 'registry-element-browser-results';
40
40
  var modalTestId = 'registry-element-browser-modal';
41
41
  var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryElementBrowser(_ref) {
42
+ var _model$fallbackItems$, _model$fallbackItems;
42
43
  var components = _ref.components,
43
44
  emptyStateHandler = _ref.emptyStateHandler,
44
45
  defaultSection = _ref.defaultSection,
@@ -103,6 +104,7 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
103
104
  section: section
104
105
  });
105
106
  }, [formatMessage, model, query, section]);
107
+ var resultCount = items.length || (!isLoading && query.trim() ? (_model$fallbackItems$ = (_model$fallbackItems = model.fallbackItems) === null || _model$fallbackItems === void 0 ? void 0 : _model$fallbackItems.length) !== null && _model$fallbackItems$ !== void 0 ? _model$fallbackItems$ : 0 : 0);
106
108
  (0, _react.useEffect)(function () {
107
109
  if (previousIsOffline.current !== isOffline) {
108
110
  setSelectedKey(undefined);
@@ -225,6 +227,7 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
225
227
  isLoading: isLoading,
226
228
  isOffline: isOffline,
227
229
  items: items,
230
+ fallbackItems: model.fallbackItems,
228
231
  query: query,
229
232
  resultsId: resultsId,
230
233
  section: section,
@@ -236,6 +239,6 @@ var RegistryElementBrowser = exports.RegistryElementBrowser = function RegistryE
236
239
  isInsertEnabled: Boolean(selectedKey),
237
240
  onClose: onClose,
238
241
  onConfirmInsert: onConfirmInsert,
239
- resultCount: items.length
242
+ resultCount: resultCount
240
243
  }))));
241
244
  };
@@ -1,6 +1,7 @@
1
1
  ._11c81af2{font:var(--ds-font-heading-medium,normal 653 20px/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._zulpu2gc{gap:var(--ds-space-100,8px)}
3
3
  ._yyhyjvu9{grid-column:1/-1}
4
+ ._15a5nqa1{border-top-style:solid}
4
5
  ._19pk1ejb{margin-top:var(--ds-space-300,24px)}
5
6
  ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
6
7
  ._19pkutpp{margin-top:var(--ds-space-150,9pt)}
@@ -8,13 +9,16 @@
8
9
  ._1bsb1osq{width:100%}
9
10
  ._1e0c11p5{display:grid}
10
11
  ._1e0c1txw{display:flex}
12
+ ._1i531l7x{border-top-color:var(--ds-border,#0b120e24)}
11
13
  ._1ul9idpf{min-width:0}
12
14
  ._2lx21bp4{flex-direction:column}
13
15
  ._4cvr1h6o{align-items:center}
14
16
  ._4cvrv2br{align-items:start}
15
17
  ._ae4vv2br{align-content:start}
18
+ ._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
16
19
  ._p12f1kdj{max-width:25pc}
17
20
  ._syazi7uo{color:var(--ds-text,#292a2e)}
21
+ ._uwhke4h9{border-top-width:var(--ds-border-width,1px)}
18
22
  ._y3gn1h6o{text-align:center}
19
23
  ._yv0ei47z{grid-template-columns:minmax(0,1fr)}
20
24
  @media (min-width:550px) and (max-width:1023px){._16409sye{grid-template-columns:repeat(2,minmax(0,1fr))}}
@@ -9,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
9
9
  exports.RegistryElementBrowserSearchResults = void 0;
10
10
  require("./RegistryElementBrowserSearchResults.compiled.css");
11
11
  var _runtime = require("@compiled/react/runtime");
12
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
12
13
  var _react = _interopRequireWildcard(require("react"));
13
14
  var _reactIntl = require("react-intl");
14
15
  var _link = _interopRequireDefault(require("@atlaskit/button/link"));
@@ -16,8 +17,13 @@ var _provider = require("@atlaskit/editor-common/quick-insert/provider");
16
17
  var _compiled = require("@atlaskit/primitives/compiled");
17
18
  var _NotFoundIllustration = _interopRequireDefault(require("./NotFoundIllustration"));
18
19
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
20
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
21
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
19
22
  var resultsGridStyles = null;
20
23
  var emptyStateGridItemStyles = null;
24
+ var styles = {
25
+ fallbackMarketplace: "_1i531l7x _15a5nqa1 _uwhke4h9 _19pkpxbi _ca0qpxbi"
26
+ };
21
27
  var emptyStateWrapperStyles = null;
22
28
  var emptyStateHeadingStyles = null;
23
29
  var emptyStateSubheadingStyles = null;
@@ -57,6 +63,7 @@ var RegistryElementBrowserSearchResults = exports.RegistryElementBrowserSearchRe
57
63
  var _emptyStateHandler;
58
64
  var editorView = _ref2.editorView,
59
65
  emptyStateHandler = _ref2.emptyStateHandler,
66
+ fallbackItems = _ref2.fallbackItems,
60
67
  _ref2$isLoading = _ref2.isLoading,
61
68
  isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
62
69
  isOffline = _ref2.isOffline,
@@ -69,33 +76,20 @@ var RegistryElementBrowserSearchResults = exports.RegistryElementBrowserSearchRe
69
76
  onSelect = _ref2.onSelect;
70
77
  var _useIntl = (0, _reactIntl.useIntl)(),
71
78
  formatMessage = _useIntl.formatMessage;
72
- return /*#__PURE__*/_react.default.createElement("div", {
73
- "aria-label": formatMessage({
74
- defaultMessage: 'Element results',
75
- id: 'editor.quick-insert.results-label'
76
- }),
77
- "data-testid": "registry-element-browser-results",
78
- id: resultsId,
79
- onKeyDown: onKeyDown,
80
- tabIndex: -1,
81
- role: items.length ? 'listbox' : undefined,
82
- className: (0, _runtime.ax)(["_zulpu2gc _ae4vv2br _4cvrv2br _1e0c11p5 _yv0ei47z _16409sye _g98o1koq"])
83
- }, items.length ? items.map(function (item) {
84
- return /*#__PURE__*/_react.default.createElement(RegistryElementBrowserItem, {
85
- editorView: editorView,
86
- isOffline: isOffline,
87
- isSelected: selectedKey === item.registration.key,
88
- item: item,
89
- key: item.registration.key,
90
- onSelect: onSelect
91
- });
92
- }) : !isLoading ? /*#__PURE__*/_react.default.createElement("div", {
93
- className: (0, _runtime.ax)(["_yyhyjvu9 _1ul9idpf _1bsb1osq"])
94
- }, (_emptyStateHandler = emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler({
79
+ var hasFallbackItems = Boolean(!isLoading && items.length === 0 && query.trim().length > 0 && (fallbackItems === null || fallbackItems === void 0 ? void 0 : fallbackItems.length));
80
+ var resultsLabel = formatMessage({
81
+ defaultMessage: 'Element results',
82
+ id: 'editor.quick-insert.results-label'
83
+ });
84
+ var displayedItems = hasFallbackItems ? fallbackItems !== null && fallbackItems !== void 0 ? fallbackItems : [] : items;
85
+ var shouldRenderEmptyState = items.length === 0 && !isLoading;
86
+ var emptyState = shouldRenderEmptyState ? (_emptyStateHandler = emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler(_objectSpread({
95
87
  mode: 'full',
96
88
  searchTerm: query,
97
89
  selectedCategory: section
98
- })) !== null && _emptyStateHandler !== void 0 ? _emptyStateHandler : /*#__PURE__*/_react.default.createElement("div", {
90
+ }, hasFallbackItems ? {
91
+ showNoResultsMessage: false
92
+ } : {}))) !== null && _emptyStateHandler !== void 0 ? _emptyStateHandler : /*#__PURE__*/_react.default.createElement("div", {
99
93
  className: (0, _runtime.ax)(["_4cvr1h6o _1e0c1txw _2lx21bp4 _1bah1h6o _1bsb1osq"])
100
94
  }, /*#__PURE__*/_react.default.createElement(_NotFoundIllustration.default, null), /*#__PURE__*/_react.default.createElement("div", {
101
95
  className: (0, _runtime.ax)(["_11c81af2 _syazi7uo _19pk1ejb"])
@@ -116,5 +110,27 @@ var RegistryElementBrowserSearchResults = exports.RegistryElementBrowserSearchRe
116
110
  }, formatMessage({
117
111
  defaultMessage: 'Explore Atlassian Marketplace',
118
112
  id: 'editor.quick-insert.explore-marketplace'
119
- })))))) : null);
113
+ }))))) : null;
114
+ return /*#__PURE__*/_react.default.createElement("div", {
115
+ "data-testid": "registry-element-browser-results",
116
+ id: resultsId,
117
+ tabIndex: -1
118
+ }, displayedItems.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
119
+ "aria-label": resultsLabel,
120
+ onKeyDown: onKeyDown,
121
+ role: "listbox",
122
+ tabIndex: -1,
123
+ className: (0, _runtime.ax)(["_zulpu2gc _ae4vv2br _4cvrv2br _1e0c11p5 _yv0ei47z _16409sye _g98o1koq"])
124
+ }, displayedItems.map(function (item) {
125
+ return /*#__PURE__*/_react.default.createElement(RegistryElementBrowserItem, {
126
+ editorView: editorView,
127
+ isOffline: isOffline,
128
+ isSelected: selectedKey === item.registration.key,
129
+ item: item,
130
+ key: item.registration.key,
131
+ onSelect: onSelect
132
+ });
133
+ })), emptyState && /*#__PURE__*/_react.default.createElement("div", {
134
+ className: (0, _runtime.ax)(["_yyhyjvu9 _1ul9idpf _1bsb1osq", hasFallbackItems && styles.fallbackMarketplace])
135
+ }, emptyState));
120
136
  };
@@ -8,6 +8,7 @@ exports.getRegistryElementBrowserItems = exports.getInitialRegistryElementBrowse
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
10
10
  var _createQuickInsertMatcher = require("@atlaskit/editor-common/quick-insert/create-quick-insert-matcher");
11
+ var _keys = require("@atlaskit/editor-common/quick-insert/keys");
11
12
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
12
13
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
13
14
  var compareRanks = function compareRanks(left, right) {
@@ -91,10 +92,16 @@ var createRegistryElementBrowserModel = exports.createRegistryElementBrowserMode
91
92
  }));
92
93
  });
93
94
  });
95
+ var items = (0, _toConsumableArray2.default)(itemByKey.values()).sort(function (left, right) {
96
+ return compareRanks(left.ranks, right.ranks);
97
+ });
98
+ var fallbackItems = items.filter(function (_ref2) {
99
+ var registration = _ref2.registration;
100
+ return registration.key === _keys.ASK_ROVO_MENU_ITEM.key;
101
+ });
94
102
  return {
95
- items: (0, _toConsumableArray2.default)(itemByKey.values()).sort(function (left, right) {
96
- return compareRanks(left.ranks, right.ranks);
97
- }),
103
+ fallbackItems: fallbackItems.length > 0 ? fallbackItems : undefined,
104
+ items: items,
98
105
  sections: sections
99
106
  };
100
107
  };
@@ -103,11 +110,11 @@ var getInitialRegistryElementBrowserSection = exports.getInitialRegistryElementB
103
110
  return section.key === requestedSection;
104
111
  }) ? requestedSection : undefined;
105
112
  };
106
- var getRegistryElementBrowserItems = exports.getRegistryElementBrowserItems = function getRegistryElementBrowserItems(_ref2) {
107
- var formatMessage = _ref2.formatMessage,
108
- model = _ref2.model,
109
- query = _ref2.query,
110
- section = _ref2.section;
113
+ var getRegistryElementBrowserItems = exports.getRegistryElementBrowserItems = function getRegistryElementBrowserItems(_ref3) {
114
+ var formatMessage = _ref3.formatMessage,
115
+ model = _ref3.model,
116
+ query = _ref3.query,
117
+ section = _ref3.section;
111
118
  var normalizedQuery = query.trim();
112
119
  var items = section ? model.items.filter(function (item) {
113
120
  return item.sectionKeys.includes(section);
@@ -43,6 +43,7 @@ export const RegistryElementBrowser = ({
43
43
  onConfirmInsert,
44
44
  onSelect
45
45
  }) => {
46
+ var _model$fallbackItems$, _model$fallbackItems;
46
47
  const {
47
48
  formatMessage
48
49
  } = useIntl();
@@ -75,6 +76,7 @@ export const RegistryElementBrowser = ({
75
76
  query,
76
77
  section
77
78
  }), [formatMessage, model, query, section]);
79
+ const resultCount = items.length || (!isLoading && query.trim() ? (_model$fallbackItems$ = (_model$fallbackItems = model.fallbackItems) === null || _model$fallbackItems === void 0 ? void 0 : _model$fallbackItems.length) !== null && _model$fallbackItems$ !== void 0 ? _model$fallbackItems$ : 0 : 0);
78
80
  useEffect(() => {
79
81
  if (previousIsOffline.current !== isOffline) {
80
82
  setSelectedKey(undefined);
@@ -195,6 +197,7 @@ export const RegistryElementBrowser = ({
195
197
  isLoading: isLoading,
196
198
  isOffline: isOffline,
197
199
  items: items,
200
+ fallbackItems: model.fallbackItems,
198
201
  query: query,
199
202
  resultsId: resultsId,
200
203
  section: section,
@@ -206,6 +209,6 @@ export const RegistryElementBrowser = ({
206
209
  isInsertEnabled: Boolean(selectedKey),
207
210
  onClose: onClose,
208
211
  onConfirmInsert: onConfirmInsert,
209
- resultCount: items.length
212
+ resultCount: resultCount
210
213
  }))));
211
214
  };
@@ -1,6 +1,7 @@
1
1
  ._11c81af2{font:var(--ds-font-heading-medium,normal 653 20px/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._zulpu2gc{gap:var(--ds-space-100,8px)}
3
3
  ._yyhyjvu9{grid-column:1/-1}
4
+ ._15a5nqa1{border-top-style:solid}
4
5
  ._19pk1ejb{margin-top:var(--ds-space-300,24px)}
5
6
  ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
6
7
  ._19pkutpp{margin-top:var(--ds-space-150,9pt)}
@@ -8,13 +9,16 @@
8
9
  ._1bsb1osq{width:100%}
9
10
  ._1e0c11p5{display:grid}
10
11
  ._1e0c1txw{display:flex}
12
+ ._1i531l7x{border-top-color:var(--ds-border,#0b120e24)}
11
13
  ._1ul9idpf{min-width:0}
12
14
  ._2lx21bp4{flex-direction:column}
13
15
  ._4cvr1h6o{align-items:center}
14
16
  ._4cvrv2br{align-items:start}
15
17
  ._ae4vv2br{align-content:start}
18
+ ._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
16
19
  ._p12f1kdj{max-width:25pc}
17
20
  ._syazi7uo{color:var(--ds-text,#292a2e)}
21
+ ._uwhke4h9{border-top-width:var(--ds-border-width,1px)}
18
22
  ._y3gn1h6o{text-align:center}
19
23
  ._yv0ei47z{grid-template-columns:minmax(0,1fr)}
20
24
  @media (min-width:550px) and (max-width:1023px){._16409sye{grid-template-columns:repeat(2,minmax(0,1fr))}}
@@ -9,6 +9,9 @@ import { Text } from '@atlaskit/primitives/compiled';
9
9
  import NotFoundIllustration from './NotFoundIllustration';
10
10
  const resultsGridStyles = null;
11
11
  const emptyStateGridItemStyles = null;
12
+ const styles = {
13
+ fallbackMarketplace: "_1i531l7x _15a5nqa1 _uwhke4h9 _19pkpxbi _ca0qpxbi"
14
+ };
12
15
  const emptyStateWrapperStyles = null;
13
16
  const emptyStateHeadingStyles = null;
14
17
  const emptyStateSubheadingStyles = null;
@@ -45,6 +48,7 @@ const RegistryElementBrowserItem = ({
45
48
  export const RegistryElementBrowserSearchResults = ({
46
49
  editorView,
47
50
  emptyStateHandler,
51
+ fallbackItems,
48
52
  isLoading = false,
49
53
  isOffline,
50
54
  items,
@@ -59,30 +63,20 @@ export const RegistryElementBrowserSearchResults = ({
59
63
  const {
60
64
  formatMessage
61
65
  } = useIntl();
62
- return /*#__PURE__*/React.createElement("div", {
63
- "aria-label": formatMessage({
64
- defaultMessage: 'Element results',
65
- id: 'editor.quick-insert.results-label'
66
- }),
67
- "data-testid": "registry-element-browser-results",
68
- id: resultsId,
69
- onKeyDown: onKeyDown,
70
- tabIndex: -1,
71
- role: items.length ? 'listbox' : undefined,
72
- className: ax(["_zulpu2gc _ae4vv2br _4cvrv2br _1e0c11p5 _yv0ei47z _16409sye _g98o1koq"])
73
- }, items.length ? items.map(item => /*#__PURE__*/React.createElement(RegistryElementBrowserItem, {
74
- editorView: editorView,
75
- isOffline: isOffline,
76
- isSelected: selectedKey === item.registration.key,
77
- item: item,
78
- key: item.registration.key,
79
- onSelect: onSelect
80
- })) : !isLoading ? /*#__PURE__*/React.createElement("div", {
81
- className: ax(["_yyhyjvu9 _1ul9idpf _1bsb1osq"])
82
- }, (_emptyStateHandler = emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler({
66
+ const hasFallbackItems = Boolean(!isLoading && items.length === 0 && query.trim().length > 0 && (fallbackItems === null || fallbackItems === void 0 ? void 0 : fallbackItems.length));
67
+ const resultsLabel = formatMessage({
68
+ defaultMessage: 'Element results',
69
+ id: 'editor.quick-insert.results-label'
70
+ });
71
+ const displayedItems = hasFallbackItems ? fallbackItems !== null && fallbackItems !== void 0 ? fallbackItems : [] : items;
72
+ const shouldRenderEmptyState = items.length === 0 && !isLoading;
73
+ const emptyState = shouldRenderEmptyState ? (_emptyStateHandler = emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler({
83
74
  mode: 'full',
84
75
  searchTerm: query,
85
- selectedCategory: section
76
+ selectedCategory: section,
77
+ ...(hasFallbackItems ? {
78
+ showNoResultsMessage: false
79
+ } : {})
86
80
  })) !== null && _emptyStateHandler !== void 0 ? _emptyStateHandler : /*#__PURE__*/React.createElement("div", {
87
81
  className: ax(["_4cvr1h6o _1e0c1txw _2lx21bp4 _1bah1h6o _1bsb1osq"])
88
82
  }, /*#__PURE__*/React.createElement(NotFoundIllustration, null), /*#__PURE__*/React.createElement("div", {
@@ -104,5 +98,25 @@ export const RegistryElementBrowserSearchResults = ({
104
98
  }, formatMessage({
105
99
  defaultMessage: 'Explore Atlassian Marketplace',
106
100
  id: 'editor.quick-insert.explore-marketplace'
107
- })))))) : null);
101
+ }))))) : null;
102
+ return /*#__PURE__*/React.createElement("div", {
103
+ "data-testid": "registry-element-browser-results",
104
+ id: resultsId,
105
+ tabIndex: -1
106
+ }, displayedItems.length > 0 && /*#__PURE__*/React.createElement("div", {
107
+ "aria-label": resultsLabel,
108
+ onKeyDown: onKeyDown,
109
+ role: "listbox",
110
+ tabIndex: -1,
111
+ className: ax(["_zulpu2gc _ae4vv2br _4cvrv2br _1e0c11p5 _yv0ei47z _16409sye _g98o1koq"])
112
+ }, displayedItems.map(item => /*#__PURE__*/React.createElement(RegistryElementBrowserItem, {
113
+ editorView: editorView,
114
+ isOffline: isOffline,
115
+ isSelected: selectedKey === item.registration.key,
116
+ item: item,
117
+ key: item.registration.key,
118
+ onSelect: onSelect
119
+ }))), emptyState && /*#__PURE__*/React.createElement("div", {
120
+ className: ax(["_yyhyjvu9 _1ul9idpf _1bsb1osq", hasFallbackItems && styles.fallbackMarketplace])
121
+ }, emptyState));
108
122
  };
@@ -1,4 +1,5 @@
1
1
  import { createQuickInsertMatcher } from '@atlaskit/editor-common/quick-insert/create-quick-insert-matcher';
2
+ import { ASK_ROVO_MENU_ITEM } from '@atlaskit/editor-common/quick-insert/keys';
2
3
  const compareRanks = (left, right) => {
3
4
  for (let index = 0; index < Math.max(left.length, right.length); index++) {
4
5
  var _left$index, _right$index;
@@ -67,8 +68,13 @@ export const createRegistryElementBrowserModel = (components, {
67
68
  });
68
69
  });
69
70
  });
71
+ const items = [...itemByKey.values()].sort((left, right) => compareRanks(left.ranks, right.ranks));
72
+ const fallbackItems = items.filter(({
73
+ registration
74
+ }) => registration.key === ASK_ROVO_MENU_ITEM.key);
70
75
  return {
71
- items: [...itemByKey.values()].sort((left, right) => compareRanks(left.ranks, right.ranks)),
76
+ fallbackItems: fallbackItems.length > 0 ? fallbackItems : undefined,
77
+ items,
72
78
  sections
73
79
  };
74
80
  };
@@ -30,6 +30,7 @@ var headerSearchStyles = null;
30
30
  var resultsId = 'registry-element-browser-results';
31
31
  var modalTestId = 'registry-element-browser-modal';
32
32
  export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
33
+ var _model$fallbackItems$, _model$fallbackItems;
33
34
  var components = _ref.components,
34
35
  emptyStateHandler = _ref.emptyStateHandler,
35
36
  defaultSection = _ref.defaultSection,
@@ -94,6 +95,7 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
94
95
  section: section
95
96
  });
96
97
  }, [formatMessage, model, query, section]);
98
+ var resultCount = items.length || (!isLoading && query.trim() ? (_model$fallbackItems$ = (_model$fallbackItems = model.fallbackItems) === null || _model$fallbackItems === void 0 ? void 0 : _model$fallbackItems.length) !== null && _model$fallbackItems$ !== void 0 ? _model$fallbackItems$ : 0 : 0);
97
99
  useEffect(function () {
98
100
  if (previousIsOffline.current !== isOffline) {
99
101
  setSelectedKey(undefined);
@@ -216,6 +218,7 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
216
218
  isLoading: isLoading,
217
219
  isOffline: isOffline,
218
220
  items: items,
221
+ fallbackItems: model.fallbackItems,
219
222
  query: query,
220
223
  resultsId: resultsId,
221
224
  section: section,
@@ -227,6 +230,6 @@ export var RegistryElementBrowser = function RegistryElementBrowser(_ref) {
227
230
  isInsertEnabled: Boolean(selectedKey),
228
231
  onClose: onClose,
229
232
  onConfirmInsert: onConfirmInsert,
230
- resultCount: items.length
233
+ resultCount: resultCount
231
234
  }))));
232
235
  };
@@ -1,6 +1,7 @@
1
1
  ._11c81af2{font:var(--ds-font-heading-medium,normal 653 20px/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._zulpu2gc{gap:var(--ds-space-100,8px)}
3
3
  ._yyhyjvu9{grid-column:1/-1}
4
+ ._15a5nqa1{border-top-style:solid}
4
5
  ._19pk1ejb{margin-top:var(--ds-space-300,24px)}
5
6
  ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
6
7
  ._19pkutpp{margin-top:var(--ds-space-150,9pt)}
@@ -8,13 +9,16 @@
8
9
  ._1bsb1osq{width:100%}
9
10
  ._1e0c11p5{display:grid}
10
11
  ._1e0c1txw{display:flex}
12
+ ._1i531l7x{border-top-color:var(--ds-border,#0b120e24)}
11
13
  ._1ul9idpf{min-width:0}
12
14
  ._2lx21bp4{flex-direction:column}
13
15
  ._4cvr1h6o{align-items:center}
14
16
  ._4cvrv2br{align-items:start}
15
17
  ._ae4vv2br{align-content:start}
18
+ ._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
16
19
  ._p12f1kdj{max-width:25pc}
17
20
  ._syazi7uo{color:var(--ds-text,#292a2e)}
21
+ ._uwhke4h9{border-top-width:var(--ds-border-width,1px)}
18
22
  ._y3gn1h6o{text-align:center}
19
23
  ._yv0ei47z{grid-template-columns:minmax(0,1fr)}
20
24
  @media (min-width:550px) and (max-width:1023px){._16409sye{grid-template-columns:repeat(2,minmax(0,1fr))}}
@@ -1,6 +1,9 @@
1
1
  /* RegistryElementBrowserSearchResults.tsx generated by @compiled/babel-plugin v3.0.2 */
2
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
3
  import "./RegistryElementBrowserSearchResults.compiled.css";
3
4
  import { ax, ix } from "@compiled/react/runtime";
5
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
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; }
4
7
  import React, { useMemo } from 'react';
5
8
  import { useIntl } from 'react-intl';
6
9
  import LinkButton from '@atlaskit/button/link';
@@ -9,6 +12,9 @@ import { Text } from '@atlaskit/primitives/compiled';
9
12
  import NotFoundIllustration from './NotFoundIllustration';
10
13
  var resultsGridStyles = null;
11
14
  var emptyStateGridItemStyles = null;
15
+ var styles = {
16
+ fallbackMarketplace: "_1i531l7x _15a5nqa1 _uwhke4h9 _19pkpxbi _ca0qpxbi"
17
+ };
12
18
  var emptyStateWrapperStyles = null;
13
19
  var emptyStateHeadingStyles = null;
14
20
  var emptyStateSubheadingStyles = null;
@@ -48,6 +54,7 @@ export var RegistryElementBrowserSearchResults = function RegistryElementBrowser
48
54
  var _emptyStateHandler;
49
55
  var editorView = _ref2.editorView,
50
56
  emptyStateHandler = _ref2.emptyStateHandler,
57
+ fallbackItems = _ref2.fallbackItems,
51
58
  _ref2$isLoading = _ref2.isLoading,
52
59
  isLoading = _ref2$isLoading === void 0 ? false : _ref2$isLoading,
53
60
  isOffline = _ref2.isOffline,
@@ -60,33 +67,20 @@ export var RegistryElementBrowserSearchResults = function RegistryElementBrowser
60
67
  onSelect = _ref2.onSelect;
61
68
  var _useIntl = useIntl(),
62
69
  formatMessage = _useIntl.formatMessage;
63
- return /*#__PURE__*/React.createElement("div", {
64
- "aria-label": formatMessage({
65
- defaultMessage: 'Element results',
66
- id: 'editor.quick-insert.results-label'
67
- }),
68
- "data-testid": "registry-element-browser-results",
69
- id: resultsId,
70
- onKeyDown: onKeyDown,
71
- tabIndex: -1,
72
- role: items.length ? 'listbox' : undefined,
73
- className: ax(["_zulpu2gc _ae4vv2br _4cvrv2br _1e0c11p5 _yv0ei47z _16409sye _g98o1koq"])
74
- }, items.length ? items.map(function (item) {
75
- return /*#__PURE__*/React.createElement(RegistryElementBrowserItem, {
76
- editorView: editorView,
77
- isOffline: isOffline,
78
- isSelected: selectedKey === item.registration.key,
79
- item: item,
80
- key: item.registration.key,
81
- onSelect: onSelect
82
- });
83
- }) : !isLoading ? /*#__PURE__*/React.createElement("div", {
84
- className: ax(["_yyhyjvu9 _1ul9idpf _1bsb1osq"])
85
- }, (_emptyStateHandler = emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler({
70
+ var hasFallbackItems = Boolean(!isLoading && items.length === 0 && query.trim().length > 0 && (fallbackItems === null || fallbackItems === void 0 ? void 0 : fallbackItems.length));
71
+ var resultsLabel = formatMessage({
72
+ defaultMessage: 'Element results',
73
+ id: 'editor.quick-insert.results-label'
74
+ });
75
+ var displayedItems = hasFallbackItems ? fallbackItems !== null && fallbackItems !== void 0 ? fallbackItems : [] : items;
76
+ var shouldRenderEmptyState = items.length === 0 && !isLoading;
77
+ var emptyState = shouldRenderEmptyState ? (_emptyStateHandler = emptyStateHandler === null || emptyStateHandler === void 0 ? void 0 : emptyStateHandler(_objectSpread({
86
78
  mode: 'full',
87
79
  searchTerm: query,
88
80
  selectedCategory: section
89
- })) !== null && _emptyStateHandler !== void 0 ? _emptyStateHandler : /*#__PURE__*/React.createElement("div", {
81
+ }, hasFallbackItems ? {
82
+ showNoResultsMessage: false
83
+ } : {}))) !== null && _emptyStateHandler !== void 0 ? _emptyStateHandler : /*#__PURE__*/React.createElement("div", {
90
84
  className: ax(["_4cvr1h6o _1e0c1txw _2lx21bp4 _1bah1h6o _1bsb1osq"])
91
85
  }, /*#__PURE__*/React.createElement(NotFoundIllustration, null), /*#__PURE__*/React.createElement("div", {
92
86
  className: ax(["_11c81af2 _syazi7uo _19pk1ejb"])
@@ -107,5 +101,27 @@ export var RegistryElementBrowserSearchResults = function RegistryElementBrowser
107
101
  }, formatMessage({
108
102
  defaultMessage: 'Explore Atlassian Marketplace',
109
103
  id: 'editor.quick-insert.explore-marketplace'
110
- })))))) : null);
104
+ }))))) : null;
105
+ return /*#__PURE__*/React.createElement("div", {
106
+ "data-testid": "registry-element-browser-results",
107
+ id: resultsId,
108
+ tabIndex: -1
109
+ }, displayedItems.length > 0 && /*#__PURE__*/React.createElement("div", {
110
+ "aria-label": resultsLabel,
111
+ onKeyDown: onKeyDown,
112
+ role: "listbox",
113
+ tabIndex: -1,
114
+ className: ax(["_zulpu2gc _ae4vv2br _4cvrv2br _1e0c11p5 _yv0ei47z _16409sye _g98o1koq"])
115
+ }, displayedItems.map(function (item) {
116
+ return /*#__PURE__*/React.createElement(RegistryElementBrowserItem, {
117
+ editorView: editorView,
118
+ isOffline: isOffline,
119
+ isSelected: selectedKey === item.registration.key,
120
+ item: item,
121
+ key: item.registration.key,
122
+ onSelect: onSelect
123
+ });
124
+ })), emptyState && /*#__PURE__*/React.createElement("div", {
125
+ className: ax(["_yyhyjvu9 _1ul9idpf _1bsb1osq", hasFallbackItems && styles.fallbackMarketplace])
126
+ }, emptyState));
111
127
  };
@@ -3,6 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
3
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
4
  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; }
5
5
  import { createQuickInsertMatcher } from '@atlaskit/editor-common/quick-insert/create-quick-insert-matcher';
6
+ import { ASK_ROVO_MENU_ITEM } from '@atlaskit/editor-common/quick-insert/keys';
6
7
  var compareRanks = function compareRanks(left, right) {
7
8
  for (var index = 0; index < Math.max(left.length, right.length); index++) {
8
9
  var _left$index, _right$index;
@@ -84,10 +85,16 @@ export var createRegistryElementBrowserModel = function createRegistryElementBro
84
85
  }));
85
86
  });
86
87
  });
88
+ var items = _toConsumableArray(itemByKey.values()).sort(function (left, right) {
89
+ return compareRanks(left.ranks, right.ranks);
90
+ });
91
+ var fallbackItems = items.filter(function (_ref2) {
92
+ var registration = _ref2.registration;
93
+ return registration.key === ASK_ROVO_MENU_ITEM.key;
94
+ });
87
95
  return {
88
- items: _toConsumableArray(itemByKey.values()).sort(function (left, right) {
89
- return compareRanks(left.ranks, right.ranks);
90
- }),
96
+ fallbackItems: fallbackItems.length > 0 ? fallbackItems : undefined,
97
+ items: items,
91
98
  sections: sections
92
99
  };
93
100
  };
@@ -96,11 +103,11 @@ export var getInitialRegistryElementBrowserSection = function getInitialRegistry
96
103
  return section.key === requestedSection;
97
104
  }) ? requestedSection : undefined;
98
105
  };
99
- export var getRegistryElementBrowserItems = function getRegistryElementBrowserItems(_ref2) {
100
- var formatMessage = _ref2.formatMessage,
101
- model = _ref2.model,
102
- query = _ref2.query,
103
- section = _ref2.section;
106
+ export var getRegistryElementBrowserItems = function getRegistryElementBrowserItems(_ref3) {
107
+ var formatMessage = _ref3.formatMessage,
108
+ model = _ref3.model,
109
+ query = _ref3.query,
110
+ section = _ref3.section;
104
111
  var normalizedQuery = query.trim();
105
112
  var items = section ? model.items.filter(function (item) {
106
113
  return item.sectionKeys.includes(section);
@@ -10,6 +10,7 @@ import type { RegistryElementBrowserItem } from './model';
10
10
  type Props = {
11
11
  editorView: EditorView;
12
12
  emptyStateHandler?: EmptyStateHandler;
13
+ fallbackItems?: RegistryElementBrowserItem[];
13
14
  isLoading?: boolean;
14
15
  isOffline: boolean;
15
16
  items: RegistryElementBrowserItem[];
@@ -27,5 +28,5 @@ declare const RegistryElementBrowserItem: ({ editorView, isOffline, isSelected,
27
28
  item: RegistryElementBrowserItem;
28
29
  onSelect: (key: string, handler: QuickInsertSelectionHandler) => void;
29
30
  }) => React.JSX.Element | null;
30
- export declare const RegistryElementBrowserSearchResults: ({ editorView, emptyStateHandler, isLoading, isOffline, items, query, resultsId, section, selectedKey, onKeyDown, onSelect, }: Props) => React.JSX.Element;
31
+ export declare const RegistryElementBrowserSearchResults: ({ editorView, emptyStateHandler, fallbackItems, isLoading, isOffline, items, query, resultsId, section, selectedKey, onKeyDown, onSelect, }: Props) => React.JSX.Element;
31
32
  export {};
@@ -10,6 +10,7 @@ export type RegistryElementBrowserItem = {
10
10
  sectionKeys: string[];
11
11
  };
12
12
  export type RegistryElementBrowserModel = {
13
+ fallbackItems?: RegistryElementBrowserItem[];
13
14
  items: RegistryElementBrowserItem[];
14
15
  sections: RegistryElementBrowserSection[];
15
16
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-quick-insert",
3
- "version": "19.0.6",
3
+ "version": "19.0.7",
4
4
  "description": "Quick insert plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -51,7 +51,7 @@
51
51
  "@emotion/react": "^11.7.1"
52
52
  },
53
53
  "peerDependencies": {
54
- "@atlaskit/editor-common": "^123.5.0",
54
+ "@atlaskit/editor-common": "^123.7.0",
55
55
  "react": "^18.2.0 || ^19.2.0",
56
56
  "react-dom": "^18.2.0 || ^19.2.0",
57
57
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"