@atlaskit/editor-common 110.4.12 → 110.4.14

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.
Files changed (30) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/element-browser/ElementBrowser.js +4 -2
  3. package/dist/cjs/element-browser/components/StatelessElementBrowser.js +74 -49
  4. package/dist/cjs/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +15 -5
  5. package/dist/cjs/keymaps/index.js +7 -3
  6. package/dist/cjs/monitoring/error.js +1 -1
  7. package/dist/cjs/ui/DropList/index.js +1 -1
  8. package/dist/es2019/element-browser/ElementBrowser.js +4 -2
  9. package/dist/es2019/element-browser/components/StatelessElementBrowser.js +70 -49
  10. package/dist/es2019/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +15 -5
  11. package/dist/es2019/keymaps/index.js +4 -0
  12. package/dist/es2019/monitoring/error.js +1 -1
  13. package/dist/es2019/ui/DropList/index.js +1 -1
  14. package/dist/esm/element-browser/ElementBrowser.js +4 -2
  15. package/dist/esm/element-browser/components/StatelessElementBrowser.js +74 -49
  16. package/dist/esm/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +15 -5
  17. package/dist/esm/keymaps/index.js +4 -0
  18. package/dist/esm/monitoring/error.js +1 -1
  19. package/dist/esm/ui/DropList/index.js +1 -1
  20. package/dist/types/element-browser/ElementBrowser.d.ts +4 -0
  21. package/dist/types/element-browser/components/StatelessElementBrowser.d.ts +8 -0
  22. package/dist/types/element-browser/hooks/use-select-and-focus-on-arrow-navigation.d.ts +1 -1
  23. package/dist/types/keymaps/index.d.ts +4 -0
  24. package/dist/types/types/floating-toolbar.d.ts +1 -0
  25. package/dist/types-ts4.5/element-browser/ElementBrowser.d.ts +4 -0
  26. package/dist/types-ts4.5/element-browser/components/StatelessElementBrowser.d.ts +8 -0
  27. package/dist/types-ts4.5/element-browser/hooks/use-select-and-focus-on-arrow-navigation.d.ts +1 -1
  28. package/dist/types-ts4.5/keymaps/index.d.ts +4 -0
  29. package/dist/types-ts4.5/types/floating-toolbar.d.ts +1 -0
  30. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-common
2
2
 
