@atlaskit/editor-common 110.7.1 → 110.8.0
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 +17 -0
- package/dist/cjs/element-browser/components/StatelessElementBrowser.js +1 -1
- package/dist/cjs/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +5 -11
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/cjs/ui-menu/ToolbarArrowKeyNavigationProvider/index.js +10 -34
- package/dist/es2019/element-browser/components/StatelessElementBrowser.js +1 -1
- package/dist/es2019/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +6 -12
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/es2019/ui-menu/ToolbarArrowKeyNavigationProvider/index.js +10 -34
- package/dist/esm/element-browser/components/StatelessElementBrowser.js +1 -1
- package/dist/esm/element-browser/hooks/use-select-and-focus-on-arrow-navigation.js +5 -12
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/esm/ui-menu/ToolbarArrowKeyNavigationProvider/index.js +10 -34
- package/dist/types/collab/index.d.ts +1 -0
- package/dist/types-ts4.5/collab/index.d.ts +1 -0
- package/package.json +5 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/editor-common
|
|
2
2
|
|
|
3
|
+
## 110.8.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`34c085d24f484`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/34c085d24f484) -
|
|
8
|
+
Add new offline metadata to steps if they contain steps that were created while offline.
|
|
9
|
+
|
|
10
|
+
## 110.7.2
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [`ff53e1bfc6c25`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ff53e1bfc6c25) -
|
|
15
|
+
[ED-29482] clean up references to platform_editor_toolbar_rerender_optimization_exp
|
|
16
|
+
- [`663926469ec70`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/663926469ec70) -
|
|
17
|
+
Switch to use fg() to check feature gate platform_editor_update_modal_close_button
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 110.7.1
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -161,7 +161,7 @@ function StatelessElementBrowser(props) {
|
|
|
161
161
|
// clear the flag if the search happens after a user has chosen the category
|
|
162
162
|
categoryBeenChosen.current = false;
|
|
163
163
|
}
|
|
164
|
-
if ((0,
|
|
164
|
+
if ((0, _platformFeatureFlags.fg)('platform_editor_update_modal_close_button')) {
|
|
165
165
|
// A11Y: if categories exists and search can be focused, on the initial render it should receive focus.
|
|
166
166
|
// After user pick some category the category should stay focused.
|
|
167
167
|
isFocusSearch = canFocusSearch && (!categoryBeenChosen.current || !isEmptySearchTerm);
|
|
@@ -9,7 +9,6 @@ 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");
|
|
13
12
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
14
13
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
15
14
|
/**
|
|
@@ -194,14 +193,6 @@ var moveReducer = function moveReducer(state, action) {
|
|
|
194
193
|
focusedItemIndex: safeIndex
|
|
195
194
|
});
|
|
196
195
|
};
|
|
197
|
-
var initialStateWithFocusOnSearchDisabled = {
|
|
198
|
-
focusOnSearch: false,
|
|
199
|
-
focusOnViewMore: false,
|
|
200
|
-
focusOnEmptyStateButton: false,
|
|
201
|
-
selectedItemIndex: 0,
|
|
202
|
-
focusedItemIndex: undefined,
|
|
203
|
-
listSize: 0
|
|
204
|
-
};
|
|
205
196
|
var initialState = {
|
|
206
197
|
focusOnSearch: true,
|
|
207
198
|
focusOnViewMore: false,
|
|
@@ -210,6 +201,9 @@ var initialState = {
|
|
|
210
201
|
focusedItemIndex: undefined,
|
|
211
202
|
listSize: 0
|
|
212
203
|
};
|
|
204
|
+
var initialStateWithFocusOnSearchDisabled = _objectSpread(_objectSpread({}, initialState), {}, {
|
|
205
|
+
focusOnSearch: false
|
|
206
|
+
});
|
|
213
207
|
var getInitialState = function getInitialState(listSize, canFocusViewMore) {
|
|
214
208
|
return function (initialState) {
|
|
215
209
|
return _objectSpread(_objectSpread({}, initialState), {}, {
|
|
@@ -252,7 +246,7 @@ var skipBackwardOffsetToSafeItem = function skipBackwardOffsetToSafeItem(current
|
|
|
252
246
|
return currentIndex + 1;
|
|
253
247
|
};
|
|
254
248
|
function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, itemIsDisabled, isFocusSearch, autoFocusSearch) {
|
|
255
|
-
var _useReducer = (0, _react.useReducer)(reducer, (0,
|
|
249
|
+
var _useReducer = (0, _react.useReducer)(reducer, autoFocusSearch && (0, _platformFeatureFlags.fg)('platform_editor_update_modal_close_button') ? initialState : initialStateWithFocusOnSearchDisabled, getInitialState(listSize, canFocusViewMore)),
|
|
256
250
|
_useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
|
|
257
251
|
state = _useReducer2[0],
|
|
258
252
|
dispatch = _useReducer2[1];
|
|
@@ -273,7 +267,7 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, it
|
|
|
273
267
|
|
|
274
268
|
// calls if items size changed
|
|
275
269
|
var reset = (0, _react.useCallback)(function (listSize) {
|
|
276
|
-
var defaultState = (0,
|
|
270
|
+
var defaultState = autoFocusSearch && (0, _platformFeatureFlags.fg)('platform_editor_update_modal_close_button') ? initialState : initialStateWithFocusOnSearchDisabled;
|
|
277
271
|
var payload = _objectSpread(_objectSpread({}, defaultState), {}, {
|
|
278
272
|
listSize: listSize
|
|
279
273
|
});
|
|
@@ -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.7.
|
|
19
|
+
var packageVersion = "110.7.2";
|
|
20
20
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
21
21
|
// Remove URL as it has UGC
|
|
22
22
|
// Ignored via go/ees007
|
|
@@ -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.7.
|
|
27
|
+
var packageVersion = "110.7.2";
|
|
28
28
|
var halfFocusRing = 1;
|
|
29
29
|
var dropOffset = '0, 8';
|
|
30
30
|
var fadeIn = (0, _react2.keyframes)({
|
|
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.ToolbarArrowKeyNavigationProvider = exports.KeyDownHandlerContext = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _react2 = require("@emotion/react");
|
|
10
|
-
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
11
10
|
var _elementBrowser = require("../../element-browser");
|
|
12
11
|
var _messages = require("../../messages");
|
|
13
12
|
var _mediaInsert = require("../../messages/media-insert");
|
|
@@ -74,39 +73,22 @@ var ToolbarArrowKeyNavigationProvider = exports.ToolbarArrowKeyNavigationProvide
|
|
|
74
73
|
}
|
|
75
74
|
selectedItemIndex.current = index;
|
|
76
75
|
}, []);
|
|
77
|
-
var
|
|
76
|
+
var handleArrowRightMemoized = (0, _react.useCallback)(function () {
|
|
78
77
|
var _filteredFocusableEle;
|
|
79
78
|
var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
80
79
|
incrementIndex(filteredFocusableElements);
|
|
81
80
|
(_filteredFocusableEle = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle === void 0 || _filteredFocusableEle.focus();
|
|
82
|
-
};
|
|
83
|
-
var handleArrowLeft = function handleArrowLeft() {
|
|
84
|
-
var _filteredFocusableEle2;
|
|
85
|
-
var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
86
|
-
decrementIndex(filteredFocusableElements);
|
|
87
|
-
(_filteredFocusableEle2 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle2 === void 0 || _filteredFocusableEle2.focus();
|
|
88
|
-
};
|
|
89
|
-
var handleTab = function handleTab() {
|
|
90
|
-
var _filteredFocusableEle3;
|
|
91
|
-
var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
92
|
-
(_filteredFocusableEle3 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle3 === void 0 || _filteredFocusableEle3.focus();
|
|
93
|
-
};
|
|
94
|
-
var handleArrowRightMemoized = (0, _react.useCallback)(function () {
|
|
95
|
-
var _filteredFocusableEle4;
|
|
96
|
-
var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
97
|
-
incrementIndex(filteredFocusableElements);
|
|
98
|
-
(_filteredFocusableEle4 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle4 === void 0 || _filteredFocusableEle4.focus();
|
|
99
81
|
}, [incrementIndex]);
|
|
100
82
|
var handleArrowLeftMemoized = (0, _react.useCallback)(function () {
|
|
101
|
-
var
|
|
83
|
+
var _filteredFocusableEle2;
|
|
102
84
|
var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
103
85
|
decrementIndex(filteredFocusableElements);
|
|
104
|
-
(
|
|
86
|
+
(_filteredFocusableEle2 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle2 === void 0 || _filteredFocusableEle2.focus();
|
|
105
87
|
}, [decrementIndex]);
|
|
106
88
|
var handleTabMemoized = (0, _react.useCallback)(function () {
|
|
107
|
-
var
|
|
89
|
+
var _filteredFocusableEle3;
|
|
108
90
|
var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
109
|
-
(
|
|
91
|
+
(_filteredFocusableEle3 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle3 === void 0 || _filteredFocusableEle3.focus();
|
|
110
92
|
}, []);
|
|
111
93
|
var handleTabLocal = function handleTabLocal() {
|
|
112
94
|
var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
@@ -126,19 +108,13 @@ var ToolbarArrowKeyNavigationProvider = exports.ToolbarArrowKeyNavigationProvide
|
|
|
126
108
|
}
|
|
127
109
|
element.focus();
|
|
128
110
|
};
|
|
129
|
-
var
|
|
130
|
-
handleArrowLeft: handleArrowLeft,
|
|
131
|
-
handleArrowRight: handleArrowRight,
|
|
132
|
-
handleTab: handleTab
|
|
133
|
-
};
|
|
134
|
-
var submenuKeydownHandleContextMemoized = (0, _react.useMemo)(function () {
|
|
111
|
+
var submenuKeydownHandleContext = (0, _react.useMemo)(function () {
|
|
135
112
|
return {
|
|
136
113
|
handleArrowLeft: handleArrowLeftMemoized,
|
|
137
114
|
handleArrowRight: handleArrowRightMemoized,
|
|
138
115
|
handleTab: handleTabMemoized
|
|
139
116
|
};
|
|
140
117
|
}, [handleArrowLeftMemoized, handleArrowRightMemoized, handleTabMemoized]);
|
|
141
|
-
var submenuKeydownHandleContext = (0, _experiments.editorExperiment)('platform_editor_toolbar_rerender_optimization_exp', true) ? submenuKeydownHandleContextMemoized : submenuKeydownHandleContextRaw;
|
|
142
118
|
(0, _react.useLayoutEffect)(function () {
|
|
143
119
|
if (!wrapperRef.current || disableArrowKeyNavigation) {
|
|
144
120
|
return;
|
|
@@ -213,18 +189,18 @@ var ToolbarArrowKeyNavigationProvider = exports.ToolbarArrowKeyNavigationProvide
|
|
|
213
189
|
// Ignored via go/ees005
|
|
214
190
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
215
191
|
if (isShortcutToFocusToolbar(event)) {
|
|
216
|
-
var
|
|
192
|
+
var _filteredFocusableEle4, _filteredFocusableEle5, _filteredFocusableEle6;
|
|
217
193
|
var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
218
|
-
(
|
|
194
|
+
(_filteredFocusableEle4 = filteredFocusableElements[0]) === null || _filteredFocusableEle4 === void 0 || _filteredFocusableEle4.focus();
|
|
219
195
|
|
|
220
196
|
// Button component from DS removes focus ring when :focus:not(:focus-visible) is true
|
|
221
197
|
// Since here we programmatically focus the first button in the toolbar (as suppose to keyboard navigation), browser does not always force focus-visible to true
|
|
222
198
|
// which is why the first button in the toolbar is not shown with focus ring
|
|
223
199
|
// The workaround is add a new classname so we add back focus ring when the button is focused
|
|
224
|
-
if (((
|
|
200
|
+
if (((_filteredFocusableEle5 = filteredFocusableElements[0]) === null || _filteredFocusableEle5 === void 0 ? void 0 : _filteredFocusableEle5.tagName) === 'BUTTON') {
|
|
225
201
|
filteredFocusableElements[0].classList.add('first-floating-toolbar-button');
|
|
226
202
|
}
|
|
227
|
-
(
|
|
203
|
+
(_filteredFocusableEle6 = filteredFocusableElements[0]) === null || _filteredFocusableEle6 === void 0 || _filteredFocusableEle6.scrollIntoView({
|
|
228
204
|
behavior: 'smooth',
|
|
229
205
|
block: 'center',
|
|
230
206
|
inline: 'nearest'
|
|
@@ -146,7 +146,7 @@ function StatelessElementBrowser(props) {
|
|
|
146
146
|
// clear the flag if the search happens after a user has chosen the category
|
|
147
147
|
categoryBeenChosen.current = false;
|
|
148
148
|
}
|
|
149
|
-
if (
|
|
149
|
+
if (fg('platform_editor_update_modal_close_button')) {
|
|
150
150
|
// A11Y: if categories exists and search can be focused, on the initial render it should receive focus.
|
|
151
151
|
// After user pick some category the category should stay focused.
|
|
152
152
|
isFocusSearch = canFocusSearch && (!categoryBeenChosen.current || !isEmptySearchTerm);
|
|
@@ -1,7 +1,5 @@
|
|
|
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';
|
|
4
|
-
|
|
5
3
|
/**
|
|
6
4
|
* a custom hook that handles keyboard navigation for Arrow keys based on a
|
|
7
5
|
* given listSize, and a step (for up and down arrows).
|
|
@@ -201,14 +199,6 @@ const moveReducer = (state, action) => {
|
|
|
201
199
|
focusedItemIndex: safeIndex
|
|
202
200
|
};
|
|
203
201
|
};
|
|
204
|
-
const initialStateWithFocusOnSearchDisabled = {
|
|
205
|
-
focusOnSearch: false,
|
|
206
|
-
focusOnViewMore: false,
|
|
207
|
-
focusOnEmptyStateButton: false,
|
|
208
|
-
selectedItemIndex: 0,
|
|
209
|
-
focusedItemIndex: undefined,
|
|
210
|
-
listSize: 0
|
|
211
|
-
};
|
|
212
202
|
const initialState = {
|
|
213
203
|
focusOnSearch: true,
|
|
214
204
|
focusOnViewMore: false,
|
|
@@ -217,6 +207,10 @@ const initialState = {
|
|
|
217
207
|
focusedItemIndex: undefined,
|
|
218
208
|
listSize: 0
|
|
219
209
|
};
|
|
210
|
+
const initialStateWithFocusOnSearchDisabled = {
|
|
211
|
+
...initialState,
|
|
212
|
+
focusOnSearch: false
|
|
213
|
+
};
|
|
220
214
|
const getInitialState = (listSize, canFocusViewMore) => initialState => ({
|
|
221
215
|
...initialState,
|
|
222
216
|
listSize,
|
|
@@ -256,7 +250,7 @@ const skipBackwardOffsetToSafeItem = (currentIndex, stepSize, itemIsDisabled) =>
|
|
|
256
250
|
return currentIndex + 1;
|
|
257
251
|
};
|
|
258
252
|
function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, itemIsDisabled, isFocusSearch, autoFocusSearch) {
|
|
259
|
-
const [state, dispatch] = useReducer(reducer,
|
|
253
|
+
const [state, dispatch] = useReducer(reducer, autoFocusSearch && fg('platform_editor_update_modal_close_button') ? initialState : initialStateWithFocusOnSearchDisabled, getInitialState(listSize, canFocusViewMore));
|
|
260
254
|
useEffect(() => {
|
|
261
255
|
dispatch({
|
|
262
256
|
type: ACTIONS.UPDATE_STATE,
|
|
@@ -276,7 +270,7 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, it
|
|
|
276
270
|
|
|
277
271
|
// calls if items size changed
|
|
278
272
|
const reset = useCallback(listSize => {
|
|
279
|
-
const defaultState =
|
|
273
|
+
const defaultState = autoFocusSearch && fg('platform_editor_update_modal_close_button') ? initialState : initialStateWithFocusOnSearchDisabled;
|
|
280
274
|
let payload = {
|
|
281
275
|
...defaultState,
|
|
282
276
|
listSize
|
|
@@ -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.7.
|
|
4
|
+
const packageVersion = "110.7.2";
|
|
5
5
|
const sanitiseSentryEvents = (data, _hint) => {
|
|
6
6
|
// Remove URL as it has UGC
|
|
7
7
|
// Ignored via go/ees007
|
|
@@ -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.7.
|
|
17
|
+
const packageVersion = "110.7.2";
|
|
18
18
|
const halfFocusRing = 1;
|
|
19
19
|
const dropOffset = '0, 8';
|
|
20
20
|
const fadeIn = keyframes({
|
|
@@ -7,7 +7,6 @@ import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
|
|
|
7
7
|
|
|
8
8
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
9
9
|
import { css, jsx } from '@emotion/react';
|
|
10
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
11
10
|
import { ELEMENT_BROWSER_ID } from '../../element-browser';
|
|
12
11
|
import { fullPageMessages } from '../../messages';
|
|
13
12
|
import { mediaInsertMessages } from '../../messages/media-insert';
|
|
@@ -67,39 +66,22 @@ export const ToolbarArrowKeyNavigationProvider = ({
|
|
|
67
66
|
}
|
|
68
67
|
selectedItemIndex.current = index;
|
|
69
68
|
}, []);
|
|
70
|
-
const
|
|
69
|
+
const handleArrowRightMemoized = useCallback(() => {
|
|
71
70
|
var _filteredFocusableEle;
|
|
72
71
|
const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
73
72
|
incrementIndex(filteredFocusableElements);
|
|
74
73
|
(_filteredFocusableEle = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle === void 0 ? void 0 : _filteredFocusableEle.focus();
|
|
75
|
-
};
|
|
76
|
-
const handleArrowLeft = () => {
|
|
77
|
-
var _filteredFocusableEle2;
|
|
78
|
-
const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
79
|
-
decrementIndex(filteredFocusableElements);
|
|
80
|
-
(_filteredFocusableEle2 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.focus();
|
|
81
|
-
};
|
|
82
|
-
const handleTab = () => {
|
|
83
|
-
var _filteredFocusableEle3;
|
|
84
|
-
const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
85
|
-
(_filteredFocusableEle3 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle3 === void 0 ? void 0 : _filteredFocusableEle3.focus();
|
|
86
|
-
};
|
|
87
|
-
const handleArrowRightMemoized = useCallback(() => {
|
|
88
|
-
var _filteredFocusableEle4;
|
|
89
|
-
const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
90
|
-
incrementIndex(filteredFocusableElements);
|
|
91
|
-
(_filteredFocusableEle4 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle4 === void 0 ? void 0 : _filteredFocusableEle4.focus();
|
|
92
74
|
}, [incrementIndex]);
|
|
93
75
|
const handleArrowLeftMemoized = useCallback(() => {
|
|
94
|
-
var
|
|
76
|
+
var _filteredFocusableEle2;
|
|
95
77
|
const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
96
78
|
decrementIndex(filteredFocusableElements);
|
|
97
|
-
(
|
|
79
|
+
(_filteredFocusableEle2 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.focus();
|
|
98
80
|
}, [decrementIndex]);
|
|
99
81
|
const handleTabMemoized = useCallback(() => {
|
|
100
|
-
var
|
|
82
|
+
var _filteredFocusableEle3;
|
|
101
83
|
const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
102
|
-
(
|
|
84
|
+
(_filteredFocusableEle3 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle3 === void 0 ? void 0 : _filteredFocusableEle3.focus();
|
|
103
85
|
}, []);
|
|
104
86
|
const handleTabLocal = () => {
|
|
105
87
|
const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
@@ -118,17 +100,11 @@ export const ToolbarArrowKeyNavigationProvider = ({
|
|
|
118
100
|
}
|
|
119
101
|
element.focus();
|
|
120
102
|
};
|
|
121
|
-
const
|
|
122
|
-
handleArrowLeft,
|
|
123
|
-
handleArrowRight,
|
|
124
|
-
handleTab
|
|
125
|
-
};
|
|
126
|
-
const submenuKeydownHandleContextMemoized = useMemo(() => ({
|
|
103
|
+
const submenuKeydownHandleContext = useMemo(() => ({
|
|
127
104
|
handleArrowLeft: handleArrowLeftMemoized,
|
|
128
105
|
handleArrowRight: handleArrowRightMemoized,
|
|
129
106
|
handleTab: handleTabMemoized
|
|
130
107
|
}), [handleArrowLeftMemoized, handleArrowRightMemoized, handleTabMemoized]);
|
|
131
|
-
const submenuKeydownHandleContext = editorExperiment('platform_editor_toolbar_rerender_optimization_exp', true) ? submenuKeydownHandleContextMemoized : submenuKeydownHandleContextRaw;
|
|
132
108
|
useLayoutEffect(() => {
|
|
133
109
|
if (!wrapperRef.current || disableArrowKeyNavigation) {
|
|
134
110
|
return;
|
|
@@ -205,18 +181,18 @@ export const ToolbarArrowKeyNavigationProvider = ({
|
|
|
205
181
|
// Ignored via go/ees005
|
|
206
182
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
207
183
|
if (isShortcutToFocusToolbar(event)) {
|
|
208
|
-
var
|
|
184
|
+
var _filteredFocusableEle4, _filteredFocusableEle5, _filteredFocusableEle6;
|
|
209
185
|
const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
210
|
-
(
|
|
186
|
+
(_filteredFocusableEle4 = filteredFocusableElements[0]) === null || _filteredFocusableEle4 === void 0 ? void 0 : _filteredFocusableEle4.focus();
|
|
211
187
|
|
|
212
188
|
// Button component from DS removes focus ring when :focus:not(:focus-visible) is true
|
|
213
189
|
// Since here we programmatically focus the first button in the toolbar (as suppose to keyboard navigation), browser does not always force focus-visible to true
|
|
214
190
|
// which is why the first button in the toolbar is not shown with focus ring
|
|
215
191
|
// The workaround is add a new classname so we add back focus ring when the button is focused
|
|
216
|
-
if (((
|
|
192
|
+
if (((_filteredFocusableEle5 = filteredFocusableElements[0]) === null || _filteredFocusableEle5 === void 0 ? void 0 : _filteredFocusableEle5.tagName) === 'BUTTON') {
|
|
217
193
|
filteredFocusableElements[0].classList.add('first-floating-toolbar-button');
|
|
218
194
|
}
|
|
219
|
-
(
|
|
195
|
+
(_filteredFocusableEle6 = filteredFocusableElements[0]) === null || _filteredFocusableEle6 === void 0 ? void 0 : _filteredFocusableEle6.scrollIntoView({
|
|
220
196
|
behavior: 'smooth',
|
|
221
197
|
block: 'center',
|
|
222
198
|
inline: 'nearest'
|
|
@@ -151,7 +151,7 @@ function StatelessElementBrowser(props) {
|
|
|
151
151
|
// clear the flag if the search happens after a user has chosen the category
|
|
152
152
|
categoryBeenChosen.current = false;
|
|
153
153
|
}
|
|
154
|
-
if (
|
|
154
|
+
if (fg('platform_editor_update_modal_close_button')) {
|
|
155
155
|
// A11Y: if categories exists and search can be focused, on the initial render it should receive focus.
|
|
156
156
|
// After user pick some category the category should stay focused.
|
|
157
157
|
isFocusSearch = canFocusSearch && (!categoryBeenChosen.current || !isEmptySearchTerm);
|
|
@@ -4,8 +4,6 @@ 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';
|
|
8
|
-
|
|
9
7
|
/**
|
|
10
8
|
* a custom hook that handles keyboard navigation for Arrow keys based on a
|
|
11
9
|
* given listSize, and a step (for up and down arrows).
|
|
@@ -189,14 +187,6 @@ var moveReducer = function moveReducer(state, action) {
|
|
|
189
187
|
focusedItemIndex: safeIndex
|
|
190
188
|
});
|
|
191
189
|
};
|
|
192
|
-
var initialStateWithFocusOnSearchDisabled = {
|
|
193
|
-
focusOnSearch: false,
|
|
194
|
-
focusOnViewMore: false,
|
|
195
|
-
focusOnEmptyStateButton: false,
|
|
196
|
-
selectedItemIndex: 0,
|
|
197
|
-
focusedItemIndex: undefined,
|
|
198
|
-
listSize: 0
|
|
199
|
-
};
|
|
200
190
|
var initialState = {
|
|
201
191
|
focusOnSearch: true,
|
|
202
192
|
focusOnViewMore: false,
|
|
@@ -205,6 +195,9 @@ var initialState = {
|
|
|
205
195
|
focusedItemIndex: undefined,
|
|
206
196
|
listSize: 0
|
|
207
197
|
};
|
|
198
|
+
var initialStateWithFocusOnSearchDisabled = _objectSpread(_objectSpread({}, initialState), {}, {
|
|
199
|
+
focusOnSearch: false
|
|
200
|
+
});
|
|
208
201
|
var getInitialState = function getInitialState(listSize, canFocusViewMore) {
|
|
209
202
|
return function (initialState) {
|
|
210
203
|
return _objectSpread(_objectSpread({}, initialState), {}, {
|
|
@@ -247,7 +240,7 @@ var skipBackwardOffsetToSafeItem = function skipBackwardOffsetToSafeItem(current
|
|
|
247
240
|
return currentIndex + 1;
|
|
248
241
|
};
|
|
249
242
|
function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, itemIsDisabled, isFocusSearch, autoFocusSearch) {
|
|
250
|
-
var _useReducer = useReducer(reducer,
|
|
243
|
+
var _useReducer = useReducer(reducer, autoFocusSearch && fg('platform_editor_update_modal_close_button') ? initialState : initialStateWithFocusOnSearchDisabled, getInitialState(listSize, canFocusViewMore)),
|
|
251
244
|
_useReducer2 = _slicedToArray(_useReducer, 2),
|
|
252
245
|
state = _useReducer2[0],
|
|
253
246
|
dispatch = _useReducer2[1];
|
|
@@ -268,7 +261,7 @@ function useSelectAndFocusOnArrowNavigation(listSize, step, canFocusViewMore, it
|
|
|
268
261
|
|
|
269
262
|
// calls if items size changed
|
|
270
263
|
var reset = useCallback(function (listSize) {
|
|
271
|
-
var defaultState =
|
|
264
|
+
var defaultState = autoFocusSearch && fg('platform_editor_update_modal_close_button') ? initialState : initialStateWithFocusOnSearchDisabled;
|
|
272
265
|
var payload = _objectSpread(_objectSpread({}, defaultState), {}, {
|
|
273
266
|
listSize: listSize
|
|
274
267
|
});
|
|
@@ -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.7.
|
|
10
|
+
var packageVersion = "110.7.2";
|
|
11
11
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
12
12
|
// Remove URL as it has UGC
|
|
13
13
|
// Ignored via go/ees007
|
|
@@ -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.7.
|
|
24
|
+
var packageVersion = "110.7.2";
|
|
25
25
|
var halfFocusRing = 1;
|
|
26
26
|
var dropOffset = '0, 8';
|
|
27
27
|
var fadeIn = keyframes({
|
|
@@ -7,7 +7,6 @@ import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
|
|
|
7
7
|
|
|
8
8
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
9
9
|
import { css, jsx } from '@emotion/react';
|
|
10
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
11
10
|
import { ELEMENT_BROWSER_ID } from '../../element-browser';
|
|
12
11
|
import { fullPageMessages } from '../../messages';
|
|
13
12
|
import { mediaInsertMessages } from '../../messages/media-insert';
|
|
@@ -66,39 +65,22 @@ export var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigatio
|
|
|
66
65
|
}
|
|
67
66
|
selectedItemIndex.current = index;
|
|
68
67
|
}, []);
|
|
69
|
-
var
|
|
68
|
+
var handleArrowRightMemoized = useCallback(function () {
|
|
70
69
|
var _filteredFocusableEle;
|
|
71
70
|
var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
72
71
|
incrementIndex(filteredFocusableElements);
|
|
73
72
|
(_filteredFocusableEle = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle === void 0 || _filteredFocusableEle.focus();
|
|
74
|
-
};
|
|
75
|
-
var handleArrowLeft = function handleArrowLeft() {
|
|
76
|
-
var _filteredFocusableEle2;
|
|
77
|
-
var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
78
|
-
decrementIndex(filteredFocusableElements);
|
|
79
|
-
(_filteredFocusableEle2 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle2 === void 0 || _filteredFocusableEle2.focus();
|
|
80
|
-
};
|
|
81
|
-
var handleTab = function handleTab() {
|
|
82
|
-
var _filteredFocusableEle3;
|
|
83
|
-
var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
84
|
-
(_filteredFocusableEle3 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle3 === void 0 || _filteredFocusableEle3.focus();
|
|
85
|
-
};
|
|
86
|
-
var handleArrowRightMemoized = useCallback(function () {
|
|
87
|
-
var _filteredFocusableEle4;
|
|
88
|
-
var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
89
|
-
incrementIndex(filteredFocusableElements);
|
|
90
|
-
(_filteredFocusableEle4 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle4 === void 0 || _filteredFocusableEle4.focus();
|
|
91
73
|
}, [incrementIndex]);
|
|
92
74
|
var handleArrowLeftMemoized = useCallback(function () {
|
|
93
|
-
var
|
|
75
|
+
var _filteredFocusableEle2;
|
|
94
76
|
var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
95
77
|
decrementIndex(filteredFocusableElements);
|
|
96
|
-
(
|
|
78
|
+
(_filteredFocusableEle2 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle2 === void 0 || _filteredFocusableEle2.focus();
|
|
97
79
|
}, [decrementIndex]);
|
|
98
80
|
var handleTabMemoized = useCallback(function () {
|
|
99
|
-
var
|
|
81
|
+
var _filteredFocusableEle3;
|
|
100
82
|
var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
101
|
-
(
|
|
83
|
+
(_filteredFocusableEle3 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle3 === void 0 || _filteredFocusableEle3.focus();
|
|
102
84
|
}, []);
|
|
103
85
|
var handleTabLocal = function handleTabLocal() {
|
|
104
86
|
var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
@@ -118,19 +100,13 @@ export var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigatio
|
|
|
118
100
|
}
|
|
119
101
|
element.focus();
|
|
120
102
|
};
|
|
121
|
-
var
|
|
122
|
-
handleArrowLeft: handleArrowLeft,
|
|
123
|
-
handleArrowRight: handleArrowRight,
|
|
124
|
-
handleTab: handleTab
|
|
125
|
-
};
|
|
126
|
-
var submenuKeydownHandleContextMemoized = useMemo(function () {
|
|
103
|
+
var submenuKeydownHandleContext = useMemo(function () {
|
|
127
104
|
return {
|
|
128
105
|
handleArrowLeft: handleArrowLeftMemoized,
|
|
129
106
|
handleArrowRight: handleArrowRightMemoized,
|
|
130
107
|
handleTab: handleTabMemoized
|
|
131
108
|
};
|
|
132
109
|
}, [handleArrowLeftMemoized, handleArrowRightMemoized, handleTabMemoized]);
|
|
133
|
-
var submenuKeydownHandleContext = editorExperiment('platform_editor_toolbar_rerender_optimization_exp', true) ? submenuKeydownHandleContextMemoized : submenuKeydownHandleContextRaw;
|
|
134
110
|
useLayoutEffect(function () {
|
|
135
111
|
if (!wrapperRef.current || disableArrowKeyNavigation) {
|
|
136
112
|
return;
|
|
@@ -205,18 +181,18 @@ export var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigatio
|
|
|
205
181
|
// Ignored via go/ees005
|
|
206
182
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
207
183
|
if (isShortcutToFocusToolbar(event)) {
|
|
208
|
-
var
|
|
184
|
+
var _filteredFocusableEle4, _filteredFocusableEle5, _filteredFocusableEle6;
|
|
209
185
|
var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
|
|
210
|
-
(
|
|
186
|
+
(_filteredFocusableEle4 = filteredFocusableElements[0]) === null || _filteredFocusableEle4 === void 0 || _filteredFocusableEle4.focus();
|
|
211
187
|
|
|
212
188
|
// Button component from DS removes focus ring when :focus:not(:focus-visible) is true
|
|
213
189
|
// Since here we programmatically focus the first button in the toolbar (as suppose to keyboard navigation), browser does not always force focus-visible to true
|
|
214
190
|
// which is why the first button in the toolbar is not shown with focus ring
|
|
215
191
|
// The workaround is add a new classname so we add back focus ring when the button is focused
|
|
216
|
-
if (((
|
|
192
|
+
if (((_filteredFocusableEle5 = filteredFocusableElements[0]) === null || _filteredFocusableEle5 === void 0 ? void 0 : _filteredFocusableEle5.tagName) === 'BUTTON') {
|
|
217
193
|
filteredFocusableElements[0].classList.add('first-floating-toolbar-button');
|
|
218
194
|
}
|
|
219
|
-
(
|
|
195
|
+
(_filteredFocusableEle6 = filteredFocusableElements[0]) === null || _filteredFocusableEle6 === void 0 || _filteredFocusableEle6.scrollIntoView({
|
|
220
196
|
behavior: 'smooth',
|
|
221
197
|
block: 'center',
|
|
222
198
|
inline: 'nearest'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-common",
|
|
3
|
-
"version": "110.
|
|
3
|
+
"version": "110.8.0",
|
|
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/"
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"@atlaskit/task-decision": "^19.2.0",
|
|
82
82
|
"@atlaskit/textfield": "^8.0.0",
|
|
83
83
|
"@atlaskit/theme": "^21.0.0",
|
|
84
|
-
"@atlaskit/tmp-editor-statsig": "^13.
|
|
84
|
+
"@atlaskit/tmp-editor-statsig": "^13.5.0",
|
|
85
85
|
"@atlaskit/tokens": "^6.4.0",
|
|
86
86
|
"@atlaskit/tooltip": "^20.5.0",
|
|
87
87
|
"@atlaskit/width-detector": "^5.0.0",
|
|
@@ -288,6 +288,9 @@
|
|
|
288
288
|
},
|
|
289
289
|
"platform_editor_block_menu_format_rank_revised": {
|
|
290
290
|
"type": "boolean"
|
|
291
|
+
},
|
|
292
|
+
"platform_editor_update_modal_close_button": {
|
|
293
|
+
"type": "boolean"
|
|
291
294
|
}
|
|
292
295
|
}
|
|
293
296
|
}
|