@atlaskit/editor-common 78.37.0 → 78.37.2

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 (44) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/cjs/element-browser/components/CategoryList.js +89 -8
  3. package/dist/cjs/element-browser/components/ElementList/ElementList.js +30 -4
  4. package/dist/cjs/element-browser/components/StatelessElementBrowser.js +77 -12
  5. package/dist/cjs/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +38 -4
  6. package/dist/cjs/messages/insert-block.js +9 -4
  7. package/dist/cjs/monitoring/error.js +1 -1
  8. package/dist/cjs/styles/index.js +7 -0
  9. package/dist/cjs/styles/shared/background-color.js +15 -0
  10. package/dist/cjs/ui/DropList/index.js +1 -1
  11. package/dist/cjs/ui/FloatingToolbar/Separator.js +2 -1
  12. package/dist/es2019/element-browser/components/CategoryList.js +96 -12
  13. package/dist/es2019/element-browser/components/ElementList/ElementList.js +29 -3
  14. package/dist/es2019/element-browser/components/StatelessElementBrowser.js +78 -13
  15. package/dist/es2019/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +39 -5
  16. package/dist/es2019/messages/insert-block.js +9 -4
  17. package/dist/es2019/monitoring/error.js +1 -1
  18. package/dist/es2019/styles/index.js +1 -0
  19. package/dist/es2019/styles/shared/background-color.js +9 -0
  20. package/dist/es2019/ui/DropList/index.js +1 -1
  21. package/dist/es2019/ui/FloatingToolbar/Separator.js +2 -1
  22. package/dist/esm/element-browser/components/CategoryList.js +89 -9
  23. package/dist/esm/element-browser/components/ElementList/ElementList.js +30 -4
  24. package/dist/esm/element-browser/components/StatelessElementBrowser.js +78 -13
  25. package/dist/esm/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +38 -4
  26. package/dist/esm/messages/insert-block.js +9 -4
  27. package/dist/esm/monitoring/error.js +1 -1
  28. package/dist/esm/styles/index.js +1 -0
  29. package/dist/esm/styles/shared/background-color.js +9 -0
  30. package/dist/esm/ui/DropList/index.js +1 -1
  31. package/dist/esm/ui/FloatingToolbar/Separator.js +2 -1
  32. package/dist/types/element-browser/components/CategoryList.d.ts +5 -0
  33. package/dist/types/element-browser/components/ElementList/ElementList.d.ts +2 -0
  34. package/dist/types/element-browser/hooks/use-select-and-focus-on-arrow-navigation.d.ts +4 -1
  35. package/dist/types/messages/insert-block.d.ts +5 -0
  36. package/dist/types/styles/index.d.ts +1 -0
  37. package/dist/types/styles/shared/background-color.d.ts +1 -0
  38. package/dist/types-ts4.5/element-browser/components/CategoryList.d.ts +5 -0
  39. package/dist/types-ts4.5/element-browser/components/ElementList/ElementList.d.ts +2 -0
  40. package/dist/types-ts4.5/element-browser/hooks/use-select-and-focus-on-arrow-navigation.d.ts +4 -1
  41. package/dist/types-ts4.5/messages/insert-block.d.ts +5 -0
  42. package/dist/types-ts4.5/styles/index.d.ts +1 -0
  43. package/dist/types-ts4.5/styles/shared/background-color.d.ts +1 -0
  44. package/package.json +8 -5
@@ -1,26 +1,64 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  /** @jsx jsx */
3
-
4
3
  import React, { Fragment, memo, useCallback } from 'react';
5
4
  import { css, jsx } from '@emotion/react';
6
5
  import { withAnalyticsContext } from '@atlaskit/analytics-next';
7
6
  import Button from '@atlaskit/button/custom-theme-button';
7
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
8
8
  import { B400, B50, N800 } from '@atlaskit/theme/colors';
9
9
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
10
10
  import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE } from '../constants';
11
11
  import useFocus from '../hooks/use-focus';