3
+ ## 110.4.14
4
+
5
+ ### Patch Changes
6
+
7
+ - [`a369fcd2d81f3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a369fcd2d81f3) -
8
+ [ux] [ENGHEALTH-30483] Add close button to element browser modal header section
9
+ - Updated dependencies
10
+
11
+ ## 110.4.13
12
+
13
+ ### Patch Changes
14
+
15
+ - [`872bd8d576773`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/872bd8d576773) -
16
+ [ux] ED-29272 Add missing tooltip and shortcut for TextColorDropdownMenu
17
+ - Updated dependencies
18
+
3
19
  ## 110.4.12
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/element-browser/ElementBrowser.js CHANGED
@@ -121,7 +121,8 @@ var ElementBrowser = exports.default = /*#__PURE__*/function (_PureComponent) {
121
121
  emptyStateHandler = _this$props.emptyStateHandler,
122
122
  viewMoreItem = _this$props.viewMoreItem,
123
123
  onViewMore = _this$props.onViewMore,
124
- cache = _this$props.cache;
124
+ cache = _this$props.cache,
125
+ autoFocusSearch = _this$props.autoFocusSearch;
125
126
  var _this$state2 = this.state,
126
127
  categories = _this$state2.categories,
127
128
  searchTerm = _this$state2.searchTerm,
@@ -142,7 +143,8 @@ var ElementBrowser = exports.default = /*#__PURE__*/function (_PureComponent) {
142
143
  emptyStateHandler: emptyStateHandler,
143
144
  viewMoreItem: viewMoreItem,
144
145
  cache: cache,
145
- onViewMore: onViewMore
146
+ onViewMore: onViewMore,
147
+ autoFocusSearch: autoFocusSearch
146
148
  });
147
149
  }
148
150
  }]);
package/dist/cjs/element-browser/components/StatelessElementBrowser.js CHANGED
@@ -136,7 +136,9 @@ function StatelessElementBrowser(props) {
136
136
  onSelectCategory = props.onSelectCategory,
137
137
  searchTerm = props.searchTerm,
138
138
  showCategories = props.showCategories,
139
- cache = props.cache;
139
+ cache = props.cache,
140
+ _props$autoFocusSearc = props.autoFocusSearch,
141
+ autoFocusSearch = _props$autoFocusSearc === void 0 ? true : _props$autoFocusSearc;
140
142
  var _useContainerWidth = (0, _useContainerWidth2.default)(),
141
143
  containerWidth = _useContainerWidth.containerWidth,
142
144
  ContainerWidthMonitor = _useContainerWidth.ContainerWidthMonitor;
@@ -149,21 +151,31 @@ function StatelessElementBrowser(props) {
149
151
  var selectedCategoryIndex = (_props$categories = props.categories) === null || _props$categories === void 0 ? void 0 : _props$categories.findIndex(function (category) {
150
152
  return category.name === selectedCategory;
151
153
  });
154
+ var _useState3 = (0, _react.useState)(autoFocusSearch),
155
+ _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
156
+ canFocusSearch = _useState4[0],
157
+ setCanFocusSearch = _useState4[1];
152
158
  if (showCategories) {
153
159
  var isEmptySearchTerm = !searchTerm || (searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.length) === 0;
154
160
  if (!isEmptySearchTerm) {
155
161
  // clear the flag if the search happens after a user has chosen the category
156
162
  categoryBeenChosen.current = false;
157
163
  }
158
- // A11Y: if categories exists, on the initial render search element should receive focus.
159
- // After user pick some category the category should stay focused.
160
- isFocusSearch = !categoryBeenChosen.current || !isEmptySearchTerm;
164
+ if ((0, _expValEquals.expValEquals)('platform_editor_update_modal_close_button', 'isEnabled', true)) {
165
+ // A11Y: if categories exists and search can be focused, on the initial render it should receive focus.
166
+ // After user pick some category the category should stay focused.
167
+ isFocusSearch = canFocusSearch && (!categoryBeenChosen.current || !isEmptySearchTerm);
168
+ } else {
169
+ // A11Y: if categories exists, on the initial render search element should receive focus.
170
+ // After user pick some category the category should stay focused.
171
+ isFocusSearch = !categoryBeenChosen.current || !isEmptySearchTerm;
172
+ }
161
173
  }
162
174
  var itemIsDisabled = (0, _react.useCallback)(function (index) {
163
175
  var _items$index$isDisabl, _items$index;
164
176
  return (_items$index$isDisabl = (_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.isDisabled) !== null && _items$index$isDisabl !== void 0 ? _items$index$isDisabl : false;
165
177
  }, [items]);
166
- var _useSelectAndFocusOnA = (0, _useSelectAndFocusOnArrowNavigation.default)(items.length - 1, columnCount, (0, _platformFeatureFlags.fg)('platform_editor_refactor_view_more') ? !!onViewMore : !!viewMoreItem, itemIsDisabled, isFocusSearch),
178
+ var _useSelectAndFocusOnA = (0, _useSelectAndFocusOnArrowNavigation.default)(items.length - 1, columnCount, (0, _platformFeatureFlags.fg)('platform_editor_refactor_view_more') ? !!onViewMore : !!viewMoreItem, itemIsDisabled, isFocusSearch, autoFocusSearch),
167
179
  selectedItemIndex = _useSelectAndFocusOnA.selectedItemIndex,
168
180
  focusedItemIndex = _useSelectAndFocusOnA.focusedItemIndex,
169
181
  setFocusedItemIndex = _useSelectAndFocusOnA.setFocusedItemIndex,
@@ -233,50 +245,63 @@ function StatelessElementBrowser(props) {
233
245
  onSelectCategory(category);
234
246
  categoryBeenChosen.current = true;
235
247
  }, [categoryBeenChosen, onSelectCategory]);
236
- return (0, _react2.jsx)("div", {
237
- css: wrapper,
238
- "data-testid": "element-browser",
239
- id: _constants.ELEMENT_BROWSER_ID
240
- }, (0, _react2.jsx)(ContainerWidthMonitor, null), containerWidth < _constants.DEVICE_BREAKPOINT_NUMBERS.medium ? (0, _react2.jsx)(MobileBrowser
241
- // Ignored via go/ees005
242
- // eslint-disable-next-line react/jsx-props-no-spreading
243
- , (0, _extends2.default)({}, props, {
244
- selectedItemIndex: selectedItemIndex,
245
- focusOnEmptyStateButton: focusOnEmptyStateButton,
246
- focusedItemIndex: focusedItemIndex,
247
- setFocusedItemIndex: setFocusedItemIndex,
248
- focusedCategoryIndex: focusedCategoryIndex,
249
- setFocusedCategoryIndex: setFocusedCategoryIndex,
250
- focusOnSearch: focusOnSearch,
251
- columnCount: columnCount,
252
- setColumnCount: setColumnCount,
253
- setFocusOnSearch: setFocusOnSearch,
254
- onKeyPress: onItemsEnterTabKeyPress,
255
- onKeyDown: onKeyDown,
256
- viewMoreItem: viewMoreItem,
257
- onViewMore: onViewMore,
258
- focusOnViewMore: focusOnViewMore,
259
- cache: cache
260
- })) : (0, _react2.jsx)(DesktopBrowser
261
- // Ignored via go/ees005
262
- // eslint-disable-next-line react/jsx-props-no-spreading
263
- , (0, _extends2.default)({}, props, {
264
- selectedItemIndex: selectedItemIndex,
265
- focusOnEmptyStateButton: focusOnEmptyStateButton,
266
- focusedItemIndex: focusedItemIndex,
267
- setFocusedItemIndex: setFocusedItemIndex,
268
- focusOnSearch: focusOnSearch,
269
- setColumnCount: setColumnCount,
270
- columnCount: columnCount,
271
- setFocusOnSearch: setFocusOnSearch,
272
- onKeyPress: onItemsEnterTabKeyPress,
273
- onKeyDown: onKeyDown,
274
- focusedCategoryIndex: focusedCategoryIndex,
275
- setFocusedCategoryIndex: setFocusedCategoryIndex,
276
- selectedCategoryIndex: selectedCategoryIndex,
277
- onSelectCategory: onSelectCategoryCB,
278
- cache: cache
279
- })));
248
+ var handleKeyPress = function handleKeyPress(e) {
249
+ if (e.key === 'Tab') {
250
+ // only Tab key can change focus from close button (if present)
251
+ setCanFocusSearch(true);
252
+ }
253
+ };
254
+ var handleClick = function handleClick() {
255
+ setCanFocusSearch(true);
256
+ };
257
+ return /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable */(
258
+ (0, _react2.jsx)("div", {
259
+ css: wrapper,
260
+ "data-testid": "element-browser",
261
+ id: _constants.ELEMENT_BROWSER_ID,
262
+ onKeyUp: canFocusSearch ? undefined : handleKeyPress,
263
+ onClick: canFocusSearch ? undefined : handleClick
264
+ }, (0, _react2.jsx)(ContainerWidthMonitor, null), containerWidth < _constants.DEVICE_BREAKPOINT_NUMBERS.medium ? (0, _react2.jsx)(MobileBrowser
265
+ // Ignored via go/ees005
266
+ // eslint-disable-next-line react/jsx-props-no-spreading
267
+ , (0, _extends2.default)({}, props, {
268
+ selectedItemIndex: selectedItemIndex,
269
+ focusOnEmptyStateButton: focusOnEmptyStateButton,
270
+ focusedItemIndex: focusedItemIndex,
271
+ setFocusedItemIndex: setFocusedItemIndex,
272
+ focusedCategoryIndex: focusedCategoryIndex,
273
+ setFocusedCategoryIndex: setFocusedCategoryIndex,
274
+ focusOnSearch: focusOnSearch,
275
+ columnCount: columnCount,
276
+ setColumnCount: setColumnCount,
277
+ setFocusOnSearch: setFocusOnSearch,
278
+ onKeyPress: onItemsEnterTabKeyPress,
279
+ onKeyDown: onKeyDown,
280
+ viewMoreItem: viewMoreItem,
281
+ onViewMore: onViewMore,
282
+ focusOnViewMore: focusOnViewMore,
283
+ cache: cache
284
+ })) : (0, _react2.jsx)(DesktopBrowser
285
+ // Ignored via go/ees005
286
+ // eslint-disable-next-line react/jsx-props-no-spreading
287
+ , (0, _extends2.default)({}, props, {
288
+ selectedItemIndex: selectedItemIndex,
289
+ focusOnEmptyStateButton: focusOnEmptyStateButton,
290
+ focusedItemIndex: focusedItemIndex,
291
+ setFocusedItemIndex: setFocusedItemIndex,
292
+ focusOnSearch: focusOnSearch,
293
+ setColumnCount: setColumnCount,
294
+ columnCount: columnCount,
295
+ setFocusOnSearch: setFocusOnSearch,
296
+ onKeyPress: onItemsEnterTabKeyPress,
297
+ onKeyDown: onKeyDown,
298
+ focusedCategoryIndex: focusedCategoryIndex,
299
+ setFocusedCategoryIndex: setFocusedCategoryIndex,
300
+ selectedCategoryIndex: selectedCategoryIndex,
301
+ onSelectCategory: onSelectCategoryCB,
302
+ cache: cache
303
+ })))
304
+ );
280
305
  }
281
306
  function MobileBrowser(_ref) {
282
307
  var showCategories = _ref.showCategories,
package/dist/cjs/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js CHANGED
@@ -9,6 +9,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
9
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
10
  var _react = require("react");
11
11
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
12
13
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
13
14
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
14
15
  /**
@@ -193,6 +194,14 @@ var moveReducer = function moveReducer(state, action) {
193
194
  focusedItemIndex: safeIndex
194
195
  });
195
196
  };
197
+ var initialStateWithFocusOnSearchDisabled = {
198
+ focusOnSearch: false,
199
+ focusOnViewMore: false,
200
+ focusOnEmptyStateButton: false,
201
+ selectedItemIndex: 0,
202
+ focusedItemIndex: undefined,
203
+ listSize: 0
204
+ };
196
205
  var initialState = {
197
206
  focusOnSearch: true,
198
207
  focusOnViewMore: false,
@@ -242,8 +251,8 @@ var skipBackwardOffsetToSafeItem = function skipBackwardOffsetToSafeItem(current
242
251
  // Move to search if no available index
243
252
  return currentIndex + 1;
244
253
  };
245
- function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, itemIsDisabled, isFocusSearch) {
246
- var _useReducer = (0, _react.useReducer)(reducer, initialState, getInitialState(listSize, canFocusViewMore)),
254
+ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, itemIsDisabled, isFocusSearch, autoFocusSearch) {
255
+ var _useReducer = (0, _react.useReducer)(reducer, (0, _expValEquals.expValEquals)('platform_editor_update_modal_close_button', 'isEnabled', true) && autoFocusSearch ? initialState : initialStateWithFocusOnSearchDisabled, getInitialState(listSize, canFocusViewMore)),
247
256
  _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
248
257
  state = _useReducer2[0],
249
258
  dispatch = _useReducer2[1];
@@ -264,19 +273,20 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, it
264
273
 
265
274
  // calls if items size changed
266
275
  var reset = (0, _react.useCallback)(function (listSize) {
267
- var payload = _objectSpread(_objectSpread({}, initialState), {}, {
276
+ var defaultState = (0, _expValEquals.expValEquals)('platform_editor_update_modal_close_button', 'isEnabled', true) && autoFocusSearch ? initialState : initialStateWithFocusOnSearchDisabled;
277
+ var payload = _objectSpread(_objectSpread({}, defaultState), {}, {
268
278
  listSize: listSize
269
279
  });
270
280
  // A11Y: if categories exist ,on the initial render search element should receive focus.
271
281
  // After user pick some category the category should stay focused.
272
282
  payload = Object.assign(payload, {
273
- focusOnSearch: isFocusSearch !== null && isFocusSearch !== void 0 ? isFocusSearch : initialState.focusOnSearch
283
+ focusOnSearch: isFocusSearch !== null && isFocusSearch !== void 0 ? isFocusSearch : defaultState.focusOnSearch
274
284
  });
275
285
  dispatch({
276
286
  type: ACTIONS.UPDATE_STATE,
277
287
  payload: payload
278
288
  });
279
- }, [isFocusSearch]);
289
+ }, [isFocusSearch, autoFocusSearch]);
280
290
  var removeFocusFromSearchAndSetOnItem = (0, _react.useCallback)(function (index) {
281
291
  var payload = {
282
292
  focusedItemIndex: index,
package/dist/cjs/keymaps/index.js CHANGED
@@ -91,7 +91,7 @@ exports.focusToContextMenuTrigger = exports.focusTableResizer = void 0;
91
91
  exports.formatShortcut = formatShortcut;
92
92
  exports.forwardDelete = void 0;
93
93
  exports.getAriaKeyshortcuts = getAriaKeyshortcuts;
94
- exports.insertRule = exports.insertNewLine = exports.indentList = exports.indent = exports.increaseMediaSize = void 0;
94
+ exports.insertTaskList = exports.insertRule = exports.insertNewLine = exports.insertMention = exports.insertEmoji = exports.insertElements = exports.indentList = exports.indent = exports.increaseMediaSize = void 0;
95
95
  exports.isCapsLockOnAndModifyKeyboardEvent = isCapsLockOnAndModifyKeyboardEvent;
96
96
  Object.defineProperty(exports, "keymap", {
97
97
  enumerable: true,
@@ -102,8 +102,8 @@ Object.defineProperty(exports, "keymap", {
102
102
  exports.makeKeyMapArrayWithCommon = makeKeyMapArrayWithCommon;
103
103
  exports.makeKeyMapWithCommon = makeKeyMapWithCommon;
104
104
  exports.makeKeymap = makeKeymap;
105
- exports.space = exports.showElementDragHandle = exports.shiftTab = exports.shiftEnter = exports.shiftBackspace = exports.shiftArrowUp = exports.setNormalText = exports.selectTable = exports.selectRow = exports.selectColumn = exports.redoAlt = exports.redo = exports.previousCell = exports.pastePlainText = exports.paste = exports.outdentList = exports.outdent = exports.openHelp = exports.nextCell = exports.navToFloatingToolbar = exports.navToEditorToolbar = exports.moveUp = exports.moveRowUp = exports.moveRowDown = exports.moveRight = exports.moveLeft = exports.moveDown = exports.moveColumnRight = exports.moveColumnLeft = void 0;
106
- exports.toggleUnderline = exports.toggleTaskList = exports.toggleTaskItemCheckbox = exports.toggleTable = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleOrderedList = exports.toggleItalic = exports.toggleHighlightPalette = exports.toggleHeading6 = exports.toggleHeading5 = exports.toggleHeading4 = exports.toggleHeading3 = exports.toggleHeading2 = exports.toggleHeading1 = exports.toggleCodeBlock = exports.toggleCode = exports.toggleBulletList = exports.toggleBold = exports.toggleBlockQuote = exports.tab = exports.submit = exports.startColumnResizing = exports.splitListItem = exports.splitCodeBlock = void 0;
105
+ exports.shiftBackspace = exports.shiftArrowUp = exports.setNormalText = exports.selectTable = exports.selectRow = exports.selectColumn = exports.redoAlt = exports.redo = exports.previousCell = exports.pastePlainText = exports.paste = exports.outdentList = exports.outdent = exports.openHelp = exports.nextCell = exports.navToFloatingToolbar = exports.navToEditorToolbar = exports.moveUp = exports.moveRowUp = exports.moveRowDown = exports.moveRight = exports.moveLeft = exports.moveDown = exports.moveColumnRight = exports.moveColumnLeft = void 0;
106
+ exports.toggleUnderline = exports.toggleTaskList = exports.toggleTaskItemCheckbox = exports.toggleTable = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleOrderedList = exports.toggleItalic = exports.toggleHighlightPalette = exports.toggleHeading6 = exports.toggleHeading5 = exports.toggleHeading4 = exports.toggleHeading3 = exports.toggleHeading2 = exports.toggleHeading1 = exports.toggleCodeBlock = exports.toggleCode = exports.toggleBulletList = exports.toggleBold = exports.toggleBlockQuote = exports.tab = exports.submit = exports.startColumnResizing = exports.splitListItem = exports.splitCodeBlock = exports.space = exports.showElementDragHandle = exports.shiftTab = exports.shiftEnter = void 0;
107
107
  exports.tooltip = tooltip;
108
108
  exports.undo = void 0;
109
109
  var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
@@ -222,6 +222,10 @@ var dragToMoveLeft = exports.dragToMoveLeft = makeKeyMapWithCommon('Move node to
222
222
  var dragToMoveRight = exports.dragToMoveRight = makeKeyMapWithCommon('Move node to the right column in the document', 'Ctrl-Shift-Alt-ArrowRight');
223
223
  var showElementDragHandle = exports.showElementDragHandle = makeKeyMapWithCommon('Show drag handle for editor element', 'Ctrl-Shift-h');
224
224
  var toggleCodeBlock = exports.toggleCodeBlock = makeKeyMapWithCommon('Toggle Code Block', '```');
225
+ var insertEmoji = exports.insertEmoji = makeKeyMapWithCommon('Insert Emoji', ':');
226
+ var insertMention = exports.insertMention = makeKeyMapWithCommon('Insert Mention', '@');
227
+ var insertTaskList = exports.insertTaskList = makeKeyMapWithCommon('Insert Action Item', '[]');
228
+ var insertElements = exports.insertElements = makeKeyMapWithCommon('Insert Elements', '/');
225
229
  var continueInRovoChat = exports.continueInRovoChat = makeKeyMapWithCommon('Continue in Rovo chat', 'Alt-Enter');
226
230
  var arrowKeysMap = {
227
231
  // for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
package/dist/cjs/monitoring/error.js CHANGED
@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
16
16
  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); }
