@atlaskit/editor-common 84.3.0 → 84.3.1
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 +9 -0
- package/dist/cjs/element-browser/components/CategoryList.js +5 -18
- package/dist/cjs/element-browser/components/ElementList/ElementList.js +5 -5
- package/dist/cjs/element-browser/components/StatelessElementBrowser.js +20 -31
- package/dist/cjs/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +8 -17
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/es2019/element-browser/components/CategoryList.js +5 -14
- package/dist/es2019/element-browser/components/ElementList/ElementList.js +6 -6
- package/dist/es2019/element-browser/components/StatelessElementBrowser.js +20 -31
- package/dist/es2019/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +8 -17
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/esm/element-browser/components/CategoryList.js +5 -18
- package/dist/esm/element-browser/components/ElementList/ElementList.js +6 -6
- package/dist/esm/element-browser/components/StatelessElementBrowser.js +20 -31
- package/dist/esm/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +8 -17
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/ui/DropList/index.js +1 -1
- package/package.json +1 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/editor-common
|
|
2
2
|
|
|
3
|
+
## 84.3.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#118071](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/118071)
|
|
8
|
+
[`8001b542d9e11`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8001b542d9e11) -
|
|
9
|
+
[ED-24018] removes the feature flag
|
|
10
|
+
'platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1'
|
|
11
|
+
|
|
3
12
|
## 84.3.0
|
|
4
13
|
|
|
5
14
|
### Minor Changes
|
|
@@ -8,13 +8,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
12
11
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
13
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
14
13
|
var _react2 = require("@emotion/react");
|
|
15
14
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
16
15
|
var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
|
|
17
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
18
16
|
var _colors = require("@atlaskit/theme/colors");
|
|
19
17
|
var _analytics = require("../../analytics");
|
|
20
18
|
var _constants = require("../constants");
|
|
@@ -32,20 +30,14 @@ function CategoryList(_ref) {
|
|
|
32
30
|
var _ref$categories = _ref.categories,
|
|
33
31
|
categories = _ref$categories === void 0 ? [] : _ref$categories,
|
|
34
32
|
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
35
|
-
var
|
|
36
|
-
|
|
37
|
-
focusedCategoryIndexState = _React$useState2[0],
|
|
38
|
-
setFocusedCategoryIndexState = _React$useState2[1];
|
|
39
|
-
var focusedCategoryIndexProp = props.focusedCategoryIndex,
|
|
40
|
-
setFocusedCategoryIndexProp = props.setFocusedCategoryIndex,
|
|
33
|
+
var focusedCategoryIndex = props.focusedCategoryIndex,
|
|
34
|
+
setFocusedCategoryIndex = props.setFocusedCategoryIndex,
|
|
41
35
|
onSelectCategory = props.onSelectCategory;
|
|
42
|
-
var focusedCategoryIndex = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? focusedCategoryIndexProp : focusedCategoryIndexState;
|
|
43
|
-
var setFocusedCategoryIndex = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? setFocusedCategoryIndexProp : setFocusedCategoryIndexState;
|
|
44
36
|
return (0, _react2.jsx)(_react.Fragment, null, categories.map(function (category, index) {
|
|
45
37
|
var categoriesLength = categories === null || categories === void 0 ? void 0 : categories.length;
|
|
46
38
|
var selectNextCategory;
|
|
47
39
|
var selectPreviousCategory;
|
|
48
|
-
if (
|
|
40
|
+
if (categoriesLength > 1) {
|
|
49
41
|
selectNextCategory = function selectNextCategory() {
|
|
50
42
|
if (index !== categoriesLength - 1) {
|
|
51
43
|
setFocusedCategoryIndex(index + 1);
|
|
@@ -93,9 +85,6 @@ function CategoryListItem(_ref2) {
|
|
|
93
85
|
selectNextCategory = _ref2.selectNextCategory;
|
|
94
86
|
var ref = (0, _useFocus.default)(focus);
|
|
95
87
|
var onClick = (0, _react.useCallback)(function () {
|
|
96
|
-
if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
|
|
97
|
-
onSelectCategory(category);
|
|
98
|
-
}
|
|
99
88
|
/**
|
|
100
89
|
* When user double clicks on same category, focus on first item.
|
|
101
90
|
*/
|
|
@@ -104,9 +93,7 @@ function CategoryListItem(_ref2) {
|
|
|
104
93
|
} else {
|
|
105
94
|
setFocusedCategoryIndex(index);
|
|
106
95
|
}
|
|
107
|
-
|
|
108
|
-
onSelectCategory(category);
|
|
109
|
-
}
|
|
96
|
+
onSelectCategory(category);
|
|
110
97
|
(0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent)({
|
|
111
98
|
payload: {
|
|
112
99
|
action: _analytics.ACTION.CLICKED,
|
|
@@ -180,7 +167,7 @@ function CategoryListItem(_ref2) {
|
|
|
180
167
|
isSelected: selectedCategory === category.name,
|
|
181
168
|
onClick: onClick,
|
|
182
169
|
onFocus: onFocus,
|
|
183
|
-
onKeyDown:
|
|
170
|
+
onKeyDown: onKeyDown,
|
|
184
171
|
theme: getTheme,
|
|
185
172
|
role: "tab",
|
|
186
173
|
"aria-selected": selectedCategory === category.name ? 'true' : 'false',
|
|
@@ -137,7 +137,7 @@ function ElementList(_ref) {
|
|
|
137
137
|
,
|
|
138
138
|
className: "element-item-wrapper",
|
|
139
139
|
css: elementItemWrapper,
|
|
140
|
-
onKeyDown:
|
|
140
|
+
onKeyDown: function onKeyDown(e) {
|
|
141
141
|
if (e.key === 'Tab') {
|
|
142
142
|
if (e.shiftKey && index === 0) {
|
|
143
143
|
if (setFocusedCategoryIndex) {
|
|
@@ -157,7 +157,7 @@ function ElementList(_ref) {
|
|
|
157
157
|
setFocusedItemIndex(items.length - 1);
|
|
158
158
|
}
|
|
159
159
|
}
|
|
160
|
-
}
|
|
160
|
+
}
|
|
161
161
|
}, (0, _react2.jsx)(MemoizedElementItem, (0, _extends2.default)({
|
|
162
162
|
inlineMode: !fullMode,
|
|
163
163
|
index: index,
|
|
@@ -193,7 +193,7 @@ function ElementList(_ref) {
|
|
|
193
193
|
,
|
|
194
194
|
className: "element-item-wrapper",
|
|
195
195
|
css: elementItemWrapper,
|
|
196
|
-
onKeyDown:
|
|
196
|
+
onKeyDown: function onKeyDown(e) {
|
|
197
197
|
if (e.key === 'Tab') {
|
|
198
198
|
if (e.shiftKey && index === 0) {
|
|
199
199
|
if (setFocusedCategoryIndex) {
|
|
@@ -213,7 +213,7 @@ function ElementList(_ref) {
|
|
|
213
213
|
setFocusedItemIndex(items.length - 1);
|
|
214
214
|
}
|
|
215
215
|
}
|
|
216
|
-
}
|
|
216
|
+
}
|
|
217
217
|
}, (0, _react2.jsx)(MemoizedElementItem, (0, _extends2.default)({
|
|
218
218
|
inlineMode: !fullMode,
|
|
219
219
|
index: index,
|
|
@@ -243,7 +243,7 @@ function ElementList(_ref) {
|
|
|
243
243
|
disableWidth: true
|
|
244
244
|
}, function (_ref5) {
|
|
245
245
|
var height = _ref5.height;
|
|
246
|
-
return (0, _platformFeatureFlags.
|
|
246
|
+
return (0, _platformFeatureFlags.fg)('platform.editor.a11y-element-browser') ? (0, _react2.jsx)(_reactVirtualized.Grid, (0, _extends2.default)({
|
|
247
247
|
cellRenderer: gridCellRenderer,
|
|
248
248
|
height: height,
|
|
249
249
|
width: containerWidth - _constants2.ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
|
|
@@ -12,7 +12,6 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
12
12
|
var _react2 = require("@emotion/react");
|
|
13
13
|
var _reactIntlNext = require("react-intl-next");
|
|
14
14
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
15
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
16
15
|
var _analytics = require("../../analytics");
|
|
17
16
|
var _constants = require("../constants");
|
|
18
17
|
var _useContainerWidth2 = _interopRequireDefault(require("../hooks/use-container-width"));
|
|
@@ -119,6 +118,7 @@ var categoryListWrapper = (0, _react2.css)(mobileCategoryListWrapper, {
|
|
|
119
118
|
flexDirection: 'column'
|
|
120
119
|
});
|
|
121
120
|
function StatelessElementBrowser(props) {
|
|
121
|
+
var _props$categories;
|
|
122
122
|
var items = props.items,
|
|
123
123
|
onSelectItem = props.onSelectItem,
|
|
124
124
|
onInsertItem = props.onInsertItem,
|
|
@@ -137,21 +137,18 @@ function StatelessElementBrowser(props) {
|
|
|
137
137
|
setColumnCount = _useState2[1];
|
|
138
138
|
var selectedCategoryIndex;
|
|
139
139
|
var isFocusSearch;
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
if (
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
// clear the flag if the search happens after a user has chosen the category
|
|
149
|
-
categoryBeenChosen.current = false;
|
|
150
|
-
}
|
|
151
|
-
// A11Y: if categories exists, on the initial render search element should receive focus.
|
|
152
|
-
// After user pick some category the category should stay focused.
|
|
153
|
-
isFocusSearch = !categoryBeenChosen.current || !isEmptySearchTerm;
|
|
140
|
+
selectedCategoryIndex = (_props$categories = props.categories) === null || _props$categories === void 0 ? void 0 : _props$categories.findIndex(function (category) {
|
|
141
|
+
return category.name === selectedCategory;
|
|
142
|
+
});
|
|
143
|
+
if (showCategories) {
|
|
144
|
+
var isEmptySearchTerm = !searchTerm || (searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.length) === 0;
|
|
145
|
+
if (!isEmptySearchTerm) {
|
|
146
|
+
// clear the flag if the search happens after a user has chosen the category
|
|
147
|
+
categoryBeenChosen.current = false;
|
|
154
148
|
}
|
|
149
|
+
// A11Y: if categories exists, on the initial render search element should receive focus.
|
|
150
|
+
// After user pick some category the category should stay focused.
|
|
151
|
+
isFocusSearch = !categoryBeenChosen.current || !isEmptySearchTerm;
|
|
155
152
|
}
|
|
156
153
|
var _useSelectAndFocusOnA = (0, _useSelectAndFocusOnArrowNavigation.default)(items.length - 1, columnCount, !!viewMoreItem, isFocusSearch),
|
|
157
154
|
selectedItemIndex = _useSelectAndFocusOnA.selectedItemIndex,
|
|
@@ -193,22 +190,14 @@ function StatelessElementBrowser(props) {
|
|
|
193
190
|
*/
|
|
194
191
|
var selectedItem = selectedItemIndex !== undefined ? items[selectedItemIndex] : null;
|
|
195
192
|
var onItemsEnterTabKeyPress = (0, _react.useCallback)(function (e) {
|
|
196
|
-
if (
|
|
197
|
-
|
|
198
|
-
return;
|
|
199
|
-
}
|
|
200
|
-
} else {
|
|
201
|
-
if (e.key !== 'Enter') {
|
|
202
|
-
return;
|
|
203
|
-
}
|
|
193
|
+
if (e.key !== 'Enter' && (e.key !== 'Tab' || !showCategories)) {
|
|
194
|
+
return;
|
|
204
195
|
}
|
|
205
|
-
if (
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
return;
|
|
211
|
-
}
|
|
196
|
+
if (showCategories && e.key === 'Tab' && selectedCategoryIndex !== undefined) {
|
|
197
|
+
// A11Y: Set focus on first category if tab pressed on search
|
|
198
|
+
setFocusedCategoryIndex(selectedCategoryIndex);
|
|
199
|
+
e.preventDefault();
|
|
200
|
+
return;
|
|
212
201
|
}
|
|
213
202
|
if (onInsertItem && selectedItem != null) {
|
|
214
203
|
onInsertItem(selectedItem);
|
|
@@ -259,7 +248,7 @@ function StatelessElementBrowser(props) {
|
|
|
259
248
|
focusedCategoryIndex: focusedCategoryIndex,
|
|
260
249
|
setFocusedCategoryIndex: setFocusedCategoryIndex,
|
|
261
250
|
selectedCategoryIndex: selectedCategoryIndex,
|
|
262
|
-
onSelectCategory:
|
|
251
|
+
onSelectCategory: onSelectCategoryCB
|
|
263
252
|
})));
|
|
264
253
|
}
|
|
265
254
|
function MobileBrowser(_ref) {
|
|
@@ -8,7 +8,6 @@ exports.ensureSafeIndex = exports.default = exports.ACTIONS = void 0;
|
|
|
8
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
10
|
var _react = require("react");
|
|
11
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
11
|
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
12
|
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
13
|
/**
|
|
@@ -70,7 +69,6 @@ var reducer = function reducer(state, action) {
|
|
|
70
69
|
case ACTIONS.MOVE:
|
|
71
70
|
return moveReducer(state, action);
|
|
72
71
|
}
|
|
73
|
-
return state;
|
|
74
72
|
};
|
|
75
73
|
var moveReducer = function moveReducer(state, action) {
|
|
76
74
|
var listSize = state.listSize,
|
|
@@ -197,13 +195,11 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, is
|
|
|
197
195
|
var payload = _objectSpread(_objectSpread({}, initialState), {}, {
|
|
198
196
|
listSize: listSize
|
|
199
197
|
});
|
|
200
|
-
if
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
});
|
|
206
|
-
}
|
|
198
|
+
// A11Y: if categories exist ,on the initial render search element should receive focus.
|
|
199
|
+
// After user pick some category the category should stay focused.
|
|
200
|
+
payload = Object.assign(payload, {
|
|
201
|
+
focusOnSearch: isFocusSearch !== null && isFocusSearch !== void 0 ? isFocusSearch : initialState.focusOnSearch
|
|
202
|
+
});
|
|
207
203
|
dispatch({
|
|
208
204
|
type: ACTIONS.UPDATE_STATE,
|
|
209
205
|
payload: payload
|
|
@@ -216,20 +212,15 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, is
|
|
|
216
212
|
focusOnSearch: false,
|
|
217
213
|
focusOnViewMore: false
|
|
218
214
|
};
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
});
|
|
223
|
-
}
|
|
215
|
+
payload = Object.assign(payload, {
|
|
216
|
+
focusedCategoryIndex: undefined
|
|
217
|
+
});
|
|
224
218
|
dispatch({
|
|
225
219
|
type: ACTIONS.UPDATE_STATE,
|
|
226
220
|
payload: payload
|
|
227
221
|
});
|
|
228
222
|
}, [dispatch]);
|
|
229
223
|
var setFocusedCategoryIndex = (0, _react.useCallback)(function (index) {
|
|
230
|
-
if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
|
|
231
|
-
return;
|
|
232
|
-
}
|
|
233
224
|
var payload = {
|
|
234
225
|
focusOnSearch: false,
|
|
235
226
|
focusOnViewMore: false,
|
|
@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
17
17
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
18
18
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
19
19
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
20
|
-
var packageVersion = "84.3.
|
|
20
|
+
var packageVersion = "84.3.1";
|
|
21
21
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
22
22
|
// Remove URL as it has UGC
|
|
23
23
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -20,7 +20,7 @@ var _Layer = _interopRequireDefault(require("../Layer"));
|
|
|
20
20
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
21
21
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
22
22
|
var packageName = "@atlaskit/editor-common";
|
|
23
|
-
var packageVersion = "84.3.
|
|
23
|
+
var packageVersion = "84.3.1";
|
|
24
24
|
var halfFocusRing = 1;
|
|
25
25
|
var dropOffset = '0, 8';
|
|
26
26
|
var DropList = /*#__PURE__*/function (_Component) {
|
|
@@ -6,7 +6,6 @@ import React, { Fragment, memo, useCallback } from 'react';
|
|
|
6
6
|
import { css, jsx } from '@emotion/react';
|
|
7
7
|
import { withAnalyticsContext } from '@atlaskit/analytics-next';
|
|
8
8
|
import Button from '@atlaskit/button/custom-theme-button';
|
|
9
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
10
9
|
import { B400, B50, N800 } from '@atlaskit/theme/colors';
|
|
11
10
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
|
|
12
11
|
import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE } from '../constants';
|
|
@@ -16,19 +15,16 @@ function CategoryList({
|
|
|
16
15
|
categories = [],
|
|
17
16
|
...props
|
|
18
17
|
}) {
|
|
19
|
-
const [focusedCategoryIndexState, setFocusedCategoryIndexState] = React.useState(null);
|
|
20
18
|
const {
|
|
21
|
-
focusedCategoryIndex
|
|
22
|
-
setFocusedCategoryIndex
|
|
19
|
+
focusedCategoryIndex,
|
|
20
|
+
setFocusedCategoryIndex,
|
|
23
21
|
onSelectCategory
|
|
24
22
|
} = props;
|
|
25
|
-
const focusedCategoryIndex = getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? focusedCategoryIndexProp : focusedCategoryIndexState;
|
|
26
|
-
const setFocusedCategoryIndex = getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? setFocusedCategoryIndexProp : setFocusedCategoryIndexState;
|
|
27
23
|
return jsx(Fragment, null, categories.map((category, index) => {
|
|
28
24
|
const categoriesLength = categories === null || categories === void 0 ? void 0 : categories.length;
|
|
29
25
|
let selectNextCategory;
|
|
30
26
|
let selectPreviousCategory;
|
|
31
|
-
if (
|
|
27
|
+
if (categoriesLength > 1) {
|
|
32
28
|
selectNextCategory = () => {
|
|
33
29
|
if (index !== categoriesLength - 1) {
|
|
34
30
|
setFocusedCategoryIndex(index + 1);
|
|
@@ -77,9 +73,6 @@ function CategoryListItem({
|
|
|
77
73
|
}) {
|
|
78
74
|
const ref = useFocus(focus);
|
|
79
75
|
const onClick = useCallback(() => {
|
|
80
|
-
if (!getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
|
|
81
|
-
onSelectCategory(category);
|
|
82
|
-
}
|
|
83
76
|
/**
|
|
84
77
|
* When user double clicks on same category, focus on first item.
|
|
85
78
|
*/
|
|
@@ -88,9 +81,7 @@ function CategoryListItem({
|
|
|
88
81
|
} else {
|
|
89
82
|
setFocusedCategoryIndex(index);
|
|
90
83
|
}
|
|
91
|
-
|
|
92
|
-
onSelectCategory(category);
|
|
93
|
-
}
|
|
84
|
+
onSelectCategory(category);
|
|
94
85
|
fireAnalyticsEvent(createAnalyticsEvent)({
|
|
95
86
|
payload: {
|
|
96
87
|
action: ACTION.CLICKED,
|
|
@@ -168,7 +159,7 @@ function CategoryListItem({
|
|
|
168
159
|
isSelected: selectedCategory === category.name,
|
|
169
160
|
onClick: onClick,
|
|
170
161
|
onFocus: onFocus,
|
|
171
|
-
onKeyDown:
|
|
162
|
+
onKeyDown: onKeyDown,
|
|
172
163
|
theme: getTheme,
|
|
173
164
|
role: "tab",
|
|
174
165
|
"aria-selected": selectedCategory === category.name ? 'true' : 'false',
|
|
@@ -12,7 +12,7 @@ import { withAnalyticsContext } from '@atlaskit/analytics-next';
|
|
|
12
12
|
import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
|
|
13
13
|
import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
|
|
14
14
|
import { ButtonItem } from '@atlaskit/menu';
|
|
15
|
-
import {
|
|
15
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
16
16
|
import { B100, N200 } from '@atlaskit/theme/colors';
|
|
17
17
|
import { borderRadius } from '@atlaskit/theme/constants';
|
|
18
18
|
import Tooltip from '@atlaskit/tooltip';
|
|
@@ -122,7 +122,7 @@ function ElementList({
|
|
|
122
122
|
,
|
|
123
123
|
className: "element-item-wrapper",
|
|
124
124
|
css: elementItemWrapper,
|
|
125
|
-
onKeyDown:
|
|
125
|
+
onKeyDown: e => {
|
|
126
126
|
if (e.key === 'Tab') {
|
|
127
127
|
if (e.shiftKey && index === 0) {
|
|
128
128
|
if (setFocusedCategoryIndex) {
|
|
@@ -142,7 +142,7 @@ function ElementList({
|
|
|
142
142
|
setFocusedItemIndex(items.length - 1);
|
|
143
143
|
}
|
|
144
144
|
}
|
|
145
|
-
}
|
|
145
|
+
}
|
|
146
146
|
}, jsx(MemoizedElementItem, _extends({
|
|
147
147
|
inlineMode: !fullMode,
|
|
148
148
|
index: index,
|
|
@@ -177,7 +177,7 @@ function ElementList({
|
|
|
177
177
|
,
|
|
178
178
|
className: "element-item-wrapper",
|
|
179
179
|
css: elementItemWrapper,
|
|
180
|
-
onKeyDown:
|
|
180
|
+
onKeyDown: e => {
|
|
181
181
|
if (e.key === 'Tab') {
|
|
182
182
|
if (e.shiftKey && index === 0) {
|
|
183
183
|
if (setFocusedCategoryIndex) {
|
|
@@ -197,7 +197,7 @@ function ElementList({
|
|
|
197
197
|
setFocusedItemIndex(items.length - 1);
|
|
198
198
|
}
|
|
199
199
|
}
|
|
200
|
-
}
|
|
200
|
+
}
|
|
201
201
|
}, jsx(MemoizedElementItem, _extends({
|
|
202
202
|
inlineMode: !fullMode,
|
|
203
203
|
index: index,
|
|
@@ -226,7 +226,7 @@ function ElementList({
|
|
|
226
226
|
disableWidth: true
|
|
227
227
|
}, ({
|
|
228
228
|
height
|
|
229
|
-
}) =>
|
|
229
|
+
}) => fg('platform.editor.a11y-element-browser') ? jsx(Grid, _extends({
|
|
230
230
|
cellRenderer: gridCellRenderer,
|
|
231
231
|
height: height,
|
|
232
232
|
width: containerWidth - ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
|
|
@@ -6,7 +6,6 @@ import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
|
|
|
6
6
|
import { css, jsx } from '@emotion/react';
|
|
7
7
|
import { FormattedMessage } from 'react-intl-next';
|
|
8
8
|
import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
9
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
10
9
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
|
|
11
10
|
import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE, INLINE_SIDEBAR_HEIGHT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
|
|
12
11
|
import useContainerWidth from '../hooks/use-container-width';
|
|
@@ -107,6 +106,7 @@ const categoryListWrapper = css(mobileCategoryListWrapper, {
|
|
|
107
106
|
flexDirection: 'column'
|
|
108
107
|
});
|
|
109
108
|
function StatelessElementBrowser(props) {
|
|
109
|
+
var _props$categories;
|
|
110
110
|
const {
|
|
111
111
|
items,
|
|
112
112
|
onSelectItem,
|
|
@@ -125,21 +125,18 @@ function StatelessElementBrowser(props) {
|
|
|
125
125
|
const [columnCount, setColumnCount] = useState(1);
|
|
126
126
|
let selectedCategoryIndex;
|
|
127
127
|
let isFocusSearch;
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
if (
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
// clear the flag if the search happens after a user has chosen the category
|
|
137
|
-
categoryBeenChosen.current = false;
|
|
138
|
-
}
|
|
139
|
-
// A11Y: if categories exists, on the initial render search element should receive focus.
|
|
140
|
-
// After user pick some category the category should stay focused.
|
|
141
|
-
isFocusSearch = !categoryBeenChosen.current || !isEmptySearchTerm;
|
|
128
|
+
selectedCategoryIndex = (_props$categories = props.categories) === null || _props$categories === void 0 ? void 0 : _props$categories.findIndex(category => {
|
|
129
|
+
return category.name === selectedCategory;
|
|
130
|
+
});
|
|
131
|
+
if (showCategories) {
|
|
132
|
+
const isEmptySearchTerm = !searchTerm || (searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.length) === 0;
|
|
133
|
+
if (!isEmptySearchTerm) {
|
|
134
|
+
// clear the flag if the search happens after a user has chosen the category
|
|
135
|
+
categoryBeenChosen.current = false;
|
|
142
136
|
}
|
|
137
|
+
// A11Y: if categories exists, on the initial render search element should receive focus.
|
|
138
|
+
// After user pick some category the category should stay focused.
|
|
139
|
+
isFocusSearch = !categoryBeenChosen.current || !isEmptySearchTerm;
|
|
143
140
|
}
|
|
144
141
|
const {
|
|
145
142
|
selectedItemIndex,
|
|
@@ -182,22 +179,14 @@ function StatelessElementBrowser(props) {
|
|
|
182
179
|
*/
|
|
183
180
|
const selectedItem = selectedItemIndex !== undefined ? items[selectedItemIndex] : null;
|
|
184
181
|
const onItemsEnterTabKeyPress = useCallback(e => {
|
|
185
|
-
if (
|
|
186
|
-
|
|
187
|
-
return;
|
|
188
|
-
}
|
|
189
|
-
} else {
|
|
190
|
-
if (e.key !== 'Enter') {
|
|
191
|
-
return;
|
|
192
|
-
}
|
|
182
|
+
if (e.key !== 'Enter' && (e.key !== 'Tab' || !showCategories)) {
|
|
183
|
+
return;
|
|
193
184
|
}
|
|
194
|
-
if (
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
return;
|
|
200
|
-
}
|
|
185
|
+
if (showCategories && e.key === 'Tab' && selectedCategoryIndex !== undefined) {
|
|
186
|
+
// A11Y: Set focus on first category if tab pressed on search
|
|
187
|
+
setFocusedCategoryIndex(selectedCategoryIndex);
|
|
188
|
+
e.preventDefault();
|
|
189
|
+
return;
|
|
201
190
|
}
|
|
202
191
|
if (onInsertItem && selectedItem != null) {
|
|
203
192
|
onInsertItem(selectedItem);
|
|
@@ -248,7 +237,7 @@ function StatelessElementBrowser(props) {
|
|
|
248
237
|
focusedCategoryIndex: focusedCategoryIndex,
|
|
249
238
|
setFocusedCategoryIndex: setFocusedCategoryIndex,
|
|
250
239
|
selectedCategoryIndex: selectedCategoryIndex,
|
|
251
|
-
onSelectCategory:
|
|
240
|
+
onSelectCategory: onSelectCategoryCB
|
|
252
241
|
})));
|
|
253
242
|
}
|
|
254
243
|
function MobileBrowser({
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { useCallback, useEffect, useReducer, useRef } from 'react';
|
|
2
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
3
2
|
|
|
4
3
|
/**
|
|
5
4
|
* a custom hook that handles keyboard navigation for Arrow keys based on a
|
|
@@ -65,7 +64,6 @@ const reducer = (state, action) => {
|
|
|
65
64
|
case ACTIONS.MOVE:
|
|
66
65
|
return moveReducer(state, action);
|
|
67
66
|
}
|
|
68
|
-
return state;
|
|
69
67
|
};
|
|
70
68
|
const moveReducer = (state, action) => {
|
|
71
69
|
const {
|
|
@@ -198,13 +196,11 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, is
|
|
|
198
196
|
...initialState,
|
|
199
197
|
listSize
|
|
200
198
|
};
|
|
201
|
-
if
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
});
|
|
207
|
-
}
|
|
199
|
+
// A11Y: if categories exist ,on the initial render search element should receive focus.
|
|
200
|
+
// After user pick some category the category should stay focused.
|
|
201
|
+
payload = Object.assign(payload, {
|
|
202
|
+
focusOnSearch: isFocusSearch !== null && isFocusSearch !== void 0 ? isFocusSearch : initialState.focusOnSearch
|
|
203
|
+
});
|
|
208
204
|
dispatch({
|
|
209
205
|
type: ACTIONS.UPDATE_STATE,
|
|
210
206
|
payload
|
|
@@ -217,20 +213,15 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, is
|
|
|
217
213
|
focusOnSearch: false,
|
|
218
214
|
focusOnViewMore: false
|
|
219
215
|
};
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
});
|
|
224
|
-
}
|
|
216
|
+
payload = Object.assign(payload, {
|
|
217
|
+
focusedCategoryIndex: undefined
|
|
218
|
+
});
|
|
225
219
|
dispatch({
|
|
226
220
|
type: ACTIONS.UPDATE_STATE,
|
|
227
221
|
payload
|
|
228
222
|
});
|
|
229
223
|
}, [dispatch]);
|
|
230
224
|
const setFocusedCategoryIndex = useCallback(index => {
|
|
231
|
-
if (!getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
|
|
232
|
-
return;
|
|
233
|
-
}
|
|
234
225
|
const payload = {
|
|
235
226
|
focusOnSearch: false,
|
|
236
227
|
focusOnViewMore: false,
|
|
@@ -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 = "84.3.
|
|
4
|
+
const packageVersion = "84.3.1";
|
|
5
5
|
const sanitiseSentryEvents = (data, _hint) => {
|
|
6
6
|
// Remove URL as it has UGC
|
|
7
7
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -9,7 +9,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
|
|
|
9
9
|
import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
|
|
10
10
|
import Layer from '../Layer';
|
|
11
11
|
const packageName = "@atlaskit/editor-common";
|
|
12
|
-
const packageVersion = "84.3.
|
|
12
|
+
const packageVersion = "84.3.1";
|
|
13
13
|
const halfFocusRing = 1;
|
|
14
14
|
const dropOffset = '0, 8';
|
|
15
15
|
class DropList extends Component {
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
5
4
|
var _excluded = ["categories"],
|
|
6
5
|
_excluded2 = ["buttonStyles"];
|
|
@@ -13,7 +12,6 @@ import React, { Fragment, memo, useCallback } from 'react';
|
|
|
13
12
|
import { css, jsx } from '@emotion/react';
|
|
14
13
|
import { withAnalyticsContext } from '@atlaskit/analytics-next';
|
|
15
14
|
import Button from '@atlaskit/button/custom-theme-button';
|
|
16
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
17
15
|
import { B400, B50, N800 } from '@atlaskit/theme/colors';
|
|
18
16
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
|
|
19
17
|
import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE } from '../constants';
|
|
@@ -23,20 +21,14 @@ function CategoryList(_ref) {
|
|
|
23
21
|
var _ref$categories = _ref.categories,
|
|
24
22
|
categories = _ref$categories === void 0 ? [] : _ref$categories,
|
|
25
23
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
26
|
-
var
|
|
27
|
-
|
|
28
|
-
focusedCategoryIndexState = _React$useState2[0],
|
|
29
|
-
setFocusedCategoryIndexState = _React$useState2[1];
|
|
30
|
-
var focusedCategoryIndexProp = props.focusedCategoryIndex,
|
|
31
|
-
setFocusedCategoryIndexProp = props.setFocusedCategoryIndex,
|
|
24
|
+
var focusedCategoryIndex = props.focusedCategoryIndex,
|
|
25
|
+
setFocusedCategoryIndex = props.setFocusedCategoryIndex,
|
|
32
26
|
onSelectCategory = props.onSelectCategory;
|
|
33
|
-
var focusedCategoryIndex = getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? focusedCategoryIndexProp : focusedCategoryIndexState;
|
|
34
|
-
var setFocusedCategoryIndex = getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1') ? setFocusedCategoryIndexProp : setFocusedCategoryIndexState;
|
|
35
27
|
return jsx(Fragment, null, categories.map(function (category, index) {
|
|
36
28
|
var categoriesLength = categories === null || categories === void 0 ? void 0 : categories.length;
|
|
37
29
|
var selectNextCategory;
|
|
38
30
|
var selectPreviousCategory;
|
|
39
|
-
if (
|
|
31
|
+
if (categoriesLength > 1) {
|
|
40
32
|
selectNextCategory = function selectNextCategory() {
|
|
41
33
|
if (index !== categoriesLength - 1) {
|
|
42
34
|
setFocusedCategoryIndex(index + 1);
|
|
@@ -84,9 +76,6 @@ function CategoryListItem(_ref2) {
|
|
|
84
76
|
selectNextCategory = _ref2.selectNextCategory;
|
|
85
77
|
var ref = useFocus(focus);
|
|
86
78
|
var onClick = useCallback(function () {
|
|
87
|
-
if (!getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
|
|
88
|
-
onSelectCategory(category);
|
|
89
|
-
}
|
|
90
79
|
/**
|
|
91
80
|
* When user double clicks on same category, focus on first item.
|
|
92
81
|
*/
|
|
@@ -95,9 +84,7 @@ function CategoryListItem(_ref2) {
|
|
|
95
84
|
} else {
|
|
96
85
|
setFocusedCategoryIndex(index);
|
|
97
86
|
}
|
|
98
|
-
|
|
99
|
-
onSelectCategory(category);
|
|
100
|
-
}
|
|
87
|
+
onSelectCategory(category);
|
|
101
88
|
fireAnalyticsEvent(createAnalyticsEvent)({
|
|
102
89
|
payload: {
|
|
103
90
|
action: ACTION.CLICKED,
|
|
@@ -171,7 +158,7 @@ function CategoryListItem(_ref2) {
|
|
|
171
158
|
isSelected: selectedCategory === category.name,
|
|
172
159
|
onClick: onClick,
|
|
173
160
|
onFocus: onFocus,
|
|
174
|
-
onKeyDown:
|
|
161
|
+
onKeyDown: onKeyDown,
|
|
175
162
|
theme: getTheme,
|
|
176
163
|
role: "tab",
|
|
177
164
|
"aria-selected": selectedCategory === category.name ? 'true' : 'false',
|
|
@@ -15,7 +15,7 @@ import { withAnalyticsContext } from '@atlaskit/analytics-next';
|
|
|
15
15
|
import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
|
|
16
16
|
import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
|
|
17
17
|
import { ButtonItem } from '@atlaskit/menu';
|
|
18
|
-
import {
|
|
18
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
19
19
|
import { B100, N200 } from '@atlaskit/theme/colors';
|
|
20
20
|
import { borderRadius } from '@atlaskit/theme/constants';
|
|
21
21
|
import Tooltip from '@atlaskit/tooltip';
|
|
@@ -127,7 +127,7 @@ function ElementList(_ref) {
|
|
|
127
127
|
,
|
|
128
128
|
className: "element-item-wrapper",
|
|
129
129
|
css: elementItemWrapper,
|
|
130
|
-
onKeyDown:
|
|
130
|
+
onKeyDown: function onKeyDown(e) {
|
|
131
131
|
if (e.key === 'Tab') {
|
|
132
132
|
if (e.shiftKey && index === 0) {
|
|
133
133
|
if (setFocusedCategoryIndex) {
|
|
@@ -147,7 +147,7 @@ function ElementList(_ref) {
|
|
|
147
147
|
setFocusedItemIndex(items.length - 1);
|
|
148
148
|
}
|
|
149
149
|
}
|
|
150
|
-
}
|
|
150
|
+
}
|
|
151
151
|
}, jsx(MemoizedElementItem, _extends({
|
|
152
152
|
inlineMode: !fullMode,
|
|
153
153
|
index: index,
|
|
@@ -183,7 +183,7 @@ function ElementList(_ref) {
|
|
|
183
183
|
,
|
|
184
184
|
className: "element-item-wrapper",
|
|
185
185
|
css: elementItemWrapper,
|
|
186
|
-
onKeyDown:
|
|
186
|
+
onKeyDown: function onKeyDown(e) {
|
|
187
187
|
if (e.key === 'Tab') {
|
|
188
188
|
if (e.shiftKey && index === 0) {
|
|
189
189
|
if (setFocusedCategoryIndex) {
|
|
@@ -203,7 +203,7 @@ function ElementList(_ref) {
|
|
|
203
203
|
setFocusedItemIndex(items.length - 1);
|
|
204
204
|
}
|
|
205
205
|
}
|
|
206
|
-
}
|
|
206
|
+
}
|
|
207
207
|
}, jsx(MemoizedElementItem, _extends({
|
|
208
208
|
inlineMode: !fullMode,
|
|
209
209
|
index: index,
|
|
@@ -233,7 +233,7 @@ function ElementList(_ref) {
|
|
|
233
233
|
disableWidth: true
|
|
234
234
|
}, function (_ref5) {
|
|
235
235
|
var height = _ref5.height;
|
|
236
|
-
return
|
|
236
|
+
return fg('platform.editor.a11y-element-browser') ? jsx(Grid, _extends({
|
|
237
237
|
cellRenderer: gridCellRenderer,
|
|
238
238
|
height: height,
|
|
239
239
|
width: containerWidth - ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
|
|
@@ -7,7 +7,6 @@ import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
|
|
|
7
7
|
import { css, jsx } from '@emotion/react';
|
|
8
8
|
import { FormattedMessage } from 'react-intl-next';
|
|
9
9
|
import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
|
|
10
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
11
10
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
|
|
12
11
|
import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE, INLINE_SIDEBAR_HEIGHT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
|
|
13
12
|
import useContainerWidth from '../hooks/use-container-width';
|
|
@@ -108,6 +107,7 @@ var categoryListWrapper = css(mobileCategoryListWrapper, {
|
|
|
108
107
|
flexDirection: 'column'
|
|
109
108
|
});
|
|
110
109
|
function StatelessElementBrowser(props) {
|
|
110
|
+
var _props$categories;
|
|
111
111
|
var items = props.items,
|
|
112
112
|
onSelectItem = props.onSelectItem,
|
|
113
113
|
onInsertItem = props.onInsertItem,
|
|
@@ -126,21 +126,18 @@ function StatelessElementBrowser(props) {
|
|
|
126
126
|
setColumnCount = _useState2[1];
|
|
127
127
|
var selectedCategoryIndex;
|
|
128
128
|
var isFocusSearch;
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
if (
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
// clear the flag if the search happens after a user has chosen the category
|
|
138
|
-
categoryBeenChosen.current = false;
|
|
139
|
-
}
|
|
140
|
-
// A11Y: if categories exists, on the initial render search element should receive focus.
|
|
141
|
-
// After user pick some category the category should stay focused.
|
|
142
|
-
isFocusSearch = !categoryBeenChosen.current || !isEmptySearchTerm;
|
|
129
|
+
selectedCategoryIndex = (_props$categories = props.categories) === null || _props$categories === void 0 ? void 0 : _props$categories.findIndex(function (category) {
|
|
130
|
+
return category.name === selectedCategory;
|
|
131
|
+
});
|
|
132
|
+
if (showCategories) {
|
|
133
|
+
var isEmptySearchTerm = !searchTerm || (searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.length) === 0;
|
|
134
|
+
if (!isEmptySearchTerm) {
|
|
135
|
+
// clear the flag if the search happens after a user has chosen the category
|
|
136
|
+
categoryBeenChosen.current = false;
|
|
143
137
|
}
|
|
138
|
+
// A11Y: if categories exists, on the initial render search element should receive focus.
|
|
139
|
+
// After user pick some category the category should stay focused.
|
|
140
|
+
isFocusSearch = !categoryBeenChosen.current || !isEmptySearchTerm;
|
|
144
141
|
}
|
|
145
142
|
var _useSelectAndFocusOnA = useSelectAndFocusOnArrowNavigation(items.length - 1, columnCount, !!viewMoreItem, isFocusSearch),
|
|
146
143
|
selectedItemIndex = _useSelectAndFocusOnA.selectedItemIndex,
|
|
@@ -182,22 +179,14 @@ function StatelessElementBrowser(props) {
|
|
|
182
179
|
*/
|
|
183
180
|
var selectedItem = selectedItemIndex !== undefined ? items[selectedItemIndex] : null;
|
|
184
181
|
var onItemsEnterTabKeyPress = useCallback(function (e) {
|
|
185
|
-
if (
|
|
186
|
-
|
|
187
|
-
return;
|
|
188
|
-
}
|
|
189
|
-
} else {
|
|
190
|
-
if (e.key !== 'Enter') {
|
|
191
|
-
return;
|
|
192
|
-
}
|
|
182
|
+
if (e.key !== 'Enter' && (e.key !== 'Tab' || !showCategories)) {
|
|
183
|
+
return;
|
|
193
184
|
}
|
|
194
|
-
if (
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
return;
|
|
200
|
-
}
|
|
185
|
+
if (showCategories && e.key === 'Tab' && selectedCategoryIndex !== undefined) {
|
|
186
|
+
// A11Y: Set focus on first category if tab pressed on search
|
|
187
|
+
setFocusedCategoryIndex(selectedCategoryIndex);
|
|
188
|
+
e.preventDefault();
|
|
189
|
+
return;
|
|
201
190
|
}
|
|
202
191
|
if (onInsertItem && selectedItem != null) {
|
|
203
192
|
onInsertItem(selectedItem);
|
|
@@ -248,7 +237,7 @@ function StatelessElementBrowser(props) {
|
|
|
248
237
|
focusedCategoryIndex: focusedCategoryIndex,
|
|
249
238
|
setFocusedCategoryIndex: setFocusedCategoryIndex,
|
|
250
239
|
selectedCategoryIndex: selectedCategoryIndex,
|
|
251
|
-
onSelectCategory:
|
|
240
|
+
onSelectCategory: onSelectCategoryCB
|
|
252
241
|
})));
|
|
253
242
|
}
|
|
254
243
|
function MobileBrowser(_ref) {
|
|
@@ -3,7 +3,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
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 { useCallback, useEffect, useReducer, useRef } from 'react';
|
|
6
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
7
6
|
|
|
8
7
|
/**
|
|
9
8
|
* a custom hook that handles keyboard navigation for Arrow keys based on a
|
|
@@ -65,7 +64,6 @@ var reducer = function reducer(state, action) {
|
|
|
65
64
|
case ACTIONS.MOVE:
|
|
66
65
|
return moveReducer(state, action);
|
|
67
66
|
}
|
|
68
|
-
return state;
|
|
69
67
|
};
|
|
70
68
|
var moveReducer = function moveReducer(state, action) {
|
|
71
69
|
var listSize = state.listSize,
|
|
@@ -192,13 +190,11 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, is
|
|
|
192
190
|
var payload = _objectSpread(_objectSpread({}, initialState), {}, {
|
|
193
191
|
listSize: listSize
|
|
194
192
|
});
|
|
195
|
-
if
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
});
|
|
201
|
-
}
|
|
193
|
+
// A11Y: if categories exist ,on the initial render search element should receive focus.
|
|
194
|
+
// After user pick some category the category should stay focused.
|
|
195
|
+
payload = Object.assign(payload, {
|
|
196
|
+
focusOnSearch: isFocusSearch !== null && isFocusSearch !== void 0 ? isFocusSearch : initialState.focusOnSearch
|
|
197
|
+
});
|
|
202
198
|
dispatch({
|
|
203
199
|
type: ACTIONS.UPDATE_STATE,
|
|
204
200
|
payload: payload
|
|
@@ -211,20 +207,15 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, is
|
|
|
211
207
|
focusOnSearch: false,
|
|
212
208
|
focusOnViewMore: false
|
|
213
209
|
};
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
});
|
|
218
|
-
}
|
|
210
|
+
payload = Object.assign(payload, {
|
|
211
|
+
focusedCategoryIndex: undefined
|
|
212
|
+
});
|
|
219
213
|
dispatch({
|
|
220
214
|
type: ACTIONS.UPDATE_STATE,
|
|
221
215
|
payload: payload
|
|
222
216
|
});
|
|
223
217
|
}, [dispatch]);
|
|
224
218
|
var setFocusedCategoryIndex = useCallback(function (index) {
|
|
225
|
-
if (!getBooleanFF('platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1')) {
|
|
226
|
-
return;
|
|
227
|
-
}
|
|
228
219
|
var payload = {
|
|
229
220
|
focusOnSearch: false,
|
|
230
221
|
focusOnViewMore: false,
|
|
@@ -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 = "84.3.
|
|
10
|
+
var packageVersion = "84.3.1";
|
|
11
11
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
12
12
|
// Remove URL as it has UGC
|
|
13
13
|
// TODO: Sanitise the URL instead of just removing it
|
|
@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
|
|
|
17
17
|
import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
|
|
18
18
|
import Layer from '../Layer';
|
|
19
19
|
var packageName = "@atlaskit/editor-common";
|
|
20
|
-
var packageVersion = "84.3.
|
|
20
|
+
var packageVersion = "84.3.1";
|
|
21
21
|
var halfFocusRing = 1;
|
|
22
22
|
var dropOffset = '0, 8';
|
|
23
23
|
var DropList = /*#__PURE__*/function (_Component) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-common",
|
|
3
|
-
"version": "84.3.
|
|
3
|
+
"version": "84.3.1",
|
|
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/"
|
|
@@ -239,9 +239,6 @@
|
|
|
239
239
|
"platform.editor.mbe-update-params-change": {
|
|
240
240
|
"type": "boolean"
|
|
241
241
|
},
|
|
242
|
-
"platform.editor.a11y-focus-order-for-element-browser-categories_ztiw1": {
|
|
243
|
-
"type": "boolean"
|
|
244
|
-
},
|
|
245
242
|
"platform.editor.simplify-inline-cards-in-code-blocks_jw6t1": {
|
|
246
243
|
"type": "boolean"
|
|
247
244
|
},
|