12
+ const arrowsKeys = new Set(['ArrowUp', 'ArrowDown']);
12
13
  function CategoryList({
13
14
  categories = [],
14
15
  ...props
15
16
  }) {
16
- const [focusedCategoryIndex, setFocusedCategoryIndex] = React.useState(null);
17
- return jsx(Fragment, null, categories.map((category, index) => jsx(CategoryListItem, _extends({
18
- key: category.title,
19
- index: index,
20
- category: category,
21
- focus: focusedCategoryIndex === index,
22
- setFocusedCategoryIndex: setFocusedCategoryIndex
23
- }, props))));
17
+ const [focusedCategoryIndexState, setFocusedCategoryIndexState] = React.useState(null);
18
+ const {
19
+ focusedCategoryIndex: focusedCategoryIndexProp,
20
+ setFocusedCategoryIndex: setFocusedCategoryIndexProp,
21
+ onSelectCategory
22
+ } = props;
23
+ const focusedCategoryIndex = getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? focusedCategoryIndexProp : focusedCategoryIndexState;
24
+ const setFocusedCategoryIndex = getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? setFocusedCategoryIndexProp : setFocusedCategoryIndexState;
25
+ return jsx(Fragment, null, categories.map((category, index) => {
26
+ const categoriesLength = categories === null || categories === void 0 ? void 0 : categories.length;
27
+ let selectNextCategory;
28
+ let selectPreviousCategory;
29
+ if (getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') && categoriesLength > 1) {
30
+ selectNextCategory = () => {
31
+ if (index !== categoriesLength - 1) {
32
+ setFocusedCategoryIndex(index + 1);
33
+ onSelectCategory(categories[index + 1]);
34
+ } else {
35
+ setFocusedCategoryIndex(0);
36
+ onSelectCategory(categories[0]);
37
+ }
38
+ return;
39
+ };
40
+ selectPreviousCategory = () => {
41
+ if (index !== 0) {
42
+ setFocusedCategoryIndex(index - 1);
43
+ onSelectCategory(categories[index - 1]);
44
+ } else {
45
+ setFocusedCategoryIndex(categoriesLength - 1);
46
+ onSelectCategory(categories[categoriesLength - 1]);
47
+ }
48
+ return;
49
+ };
50
+ }
51
+ return jsx(CategoryListItem, _extends({
52
+ key: category.title,
53
+ index: index,
54
+ category: category,
55
+ focus: focusedCategoryIndex === index
56
+ }, props, {
57
+ setFocusedCategoryIndex: setFocusedCategoryIndex,
58
+ selectPreviousCategory: selectPreviousCategory,
59
+ selectNextCategory: selectNextCategory
60
+ }));
61
+ }));
24
62
  }