17
17
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
18
18
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
19
- var packageVersion = "110.4.11";
19
+ var packageVersion = "110.4.13";
20
20
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
21
21
  // Remove URL as it has UGC
22
22
  // Ignored via go/ees007
package/dist/cjs/ui/DropList/index.js CHANGED
@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
24
24
  * @jsx jsx
25
25
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
26
26
  var packageName = "@atlaskit/editor-common";
27
- var packageVersion = "110.4.11";
27
+ var packageVersion = "110.4.13";
28
28
  var halfFocusRing = 1;
29
29
  var dropOffset = '0, 8';
30
30
  var fadeIn = (0, _react2.keyframes)({
package/dist/es2019/element-browser/ElementBrowser.js CHANGED
@@ -90,7 +90,8 @@ export default class ElementBrowser extends PureComponent {
90
90
  emptyStateHandler,
91
91
  viewMoreItem,
92
92
  onViewMore,
93
- cache
93
+ cache,
94
+ autoFocusSearch
94
95
  } = this.props;
95
96
  const {
96
97
  categories,
@@ -113,7 +114,8 @@ export default class ElementBrowser extends PureComponent {
113
114
  emptyStateHandler: emptyStateHandler,
114
115
  viewMoreItem: viewMoreItem,
115
116
  cache: cache,
116
- onViewMore: onViewMore
117
+ onViewMore: onViewMore,
118
+ autoFocusSearch: autoFocusSearch
117
119
  });
118
120
  }
119
121
  }