25
63
  function CategoryListItem({
26
64
  category,
@@ -29,11 +67,17 @@ function CategoryListItem({
29
67
  index,
30
68
  focus,
31
69
  setFocusedCategoryIndex,
32
- createAnalyticsEvent
70
+ createAnalyticsEvent,
71
+ setFocusedItemIndex,
72
+ setFocusOnSearch,
73
+ selectPreviousCategory,
74
+ selectNextCategory
33
75
  }) {
34
76
  const ref = useFocus(focus);
35
77
  const onClick = useCallback(() => {
36
- onSelectCategory(category);
78
+ if (!getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
79
+ onSelectCategory(category);
80
+ }
37
81
  /**
38
82
  * When user double clicks on same category, focus on first item.
39
83
  */
@@ -42,6 +86,9 @@ function CategoryListItem({
42
86
  } else {
43
87
  setFocusedCategoryIndex(index);
44
88
  }
89
+ if (getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
90
+ onSelectCategory(category);
91
+ }
45
92
  fireAnalyticsEvent(createAnalyticsEvent)({
46
93
  payload: {
47
94
  action: ACTION.CLICKED,
@@ -76,6 +123,41 @@ function CategoryListItem({
76
123
  ...rest
77
124
  };
78
125
  }, [category.name, selectedCategory]);
126
+ const onTabPress = useCallback(e => {
127
+ const isShiftPressed = e.shiftKey;
128
+ if (!isShiftPressed) {
129
+ // set focus from focused category to first item in it
130
+ if (setFocusedItemIndex) {
131
+ setFocusedItemIndex(0);
132
+ e.preventDefault();
133
+ }
134
+ } else {
135
+ // jump from first category back to search
136
+ if (setFocusOnSearch) {
137
+ setFocusOnSearch();
138
+ e.preventDefault();
139
+ }
140
+ }
141
+ return;
142
+ }, [setFocusedItemIndex, setFocusOnSearch]);
143
+ const onArrowPress = useCallback(e => {
144
+ if (e.key === 'ArrowUp' && selectPreviousCategory) {
145
+ return selectPreviousCategory();
146
+ }
147
+ if (e.key === 'ArrowDown' && selectNextCategory) {
148
+ return selectNextCategory();
149
+ }
150
+ }, [selectPreviousCategory, selectNextCategory]);
151
+ const onKeyDown = useCallback(e => {
152
+ const isTabPressed = e.key === 'Tab';
153
+ const isArrowPressed = arrowsKeys.has(e.key);
154
+ if (isTabPressed) {
155
+ return onTabPress(e);
156
+ }
157
+ if (isArrowPressed) {
158
+ return onArrowPress(e);
159
+ }
160
+ }, [onTabPress, onArrowPress]);
79
161
  return jsx("div", {
80
162
  css: buttonWrapper,
81
163
  role: "presentation"
@@ -84,13 +166,15 @@ function CategoryListItem({
84
166
  isSelected: selectedCategory === category.name,
85
167
  onClick: onClick,
86
168
  onFocus: onFocus,
169
+ onKeyDown: getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? onKeyDown : undefined,
87
170
  theme: getTheme,
88
171
  role: "tab",
89
172
  "aria-selected": selectedCategory === category.name ? 'true' : 'false',
90
173
  "aria-controls": `browse-category-${category.name}-tab`,
91
174
  id: `browse-category--${category.name}-button`,
92
175
  ref: ref,
93
- testId: "element-browser-category-item"
176
+ testId: "element-browser-category-item",
177
+ tabIndex: -1
94
178
  }, category.title));
95
179
  }
96
180
  const buttonWrapper = css({
@@ -8,6 +8,7 @@ import { withAnalyticsContext } from '@atlaskit/analytics-next';
8
8
  import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
9
9
  import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
10
10
  import { ButtonItem } from '@atlaskit/menu';
11
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
11
12
  import { B100, N200 } from '@atlaskit/theme/colors';
12
13
  import { borderRadius } from '@atlaskit/theme/constants';
13
14
  import Tooltip from '@atlaskit/tooltip';
@@ -46,7 +47,10 @@ function ElementList({
46
47
  createAnalyticsEvent,
47
48
  emptyStateHandler,
48
49
  selectedCategory,
50
+ selectedCategoryIndex,
49
51
  searchTerm,
52
+ setFocusedCategoryIndex,
53
+ setFocusedItemIndex,
50
54
  ...props
51
55
  }) {
52
56
  const {
@@ -89,15 +93,37 @@ function ElementList({
89
93
  style: style,
90
94
  key: key,
91
95
  className: "element-item-wrapper",
92
- css: elementItemWrapper
96
+ css: elementItemWrapper,
97
+ onKeyDown: getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? e => {
98
+ if (e.key === 'Tab') {
99
+ if (e.shiftKey && index === 0) {
100
+ if (setFocusedCategoryIndex) {
101
+ if (!!selectedCategoryIndex) {
102
+ setFocusedCategoryIndex(selectedCategoryIndex);
103
+ } else {
104
+ setFocusedCategoryIndex(0);
105
+ }
106
+ e.preventDefault();
107
+ }
108
+ }
109
+ // before focus jumps from elements list we need to rerender react-virtualized collection.
110
+ // Otherwise on the next render 'scrollToCell' will have same cached value
111
+ // and collection will not be scrolled to top.
112
+ // So Tab press on category will not work anymore due to invisible 1-t element.
113
+ else if (index === items.length - 2) {
114
+ setFocusedItemIndex(items.length - 1);
115
+ }
116
+ }
117
+ } : undefined
93
118
  }, jsx(MemoizedElementItem, _extends({
94
119
  inlineMode: !fullMode,
95
120
  index: index,
96
121
  item: items[index],
97
122
  selected: selectedItemIndex === index,
98
- focus: focusedItemIndex === index
123
+ focus: focusedItemIndex === index,
124
+ setFocusedItemIndex: setFocusedItemIndex
99
125
  }, props)));
100
- }, [items, fullMode, selectedItemIndex, focusedItemIndex, props]);
126
+ }, [items, fullMode, selectedItemIndex, focusedItemIndex, selectedCategoryIndex, setFocusedCategoryIndex, setFocusedItemIndex, props]);
101
127
  return jsx(Fragment, null, jsx(ContainerWidthMonitor, null), jsx("div", {
102
128
  css: elementItemsWrapper,
103
129
  "data-testid": "element-items",
@@ -1,9 +1,10 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  /** @jsx jsx */
3
- import React, { memo, useCallback, useEffect, useState } from 'react';
3
+ import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
4
4
  import { css, jsx } from '@emotion/react';
5
5
  import { FormattedMessage } from 'react-intl-next';
6
6
  import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
7
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
7
8
  import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
8
9
  import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE, INLINE_SIDEBAR_HEIGHT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
9
10
  import useContainerWidth from '../hooks/use-container-width';
@@ -90,22 +91,47 @@ function StatelessElementBrowser(props) {
90
91
  items,
91
92
  onSelectItem,
92
93
  onInsertItem,
93
- viewMoreItem
94
+ viewMoreItem,
95
+ selectedCategory,
96
+ onSelectCategory,
97
+ searchTerm,
98
+ showCategories
94
99
  } = props;
95
100
  const {
96
101
  containerWidth,
97
102
  ContainerWidthMonitor
98
103
  } = useContainerWidth();
104
+ const categoryBeenChosen = useRef(false);
99
105
  const [columnCount, setColumnCount] = useState(1);
106
+ let selectedCategoryIndex;
107
+ let isFocusSearch;
108
+ if (getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
109
+ var _props$categories;
110
+ selectedCategoryIndex = (_props$categories = props.categories) === null || _props$categories === void 0 ? void 0 : _props$categories.findIndex(category => {
111
+ return category.name === selectedCategory;
112
+ });
113
+ if (showCategories) {
114
+ const isEmptySearchTerm = !searchTerm || (searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.length) === 0;
115
+ if (!isEmptySearchTerm) {
116
+ // clear the flag if the search happens after a user has chosen the category
117
+ categoryBeenChosen.current = false;
118
+ }
119
+ // A11Y: if categories exists, on the initial render search element should receive focus.
120
+ // After user pick some category the category should stay focused.
121
+ isFocusSearch = !categoryBeenChosen.current || !isEmptySearchTerm;
122
+ }
123
+ }
100
124
  const {
101
125
  selectedItemIndex,
102
126
  focusedItemIndex,
103
127
  setFocusedItemIndex,
128
+ setFocusedCategoryIndex,
129
+ focusedCategoryIndex,
104
130
  focusOnSearch,
105
131
  focusOnViewMore,
106
132
  onKeyDown,
107
133
  setFocusOnSearch
108
- } = useSelectAndFocusOnArrowNavigation(items.length - 1, columnCount, !!viewMoreItem);
134
+ } = useSelectAndFocusOnArrowNavigation(items.length - 1, columnCount, !!viewMoreItem, isFocusSearch);
109
135
  useEffect(() => {
110
136
  fireAnalyticsEvent(props.createAnalyticsEvent)({
111
137
  payload: {
@@ -135,15 +161,29 @@ function StatelessElementBrowser(props) {
135
161
  * The actual enter key press is handled on individual items level.
136
162
  */
137
163
  const selectedItem = selectedItemIndex !== undefined ? items[selectedItemIndex] : null;
138
- const onItemsEnterKeyPress = useCallback(e => {
139
- if (e.key !== 'Enter') {
140
- return;
164
+ const onItemsEnterTabKeyPress = useCallback(e => {
165
+ if (getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
166
+ if (e.key !== 'Enter' && (e.key !== 'Tab' || !showCategories)) {
167
+ return;
168
+ }
169
+ } else {
170
+ if (e.key !== 'Enter') {
171
+ return;
172
+ }
173
+ }
174
+ if (getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
175
+ if (showCategories && e.key === 'Tab' && selectedCategoryIndex !== undefined) {
176
+ // A11Y: Set focus on first category if tab pressed on search
177
+ setFocusedCategoryIndex(selectedCategoryIndex);
178
+ e.preventDefault();
179
+ return;
180
+ }
141
181
  }
142
182
  if (onInsertItem && selectedItem != null) {
143
183
  onInsertItem(selectedItem);
144
184
  }
145
185
  e.preventDefault();
146
- }, [onInsertItem, selectedItem]);
186
+ }, [onInsertItem, selectedItem, setFocusedCategoryIndex, showCategories, selectedCategoryIndex]);
147
187
 
148
188
  /**
149
189
  * On arrow key selection and clicks the selectedItemIndex will change.
@@ -154,6 +194,10 @@ function StatelessElementBrowser(props) {
154
194
  onSelectItem(selectedItem);
155
195
  }
156
196
  }, [onSelectItem, selectedItem]);
197
+ const onSelectCategoryCB = useCallback(category => {
198
+ onSelectCategory(category);
199
+ categoryBeenChosen.current = true;
200
+ }, [categoryBeenChosen, onSelectCategory]);
157
201
  return jsx("div", {
158
202
  css: wrapper,
159
203
  "data-testid": "element-browser"
@@ -161,10 +205,12 @@ function StatelessElementBrowser(props) {
161
205
  selectedItemIndex: selectedItemIndex,
162
206
  focusedItemIndex: focusedItemIndex,
163
207
  setFocusedItemIndex: setFocusedItemIndex,
208
+ focusedCategoryIndex: focusedCategoryIndex,
209
+ setFocusedCategoryIndex: setFocusedCategoryIndex,
164
210
  focusOnSearch: focusOnSearch,
165
211
  setColumnCount: setColumnCount,
166
212
  setFocusOnSearch: setFocusOnSearch,
167
- onKeyPress: onItemsEnterKeyPress,
213
+ onKeyPress: onItemsEnterTabKeyPress,
168
214
  onKeyDown: onKeyDown,
169
215
  viewMoreItem: viewMoreItem,
170
216
  focusOnViewMore: focusOnViewMore
@@ -175,8 +221,12 @@ function StatelessElementBrowser(props) {
175
221
  focusOnSearch: focusOnSearch,
176
222
  setColumnCount: setColumnCount,
177
223
  setFocusOnSearch: setFocusOnSearch,
178
- onKeyPress: onItemsEnterKeyPress,
179
- onKeyDown: onKeyDown
224
+ onKeyPress: onItemsEnterTabKeyPress,
225
+ onKeyDown: onKeyDown,
226
+ focusedCategoryIndex: focusedCategoryIndex,
227
+ setFocusedCategoryIndex: setFocusedCategoryIndex,
228
+ selectedCategoryIndex: selectedCategoryIndex,
229
+ onSelectCategory: getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? onSelectCategoryCB : onSelectCategory
180
230
  })));
181
231
  }
182
232
  function MobileBrowser({
@@ -192,6 +242,8 @@ function MobileBrowser({
192
242
  selectedItemIndex,
193
243
  focusedItemIndex,
194
244
  setFocusedItemIndex,
245
+ focusedCategoryIndex,
246
+ setFocusedCategoryIndex,
195
247
  focusOnSearch,
196
248
  focusOnViewMore,
197
249
  setColumnCount,
@@ -224,7 +276,11 @@ function MobileBrowser({
224
276
  }, jsx(CategoryList, {
225
277
  categories: categories,
226
278
  onSelectCategory: onSelectCategory,
227
- selectedCategory: selectedCategory
279
+ selectedCategory: selectedCategory,
280
+ focusedCategoryIndex: focusedCategoryIndex,
281
+ setFocusedCategoryIndex: setFocusedCategoryIndex,
282
+ setFocusedItemIndex: setFocusedItemIndex,
283
+ setFocusOnSearch: setFocusOnSearch
228
284
  }))), jsx("div", {
229
285
  css: mobileMainContent
230
286
  }, jsx(ElementList, {
@@ -257,6 +313,9 @@ function DesktopBrowser({
257
313
  selectedItemIndex,
258
314
  focusedItemIndex,
259
315
  setFocusedItemIndex,
316
+ focusedCategoryIndex,
317
+ setFocusedCategoryIndex,
318
+ selectedCategoryIndex,
260
319
  focusOnSearch,
261
320
  setColumnCount,
262
321
  setFocusOnSearch,
@@ -287,7 +346,11 @@ function DesktopBrowser({
287
346
  categories: categories,
288
347
  onSelectCategory: onSelectCategory,
289
348
  selectedCategory: selectedCategory,
290
- createAnalyticsEvent: createAnalyticsEvent
349
+ createAnalyticsEvent: createAnalyticsEvent,
350
+ focusedCategoryIndex: focusedCategoryIndex,
351
+ setFocusedCategoryIndex: setFocusedCategoryIndex,
352
+ setFocusedItemIndex: setFocusedItemIndex,
353
+ setFocusOnSearch: setFocusOnSearch
291
354
  }))), jsx("div", {
292
355
  css: mainContent,
293
356
  onKeyDown: onKeyDown,
@@ -316,7 +379,9 @@ function DesktopBrowser({
316
379
  createAnalyticsEvent: createAnalyticsEvent,
317
380
  emptyStateHandler: emptyStateHandler,
318
381
  selectedCategory: selectedCategory,
319
- searchTerm: searchTerm
382
+ selectedCategoryIndex: selectedCategoryIndex,
383
+ searchTerm: searchTerm,
384
+ setFocusedCategoryIndex: showCategories ? setFocusedCategoryIndex : undefined
320
385
  })));
321
386
  }
322
387
  const MemoizedElementBrowser = /*#__PURE__*/memo(withAnalyticsContext({
@@ -1,4 +1,5 @@
1
1
  import { useCallback, useEffect, useReducer, useRef } from 'react';
2
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
2
3
 
3
4
  /**
4
5
  * a custom hook that handles keyboard navigation for Arrow keys based on a
@@ -57,6 +58,7 @@ const reducer = (state, action) => {
57
58
  return {
58
59
  ...state,
59
60
  focusedItemIndex: undefined,
61
+ focusedCategoryIndex: undefined,
60
62
  focusOnSearch: true,
61
63
  focusOnViewMore: false
62
64
  };
@@ -172,7 +174,7 @@ const getInitialState = (listSize, canFocusViewMore) => initialState => ({
172
174
  listSize,
173
175
  canFocusViewMore
174
176
  });
175
- function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore) {
177
+ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, isFocusSearch) {
176
178
  const [state, dispatch] = useReducer(reducer, initialState, getInitialState(listSize, canFocusViewMore));
177
179
  useEffect(() => {
178
180
  dispatch({
@@ -186,25 +188,55 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore) {
186
188
  selectedItemIndex,
187
189
  focusedItemIndex,
188
190
  focusOnSearch,
189
- focusOnViewMore
191
+ focusOnViewMore,
192
+ focusedCategoryIndex
190
193
  } = state;
194
+
195
+ // calls if items size changed
191
196
  const reset = useCallback(listSize => {
192
197
  let payload = {
193
198
  ...initialState,
194
199
  listSize
195
200
  };
201
+ if (getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
202
+ // A11Y: if categories exist ,on the initial render search element should receive focus.
203
+ // After user pick some category the category should stay focused.
204
+ payload = Object.assign(payload, {
205
+ focusOnSearch: isFocusSearch !== null && isFocusSearch !== void 0 ? isFocusSearch : initialState.focusOnSearch
206
+ });
207
+ }
196
208
  dispatch({
197
209
  type: ACTIONS.UPDATE_STATE,
198
210
  payload
199
211
  });
200
- }, []);
212
+ }, [isFocusSearch]);
201
213
  const removeFocusFromSearchAndSetOnItem = useCallback(index => {
202
- const payload = {
214
+ let payload = {
203
215
  focusedItemIndex: index,
204
216
  selectedItemIndex: index,
205
217
  focusOnSearch: false,
206
218
  focusOnViewMore: false
207
219
  };
220
+ if (getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
221
+ payload = Object.assign(payload, {
222
+ focusedCategoryIndex: undefined
223
+ });
224
+ }
225
+ dispatch({
226
+ type: ACTIONS.UPDATE_STATE,
227
+ payload
228
+ });
229
+ }, [dispatch]);
230
+ const setFocusedCategoryIndex = useCallback(index => {
231
+ if (!getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
232
+ return;
233
+ }
234
+ const payload = {
235
+ focusOnSearch: false,
236
+ focusOnViewMore: false,
237
+ focusedCategoryIndex: index,
238
+ focusedItemIndex: undefined
239
+ };
208
240
  dispatch({
209
241
  type: ACTIONS.UPDATE_STATE,
210
242
  payload
@@ -269,7 +301,9 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore) {
269
301
  focusOnViewMore,
270
302
  setFocusOnSearch,
271
303
  focusedItemIndex,
272
- setFocusedItemIndex: removeFocusFromSearchAndSetOnItem
304
+ setFocusedItemIndex: removeFocusFromSearchAndSetOnItem,
305
+ focusedCategoryIndex,
306
+ setFocusedCategoryIndex: setFocusedCategoryIndex
273
307
  };
274
308
  }
275
309
  export const ensureSafeIndex = (index, listSize) => {
@@ -197,12 +197,17 @@ export const toolbarInsertBlockMessages = defineMessages({
197
197
  },
198
198
  addLoomVideo: {
199
199
  id: 'fabric.editor.addLoomVideo',
200
- defaultMessage: 'Add Loom Video',
201
- description: 'Record a new Loom video'
200
+ defaultMessage: 'Record a Loom video',
201
+ description: 'Record a Loom video'
202
+ },
203
+ addLoomVideoComment: {
204
+ id: 'fabric.editor.addLoomVideoComment',
205
+ defaultMessage: 'Record a Loom video comment',
206
+ description: 'Record a Loom video comment'
202
207
  },
203
208
  recordVideoDescription: {
204
209
  id: 'fabric.editor.recordVideo.description',
205
- defaultMessage: 'Record your screen and camera',
206
- description: 'Record your screen and camera'
210
+ defaultMessage: 'Record and share your screen and thoughts',
211
+ description: 'Record and share your screen and thoughts'
207
212
  }
208
213
  });
@@ -1,6 +1,6 @@
1
1
  const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
2
2
  const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
3
- const packageVersion = "78.37.0";
3
+ const packageVersion = "78.37.2";
4
4
  const sanitiseSentryEvents = (data, _hint) => {
5
5
  // Remove URL as it has UGC
6
6
  // TODO: Sanitise the URL instead of just removing it
@@ -1,4 +1,5 @@
1
1
  export { textColorStyles } from './shared/text-color';
2
+ export { backgroundColorStyles } from './shared/background-color';
2
3
  export { tableSharedStyle, tableMarginTop, tableMarginBottom, tableMarginSides, tableCellMinWidth, tableNewColumnMinWidth, tableCellBorderWidth, calcTableWidth, TableSharedCssClassName, tableResizeHandleWidth, tableCellPadding, tableMarginTopWithControl } from './shared/table';
3
4
  export { AnnotationSharedClassNames, BlockAnnotationSharedClassNames, AnnotationSharedCSSByState, annotationSharedStyles } from './shared/annotation';
4
5
  export { columnLayoutSharedStyle } from './shared/column-layout';
@@ -0,0 +1,9 @@
1
+ import { css } from '@emotion/react';
2
+ export const backgroundColorStyles = css({
3
+ '.fabric-background-color-mark': {
4
+ backgroundColor: 'var(--custom-palette-color, inherit)'
5
+ },
6
+ 'a .fabric-background-color-mark': {
7
+ backgroundColor: 'unset'
8
+ }
9
+ });
@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
7
7
  import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
8
8
  import Layer from '../Layer';
9
9
  const packageName = "@atlaskit/editor-common";
10
- const packageVersion = "78.37.0";
10
+ const packageVersion = "78.37.2";
11
11
  const halfFocusRing = 1;
12
12
  const dropOffset = '0, 8';
13
13
  class DropList extends Component {
@@ -6,7 +6,8 @@ const separator = css({
6
6
  width: '1px',
7
7
  height: '20px',
8
8
  margin: `0 ${"var(--ds-space-050, 4px)"}`,
9
- alignSelf: 'center'
9
+ alignSelf: 'center',
10
+ pointerEvents: 'none'
10
11
  });
11
12
  export default (() => jsx("div", {
12
13
  css: separator,