package/dist/es2019/element-browser/components/StatelessElementBrowser.js CHANGED
@@ -126,7 +126,8 @@ function StatelessElementBrowser(props) {
126
126
  onSelectCategory,
127
127
  searchTerm,
128
128
  showCategories,
129
- cache
129
+ cache,
130
+ autoFocusSearch = true
130
131
  } = props;
131
132
  const {
132
133
  containerWidth,
@@ -138,15 +139,22 @@ function StatelessElementBrowser(props) {
138
139
  const selectedCategoryIndex = (_props$categories = props.categories) === null || _props$categories === void 0 ? void 0 : _props$categories.findIndex(category => {
139
140
  return category.name === selectedCategory;
140
141
  });
142
+ const [canFocusSearch, setCanFocusSearch] = useState(autoFocusSearch);
141
143
  if (showCategories) {
142
144
  const isEmptySearchTerm = !searchTerm || (searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.length) === 0;
143
145
  if (!isEmptySearchTerm) {
144
146
  // clear the flag if the search happens after a user has chosen the category
145
147
  categoryBeenChosen.current = false;
146
148
  }
147
- // A11Y: if categories exists, on the initial render search element should receive focus.
148
- // After user pick some category the category should stay focused.
149
- isFocusSearch = !categoryBeenChosen.current || !isEmptySearchTerm;
149
+ if (expValEquals('platform_editor_update_modal_close_button', 'isEnabled', true)) {
150
+ // A11Y: if categories exists and search can be focused, on the initial render it should receive focus.
151
+ // After user pick some category the category should stay focused.
152
+ isFocusSearch = canFocusSearch && (!categoryBeenChosen.current || !isEmptySearchTerm);
153
+ } else {
154
+ // A11Y: if categories exists, on the initial render search element should receive focus.
155
+ // After user pick some category the category should stay focused.
156
+ isFocusSearch = !categoryBeenChosen.current || !isEmptySearchTerm;
157
+ }
150
158
  }
151
159
  const itemIsDisabled = useCallback(index => {
152
160
  var _items$index$isDisabl, _items$index;
@@ -163,7 +171,7 @@ function StatelessElementBrowser(props) {
163
171
  focusOnViewMore,
164
172
  onKeyDown,
165
173
  setFocusOnSearch
166
- } = useSelectAndFocusOnArrowNavigation(items.length - 1, columnCount, fg('platform_editor_refactor_view_more') ? !!onViewMore : !!viewMoreItem, itemIsDisabled, isFocusSearch);
174
+ } = useSelectAndFocusOnArrowNavigation(items.length - 1, columnCount, fg('platform_editor_refactor_view_more') ? !!onViewMore : !!viewMoreItem, itemIsDisabled, isFocusSearch, autoFocusSearch);
167
175
  useEffect(() => {
168
176
  fireAnalyticsEvent(props.createAnalyticsEvent)({
169
177
  payload: {
@@ -223,50 +231,63 @@ function StatelessElementBrowser(props) {
223
231
  onSelectCategory(category);
224
232
  categoryBeenChosen.current = true;
225
233
  }, [categoryBeenChosen, onSelectCategory]);
226
- return jsx("div", {
227
- css: wrapper,
228
- "data-testid": "element-browser",
229
- id: ELEMENT_BROWSER_ID
230
- }, jsx(ContainerWidthMonitor, null), containerWidth < DEVICE_BREAKPOINT_NUMBERS.medium ? jsx(MobileBrowser
231
- // Ignored via go/ees005
232
- // eslint-disable-next-line react/jsx-props-no-spreading
233
- , _extends({}, props, {
234
- selectedItemIndex: selectedItemIndex,
235
- focusOnEmptyStateButton: focusOnEmptyStateButton,
236
- focusedItemIndex: focusedItemIndex,
237
- setFocusedItemIndex: setFocusedItemIndex,
238
- focusedCategoryIndex: focusedCategoryIndex,
239
- setFocusedCategoryIndex: setFocusedCategoryIndex,
240
- focusOnSearch: focusOnSearch,
241
- columnCount: columnCount,
242
- setColumnCount: setColumnCount,
243
- setFocusOnSearch: setFocusOnSearch,
244
- onKeyPress: onItemsEnterTabKeyPress,
245
- onKeyDown: onKeyDown,
246
- viewMoreItem: viewMoreItem,
247
- onViewMore: onViewMore,
248
- focusOnViewMore: focusOnViewMore,
249
- cache: cache
250
- })) : jsx(DesktopBrowser
251
- // Ignored via go/ees005
252
- // eslint-disable-next-line react/jsx-props-no-spreading
253
- , _extends({}, props, {
254
- selectedItemIndex: selectedItemIndex,
255
- focusOnEmptyStateButton: focusOnEmptyStateButton,
256
- focusedItemIndex: focusedItemIndex,
257
- setFocusedItemIndex: setFocusedItemIndex,
258
- focusOnSearch: focusOnSearch,
259
- setColumnCount: setColumnCount,
260
- columnCount: columnCount,
261
- setFocusOnSearch: setFocusOnSearch,
262
- onKeyPress: onItemsEnterTabKeyPress,
263
- onKeyDown: onKeyDown,
264
- focusedCategoryIndex: focusedCategoryIndex,
265
- setFocusedCategoryIndex: setFocusedCategoryIndex,
266
- selectedCategoryIndex: selectedCategoryIndex,
267
- onSelectCategory: onSelectCategoryCB,
268
- cache: cache
269
- })));
234
+ const handleKeyPress = e => {
235
+ if (e.key === 'Tab') {
236
+ // only Tab key can change focus from close button (if present)
237
+ setCanFocusSearch(true);
238
+ }
239
+ };
240
+ const handleClick = () => {
241
+ setCanFocusSearch(true);
242
+ };
243
+ return /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable */(
244
+ jsx("div", {
245
+ css: wrapper,
246
+ "data-testid": "element-browser",
247
+ id: ELEMENT_BROWSER_ID,
248
+ onKeyUp: canFocusSearch ? undefined : handleKeyPress,
249
+ onClick: canFocusSearch ? undefined : handleClick
250
+ }, jsx(ContainerWidthMonitor, null), containerWidth < DEVICE_BREAKPOINT_NUMBERS.medium ? jsx(MobileBrowser
251
+ // Ignored via go/ees005
252
+ // eslint-disable-next-line react/jsx-props-no-spreading
253
+ , _extends({}, props, {
254
+ selectedItemIndex: selectedItemIndex,
255
+ focusOnEmptyStateButton: focusOnEmptyStateButton,
256
+ focusedItemIndex: focusedItemIndex,
257
+ setFocusedItemIndex: setFocusedItemIndex,
258
+ focusedCategoryIndex: focusedCategoryIndex,
259
+ setFocusedCategoryIndex: setFocusedCategoryIndex,
260
+ focusOnSearch: focusOnSearch,
261
+ columnCount: columnCount,
262
+ setColumnCount: setColumnCount,
263
+ setFocusOnSearch: setFocusOnSearch,
264
+ onKeyPress: onItemsEnterTabKeyPress,
265
+ onKeyDown: onKeyDown,
266
+ viewMoreItem: viewMoreItem,
267
+ onViewMore: onViewMore,
268
+ focusOnViewMore: focusOnViewMore,
269
+ cache: cache
270
+ })) : jsx(DesktopBrowser
271
+ // Ignored via go/ees005
272
+ // eslint-disable-next-line react/jsx-props-no-spreading
273
+ , _extends({}, props, {
274
+ selectedItemIndex: selectedItemIndex,
275
+ focusOnEmptyStateButton: focusOnEmptyStateButton,
276
+ focusedItemIndex: focusedItemIndex,
277
+ setFocusedItemIndex: setFocusedItemIndex,
278
+ focusOnSearch: focusOnSearch,
279
+ setColumnCount: setColumnCount,
280
+ columnCount: columnCount,
281
+ setFocusOnSearch: setFocusOnSearch,
282
+ onKeyPress: onItemsEnterTabKeyPress,
283
+ onKeyDown: onKeyDown,
284
+ focusedCategoryIndex: focusedCategoryIndex,
285
+ setFocusedCategoryIndex: setFocusedCategoryIndex,
286
+ selectedCategoryIndex: selectedCategoryIndex,
287
+ onSelectCategory: onSelectCategoryCB,
288
+ cache: cache
289
+ })))
290
+ );
270
291
  }
271
292
  function MobileBrowser({
272
293
  showCategories,
package/dist/es2019/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import { useCallback, useEffect, useReducer, useRef } from 'react';
2
2
  import { fg } from '@atlaskit/platform-feature-flags';
3
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
3
4
 
4
5
  /**
5
6
  * a custom hook that handles keyboard navigation for Arrow keys based on a
@@ -200,6 +201,14 @@ const moveReducer = (state, action) => {
200
201
  focusedItemIndex: safeIndex
201
202
  };
202
203
  };
204
+ const initialStateWithFocusOnSearchDisabled = {
205
+ focusOnSearch: false,
206
+ focusOnViewMore: false,
207
+ focusOnEmptyStateButton: false,
208
+ selectedItemIndex: 0,
209
+ focusedItemIndex: undefined,
210
+ listSize: 0
211
+ };
203
212
  const initialState = {
204
213
  focusOnSearch: true,
205
214
  focusOnViewMore: false,
@@ -246,8 +255,8 @@ const skipBackwardOffsetToSafeItem = (currentIndex, stepSize, itemIsDisabled) =>
246
255
  // Move to search if no available index
247
256
  return currentIndex + 1;
248
257
  };
249
- function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, itemIsDisabled, isFocusSearch) {
250
- const [state, dispatch] = useReducer(reducer, initialState, getInitialState(listSize, canFocusViewMore));
258
+ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, itemIsDisabled, isFocusSearch, autoFocusSearch) {
259
+ const [state, dispatch] = useReducer(reducer, expValEquals('platform_editor_update_modal_close_button', 'isEnabled', true) && autoFocusSearch ? initialState : initialStateWithFocusOnSearchDisabled, getInitialState(listSize, canFocusViewMore));
251
260
  useEffect(() => {
252
261
  dispatch({
253
262
  type: ACTIONS.UPDATE_STATE,
@@ -267,20 +276,21 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, it
267
276
 
268
277
  // calls if items size changed
269
278
  const reset = useCallback(listSize => {
279
+ const defaultState = expValEquals('platform_editor_update_modal_close_button', 'isEnabled', true) && autoFocusSearch ? initialState : initialStateWithFocusOnSearchDisabled;
270
280
  let payload = {
271
- ...initialState,
281
+ ...defaultState,
272
282
  listSize
273
283
  };
274
284
  // A11Y: if categories exist ,on the initial render search element should receive focus.
275
285
  // After user pick some category the category should stay focused.
276
286
  payload = Object.assign(payload, {
277
- focusOnSearch: isFocusSearch !== null && isFocusSearch !== void 0 ? isFocusSearch : initialState.focusOnSearch
287
+ focusOnSearch: isFocusSearch !== null && isFocusSearch !== void 0 ? isFocusSearch : defaultState.focusOnSearch
278
288
  });
279
289
  dispatch({
280
290
  type: ACTIONS.UPDATE_STATE,
281
291
  payload
282
292
  });
283
- }, [isFocusSearch]);
293
+ }, [isFocusSearch, autoFocusSearch]);
284
294
  const removeFocusFromSearchAndSetOnItem = useCallback(index => {
285
295
  let payload = {
286
296
  focusedItemIndex: index,
package/dist/es2019/keymaps/index.js CHANGED
@@ -109,6 +109,10 @@ export const dragToMoveLeft = makeKeyMapWithCommon('Move node to the left column
109
109
  export const dragToMoveRight = makeKeyMapWithCommon('Move node to the right column in the document', 'Ctrl-Shift-Alt-ArrowRight');
110
110
  export const showElementDragHandle = makeKeyMapWithCommon('Show drag handle for editor element', 'Ctrl-Shift-h');
111
111
  export const toggleCodeBlock = makeKeyMapWithCommon('Toggle Code Block', '```');
112
+ export const insertEmoji = makeKeyMapWithCommon('Insert Emoji', ':');
113
+ export const insertMention = makeKeyMapWithCommon('Insert Mention', '@');
114
+ export const insertTaskList = makeKeyMapWithCommon('Insert Action Item', '[]');
115
+ export const insertElements = makeKeyMapWithCommon('Insert Elements', '/');
112
116
  export const continueInRovoChat = makeKeyMapWithCommon('Continue in Rovo chat', 'Alt-Enter');
113
117
  const arrowKeysMap = {
114
118
  // for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
package/dist/es2019/monitoring/error.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { isFedRamp } from './environment';
2
2
  const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
3
3
  const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
4
- const packageVersion = "110.4.11";
4
+ const packageVersion = "110.4.13";
5
5
  const sanitiseSentryEvents = (data, _hint) => {
6
6
  // Remove URL as it has UGC
7
7
  // Ignored via go/ees007
package/dist/es2019/ui/DropList/index.js CHANGED
@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
14
14
  import { fg } from '@atlaskit/platform-feature-flags';
15
15
  import Layer from '../Layer';
16
16
  const packageName = "@atlaskit/editor-common";
17
- const packageVersion = "110.4.11";
17
+ const packageVersion = "110.4.13";
18
18
  const halfFocusRing = 1;
19
19
  const dropOffset = '0, 8';
20
20
  const fadeIn = keyframes({
package/dist/esm/element-browser/ElementBrowser.js CHANGED
@@ -112,7 +112,8 @@ var ElementBrowser = /*#__PURE__*/function (_PureComponent) {
112
112
  emptyStateHandler = _this$props.emptyStateHandler,
113
113
  viewMoreItem = _this$props.viewMoreItem,
114
114
  onViewMore = _this$props.onViewMore,
115
- cache = _this$props.cache;
115
+ cache = _this$props.cache,
116
+ autoFocusSearch = _this$props.autoFocusSearch;
116
117
  var _this$state2 = this.state,
117
118
  categories = _this$state2.categories,
118
119
  searchTerm = _this$state2.searchTerm,
@@ -133,7 +134,8 @@ var ElementBrowser = /*#__PURE__*/function (_PureComponent) {
133
134
  emptyStateHandler: emptyStateHandler,
134
135
  viewMoreItem: viewMoreItem,
135
136
  cache: cache,
136
- onViewMore: onViewMore
137
+ onViewMore: onViewMore,
138
+ autoFocusSearch: autoFocusSearch
137
139
  });
138
140
  }
139
141
  }]);
package/dist/esm/element-browser/components/StatelessElementBrowser.js CHANGED
@@ -126,7 +126,9 @@ function StatelessElementBrowser(props) {
126
126
  onSelectCategory = props.onSelectCategory,
127
127
  searchTerm = props.searchTerm,
128
128
  showCategories = props.showCategories,
129
- cache = props.cache;
129
+ cache = props.cache,
130
+ _props$autoFocusSearc = props.autoFocusSearch,
131
+ autoFocusSearch = _props$autoFocusSearc === void 0 ? true : _props$autoFocusSearc;
130
132
  var _useContainerWidth = useContainerWidth(),
131
133
  containerWidth = _useContainerWidth.containerWidth,
132
134
  ContainerWidthMonitor = _useContainerWidth.ContainerWidthMonitor;
@@ -139,21 +141,31 @@ function StatelessElementBrowser(props) {
139
141
  var selectedCategoryIndex = (_props$categories = props.categories) === null || _props$categories === void 0 ? void 0 : _props$categories.findIndex(function (category) {
140
142
  return category.name === selectedCategory;
141
143
  });
144
+ var _useState3 = useState(autoFocusSearch),
145
+ _useState4 = _slicedToArray(_useState3, 2),
146
+ canFocusSearch = _useState4[0],
147
+ setCanFocusSearch = _useState4[1];
142
148
  if (showCategories) {
143
149
  var isEmptySearchTerm = !searchTerm || (searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.length) === 0;
144
150
  if (!isEmptySearchTerm) {
145
151
  // clear the flag if the search happens after a user has chosen the category
146
152
  categoryBeenChosen.current = false;
147
153
  }
148
- // A11Y: if categories exists, on the initial render search element should receive focus.
149
- // After user pick some category the category should stay focused.
150
- isFocusSearch = !categoryBeenChosen.current || !isEmptySearchTerm;
154
+ if (expValEquals('platform_editor_update_modal_close_button', 'isEnabled', true)) {
155
+ // A11Y: if categories exists and search can be focused, on the initial render it should receive focus.
156
+ // After user pick some category the category should stay focused.
157
+ isFocusSearch = canFocusSearch && (!categoryBeenChosen.current || !isEmptySearchTerm);
158
+ } else {
159
+ // A11Y: if categories exists, on the initial render search element should receive focus.
160
+ // After user pick some category the category should stay focused.
161
+ isFocusSearch = !categoryBeenChosen.current || !isEmptySearchTerm;
162
+ }
151
163
  }
152
164
  var itemIsDisabled = useCallback(function (index) {
153
165
  var _items$index$isDisabl, _items$index;
154
166
  return (_items$index$isDisabl = (_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.isDisabled) !== null && _items$index$isDisabl !== void 0 ? _items$index$isDisabl : false;
155
167
  }, [items]);
156
- var _useSelectAndFocusOnA = useSelectAndFocusOnArrowNavigation(items.length - 1, columnCount, fg('platform_editor_refactor_view_more') ? !!onViewMore : !!viewMoreItem, itemIsDisabled, isFocusSearch),
168
+ var _useSelectAndFocusOnA = useSelectAndFocusOnArrowNavigation(items.length - 1, columnCount, fg('platform_editor_refactor_view_more') ? !!onViewMore : !!viewMoreItem, itemIsDisabled, isFocusSearch, autoFocusSearch),
157
169
  selectedItemIndex = _useSelectAndFocusOnA.selectedItemIndex,
158
170
  focusedItemIndex = _useSelectAndFocusOnA.focusedItemIndex,
159
171
  setFocusedItemIndex = _useSelectAndFocusOnA.setFocusedItemIndex,
@@ -223,50 +235,63 @@ function StatelessElementBrowser(props) {
223
235
  onSelectCategory(category);
224
236
  categoryBeenChosen.current = true;
225
237
  }, [categoryBeenChosen, onSelectCategory]);
226
- return jsx("div", {
227
- css: wrapper,
228
- "data-testid": "element-browser",
229
- id: ELEMENT_BROWSER_ID
230
- }, jsx(ContainerWidthMonitor, null), containerWidth < DEVICE_BREAKPOINT_NUMBERS.medium ? jsx(MobileBrowser
231
- // Ignored via go/ees005
232
- // eslint-disable-next-line react/jsx-props-no-spreading
233
- , _extends({}, props, {
234
- selectedItemIndex: selectedItemIndex,
235
- focusOnEmptyStateButton: focusOnEmptyStateButton,
236
- focusedItemIndex: focusedItemIndex,
237
- setFocusedItemIndex: setFocusedItemIndex,
238
- focusedCategoryIndex: focusedCategoryIndex,
239
- setFocusedCategoryIndex: setFocusedCategoryIndex,
240
- focusOnSearch: focusOnSearch,
241
- columnCount: columnCount,
242
- setColumnCount: setColumnCount,
243
- setFocusOnSearch: setFocusOnSearch,
244
- onKeyPress: onItemsEnterTabKeyPress,
245
- onKeyDown: onKeyDown,
246
- viewMoreItem: viewMoreItem,
247
- onViewMore: onViewMore,
248
- focusOnViewMore: focusOnViewMore,
249
- cache: cache
250
- })) : jsx(DesktopBrowser
251
- // Ignored via go/ees005
252
- // eslint-disable-next-line react/jsx-props-no-spreading
253
- , _extends({}, props, {
254
- selectedItemIndex: selectedItemIndex,
255
- focusOnEmptyStateButton: focusOnEmptyStateButton,
256
- focusedItemIndex: focusedItemIndex,
257
- setFocusedItemIndex: setFocusedItemIndex,
258
- focusOnSearch: focusOnSearch,
259
- setColumnCount: setColumnCount,
260
- columnCount: columnCount,
261
- setFocusOnSearch: setFocusOnSearch,
262
- onKeyPress: onItemsEnterTabKeyPress,
263
- onKeyDown: onKeyDown,
264
- focusedCategoryIndex: focusedCategoryIndex,
265
- setFocusedCategoryIndex: setFocusedCategoryIndex,
266
- selectedCategoryIndex: selectedCategoryIndex,
267
- onSelectCategory: onSelectCategoryCB,
268
- cache: cache
269
- })));
238
+ var handleKeyPress = function handleKeyPress(e) {
239
+ if (e.key === 'Tab') {
240
+ // only Tab key can change focus from close button (if present)
241
+ setCanFocusSearch(true);
242
+ }
243
+ };
244
+ var handleClick = function handleClick() {
245
+ setCanFocusSearch(true);
246
+ };
247
+ return /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable */(
248
+ jsx("div", {
249
+ css: wrapper,
250
+ "data-testid": "element-browser",
251
+ id: ELEMENT_BROWSER_ID,
252
+ onKeyUp: canFocusSearch ? undefined : handleKeyPress,
253
+ onClick: canFocusSearch ? undefined : handleClick
254
+ }, jsx(ContainerWidthMonitor, null), containerWidth < DEVICE_BREAKPOINT_NUMBERS.medium ? jsx(MobileBrowser
255
+ // Ignored via go/ees005
256
+ // eslint-disable-next-line react/jsx-props-no-spreading
257
+ , _extends({}, props, {
258
+ selectedItemIndex: selectedItemIndex,
259
+ focusOnEmptyStateButton: focusOnEmptyStateButton,
260
+ focusedItemIndex: focusedItemIndex,
261
+ setFocusedItemIndex: setFocusedItemIndex,
262
+ focusedCategoryIndex: focusedCategoryIndex,
263
+ setFocusedCategoryIndex: setFocusedCategoryIndex,
264
+ focusOnSearch: focusOnSearch,
265
+ columnCount: columnCount,
266
+ setColumnCount: setColumnCount,
267
+ setFocusOnSearch: setFocusOnSearch,
268
+ onKeyPress: onItemsEnterTabKeyPress,
269
+ onKeyDown: onKeyDown,
270
+ viewMoreItem: viewMoreItem,
271
+ onViewMore: onViewMore,
272
+ focusOnViewMore: focusOnViewMore,
273
+ cache: cache
274
+ })) : jsx(DesktopBrowser
275
+ // Ignored via go/ees005
276
+ // eslint-disable-next-line react/jsx-props-no-spreading
277
+ , _extends({}, props, {
278
+ selectedItemIndex: selectedItemIndex,
279
+ focusOnEmptyStateButton: focusOnEmptyStateButton,
280
+ focusedItemIndex: focusedItemIndex,
281
+ setFocusedItemIndex: setFocusedItemIndex,
282
+ focusOnSearch: focusOnSearch,
283
+ setColumnCount: setColumnCount,
284
+ columnCount: columnCount,
285
+ setFocusOnSearch: setFocusOnSearch,
286
+ onKeyPress: onItemsEnterTabKeyPress,
287
+ onKeyDown: onKeyDown,
288
+ focusedCategoryIndex: focusedCategoryIndex,
289
+ setFocusedCategoryIndex: setFocusedCategoryIndex,
290
+ selectedCategoryIndex: selectedCategoryIndex,
291
+ onSelectCategory: onSelectCategoryCB,
292
+ cache: cache
293
+ })))
294
+ );
270
295
  }
271
296
  function MobileBrowser(_ref) {
272
297
  var showCategories = _ref.showCategories,
package/dist/esm/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js CHANGED
@@ -4,6 +4,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
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 { useCallback, useEffect, useReducer, useRef } from 'react';
6
6
  import { fg } from '@atlaskit/platform-feature-flags';
7
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
7
8
 
8
9
  /**
9
10
  * a custom hook that handles keyboard navigation for Arrow keys based on a
@@ -188,6 +189,14 @@ var moveReducer = function moveReducer(state, action) {
188
189
  focusedItemIndex: safeIndex
189
190
  });
190
191
  };
192
+ var initialStateWithFocusOnSearchDisabled = {
193
+ focusOnSearch: false,
194
+ focusOnViewMore: false,
195
+ focusOnEmptyStateButton: false,
196
+ selectedItemIndex: 0,
197
+ focusedItemIndex: undefined,
198
+ listSize: 0
199
+ };
191
200
  var initialState = {
192
201
  focusOnSearch: true,
193
202
  focusOnViewMore: false,
@@ -237,8 +246,8 @@ var skipBackwardOffsetToSafeItem = function skipBackwardOffsetToSafeItem(current
237
246
  // Move to search if no available index
238
247
  return currentIndex + 1;
239
248
  };
240
- function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, itemIsDisabled, isFocusSearch) {
241
- var _useReducer = useReducer(reducer, initialState, getInitialState(listSize, canFocusViewMore)),
249
+ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, itemIsDisabled, isFocusSearch, autoFocusSearch) {
250
+ var _useReducer = useReducer(reducer, expValEquals('platform_editor_update_modal_close_button', 'isEnabled', true) && autoFocusSearch ? initialState : initialStateWithFocusOnSearchDisabled, getInitialState(listSize, canFocusViewMore)),
242
251
  _useReducer2 = _slicedToArray(_useReducer, 2),
243
252
  state = _useReducer2[0],
244
253
  dispatch = _useReducer2[1];
@@ -259,19 +268,20 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, it
259
268
 
260
269
  // calls if items size changed
261
270
  var reset = useCallback(function (listSize) {
262
- var payload = _objectSpread(_objectSpread({}, initialState), {}, {
271
+ var defaultState = expValEquals('platform_editor_update_modal_close_button', 'isEnabled', true) && autoFocusSearch ? initialState : initialStateWithFocusOnSearchDisabled;
272
+ var payload = _objectSpread(_objectSpread({}, defaultState), {}, {
263
273
  listSize: listSize
264
274
  });
265
275
  // A11Y: if categories exist ,on the initial render search element should receive focus.
266
276
  // After user pick some category the category should stay focused.
267
277
  payload = Object.assign(payload, {
268
- focusOnSearch: isFocusSearch !== null && isFocusSearch !== void 0 ? isFocusSearch : initialState.focusOnSearch
278
+ focusOnSearch: isFocusSearch !== null && isFocusSearch !== void 0 ? isFocusSearch : defaultState.focusOnSearch
269
279
  });
270
280
  dispatch({
271
281
  type: ACTIONS.UPDATE_STATE,
272
282
  payload: payload
273
283
  });
274
- }, [isFocusSearch]);
284
+ }, [isFocusSearch, autoFocusSearch]);
275
285
  var removeFocusFromSearchAndSetOnItem = useCallback(function (index) {
276
286
  var payload = {
277
287
  focusedItemIndex: index,
package/dist/esm/keymaps/index.js CHANGED
@@ -110,6 +110,10 @@ export var dragToMoveLeft = makeKeyMapWithCommon('Move node to the left column i
110
110
  export var dragToMoveRight = makeKeyMapWithCommon('Move node to the right column in the document', 'Ctrl-Shift-Alt-ArrowRight');
111
111
  export var showElementDragHandle = makeKeyMapWithCommon('Show drag handle for editor element', 'Ctrl-Shift-h');
112
112
  export var toggleCodeBlock = makeKeyMapWithCommon('Toggle Code Block', '```');
113
+ export var insertEmoji = makeKeyMapWithCommon('Insert Emoji', ':');
114
+ export var insertMention = makeKeyMapWithCommon('Insert Mention', '@');
115
+ export var insertTaskList = makeKeyMapWithCommon('Insert Action Item', '[]');
116
+ export var insertElements = makeKeyMapWithCommon('Insert Elements', '/');
113
117
  export var continueInRovoChat = makeKeyMapWithCommon('Continue in Rovo chat', 'Alt-Enter');
114
118
  var arrowKeysMap = {
115
119
  // for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
package/dist/esm/monitoring/error.js CHANGED
@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
7
7
  import { isFedRamp } from './environment';
8
8
  var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
9
9
  var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
10
- var packageVersion = "110.4.11";
10
+ var packageVersion = "110.4.13";
11
11
  var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
12
12
  // Remove URL as it has UGC
13
13
  // Ignored via go/ees007
package/dist/esm/ui/DropList/index.js CHANGED
@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
21
21
  import { fg } from '@atlaskit/platform-feature-flags';
22
22
  import Layer from '../Layer';
23
23
  var packageName = "@atlaskit/editor-common";
24
- var packageVersion = "110.4.11";
24
+ var packageVersion = "110.4.13";
25
25
  var halfFocusRing = 1;
26
26
  var dropOffset = '0, 8';
27
27
  var fadeIn = keyframes({
package/dist/types/element-browser/ElementBrowser.d.ts CHANGED
@@ -4,6 +4,10 @@ import type { QuickInsertItem } from '../provider-factory';
4
4
  import type { EmptyStateHandler } from '../types';
5
5
  import type { Category, Modes } from './types';
6
6
  export interface Props {
7
+ /**
8
+ * If search field should be focused on the initial load
9
+ */
10
+ autoFocusSearch?: boolean;
7
11
  cache?: CellMeasurerCache;
8
12
  categories?: Category[];
9
13
  defaultCategory?: string;
package/dist/types/element-browser/components/StatelessElementBrowser.d.ts CHANGED
@@ -9,6 +9,10 @@ import type { QuickInsertItem } from '../../provider-factory';
9
9
  import type { EmptyStateHandler } from '../../types';
10
10
  import type { Category, Modes } from '../types';
11
11
  export type StatelessElementBrowserProps = {
12
+ /**
13
+ * If search field should be focused on the initial load
14
+ */
15
+ autoFocusSearch?: boolean;
12
16
  cache?: CellMeasurerCache;
13
17
  categories?: Category[];
14
18
  emptyStateHandler?: EmptyStateHandler;
@@ -32,6 +36,10 @@ export type StatelessElementBrowserProps = {
32
36
  viewMoreItem?: QuickInsertItem;
33
37
  } & WithAnalyticsEventsProps;
34
38
  declare const MemoizedElementBrowser: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<Omit<{
39
+ /**
40
+ * If search field should be focused on the initial load
41
+ */
42
+ autoFocusSearch?: boolean;
35
43
  cache?: CellMeasurerCache;
36
44
  categories?: Category[];
37
45
  emptyStateHandler?: EmptyStateHandler;
package/dist/types/element-browser/hooks/use-select-and-focus-on-arrow-navigation.d.ts CHANGED
@@ -72,6 +72,6 @@ export type useSelectAndFocusReturnType = {
72
72
  setFocusedItemIndex: (index?: number) => void;
73
73
  setFocusOnSearch: () => void;
74
74
  };
75
- declare function useSelectAndFocusOnArrowNavigation(listSize: number, step: number, canFocusViewMore: boolean, itemIsDisabled: (index: number) => boolean, isFocusSearch?: boolean): useSelectAndFocusReturnType;
75
+ declare function useSelectAndFocusOnArrowNavigation(listSize: number, step: number, canFocusViewMore: boolean, itemIsDisabled: (index: number) => boolean, isFocusSearch?: boolean, autoFocusSearch?: boolean): useSelectAndFocusReturnType;
76
76
  export declare const ensureSafeIndex: (index: number, listSize: number) => number;
77
77
  export default useSelectAndFocusOnArrowNavigation;
package/dist/types/keymaps/index.d.ts CHANGED
@@ -104,6 +104,10 @@ export declare const dragToMoveLeft: Keymap;
104
104
  export declare const dragToMoveRight: Keymap;
105
105
  export declare const showElementDragHandle: Keymap;
106
106
  export declare const toggleCodeBlock: Keymap;
107
+ export declare const insertEmoji: Keymap;
108
+ export declare const insertMention: Keymap;
109
+ export declare const insertTaskList: Keymap;
110
+ export declare const insertElements: Keymap;
107
111
  export declare const continueInRovoChat: Keymap;
108
112
  export declare function formatShortcut(keymap: Keymap): string | undefined;
109
113
  export declare function tooltip(keymap?: Keymap, description?: string): string | undefined;
package/dist/types/types/floating-toolbar.d.ts CHANGED
@@ -49,6 +49,7 @@ export interface RenderOptionsPropsT<T extends Object> {
49
49
  hide: () => void;
50
50
  }
51
51
  export interface DropdownOptionT<T extends Object> {
52
+ confirmDialog?: ConfirmDialogOptions | (() => ConfirmDialogOptions);
52
53
  description?: string;
53
54
  disabled?: boolean;
54
55
  domItemOptions?: {
package/dist/types-ts4.5/element-browser/ElementBrowser.d.ts CHANGED
@@ -4,6 +4,10 @@ import type { QuickInsertItem } from '../provider-factory';
4
4
  import type { EmptyStateHandler } from '../types';
5
5
  import type { Category, Modes } from './types';
6
6
  export interface Props {
7
+ /**
8
+ * If search field should be focused on the initial load
9
+ */
10
+ autoFocusSearch?: boolean;
7
11
  cache?: CellMeasurerCache;
8
12
  categories?: Category[];
9
13
  defaultCategory?: string;
package/dist/types-ts4.5/element-browser/components/StatelessElementBrowser.d.ts CHANGED
@@ -9,6 +9,10 @@ import type { QuickInsertItem } from '../../provider-factory';
9
9
  import type { EmptyStateHandler } from '../../types';
10
10
  import type { Category, Modes } from '../types';
11
11
  export type StatelessElementBrowserProps = {
12
+ /**
13
+ * If search field should be focused on the initial load
14
+ */
15
+ autoFocusSearch?: boolean;
12
16
  cache?: CellMeasurerCache;
13
17
  categories?: Category[];
14
18
  emptyStateHandler?: EmptyStateHandler;
@@ -32,6 +36,10 @@ export type StatelessElementBrowserProps = {
32
36
  viewMoreItem?: QuickInsertItem;
33
37
  } & WithAnalyticsEventsProps;
34
38
  declare const MemoizedElementBrowser: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<Omit<{
39
+ /**
40
+ * If search field should be focused on the initial load
41
+ */
42
+ autoFocusSearch?: boolean;
35
43
  cache?: CellMeasurerCache;
36
44
  categories?: Category[];
37
45
  emptyStateHandler?: EmptyStateHandler;
package/dist/types-ts4.5/element-browser/hooks/use-select-and-focus-on-arrow-navigation.d.ts CHANGED
@@ -72,6 +72,6 @@ export type useSelectAndFocusReturnType = {
72
72
  setFocusedItemIndex: (index?: number) => void;
73
73
  setFocusOnSearch: () => void;
74
74
  };
75
- declare function useSelectAndFocusOnArrowNavigation(listSize: number, step: number, canFocusViewMore: boolean, itemIsDisabled: (index: number) => boolean, isFocusSearch?: boolean): useSelectAndFocusReturnType;
75
+ declare function useSelectAndFocusOnArrowNavigation(listSize: number, step: number, canFocusViewMore: boolean, itemIsDisabled: (index: number) => boolean, isFocusSearch?: boolean, autoFocusSearch?: boolean): useSelectAndFocusReturnType;
76
76
  export declare const ensureSafeIndex: (index: number, listSize: number) => number;
77
77
  export default useSelectAndFocusOnArrowNavigation;
package/dist/types-ts4.5/keymaps/index.d.ts CHANGED
@@ -104,6 +104,10 @@ export declare const dragToMoveLeft: Keymap;
104
104
  export declare const dragToMoveRight: Keymap;
105
105
  export declare const showElementDragHandle: Keymap;
106
106
  export declare const toggleCodeBlock: Keymap;
107
+ export declare const insertEmoji: Keymap;
108
+ export declare const insertMention: Keymap;
109
+ export declare const insertTaskList: Keymap;
110
+ export declare const insertElements: Keymap;
107
111
  export declare const continueInRovoChat: Keymap;
108
112
  export declare function formatShortcut(keymap: Keymap): string | undefined;
109
113
  export declare function tooltip(keymap?: Keymap, description?: string): string | undefined;
package/dist/types-ts4.5/types/floating-toolbar.d.ts CHANGED
@@ -49,6 +49,7 @@ export interface RenderOptionsPropsT<T extends Object> {
49
49
  hide: () => void;
50
50
  }
51
51
  export interface DropdownOptionT<T extends Object> {
52
+ confirmDialog?: ConfirmDialogOptions | (() => ConfirmDialogOptions);
52
53
  description?: string;
53
54
  disabled?: boolean;
54
55
  domItemOptions?: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-common",
3
- "version": "110.4.12",
3
+ "version": "110.4.14",
4
4
  "description": "A package that contains common classes and components for editor and renderer",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
48
48
  "@atlaskit/editor-prosemirror": "7.0.0",
49
49
  "@atlaskit/editor-shared-styles": "^3.6.0",
50
50
  "@atlaskit/editor-tables": "^2.9.0",
51
- "@atlaskit/editor-toolbar": "^0.13.0",
51
+ "@atlaskit/editor-toolbar": "^0.14.0",
52
52
  "@atlaskit/editor-toolbar-model": "^0.2.0",
53
53
  "@atlaskit/emoji": "^69.5.0",
54
54
  "@atlaskit/icon": "^28.4.0",
@@ -71,7 +71,7 @@
71
71
  "@atlaskit/platform-feature-flags-react": "^0.3.0",
72
72
  "@atlaskit/popper": "^7.1.0",
73
73
  "@atlaskit/primitives": "^14.15.0",
74
- "@atlaskit/profilecard": "^24.17.0",
74
+ "@atlaskit/profilecard": "^24.18.0",
75
75
  "@atlaskit/react-ufo": "^4.11.0",
76
76
  "@atlaskit/section-message": "^8.7.0",
77
77
  "@atlaskit/smart-card": "^43.0.0",