@atlaskit/editor-core 227.0.9 → 227.1.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/ui/ContextPanel/index.js +27 -2
  3. package/dist/cjs/version-wrapper.js +1 -1
  4. package/dist/es2019/ui/ContextPanel/index.js +27 -2
  5. package/dist/es2019/version-wrapper.js +1 -1
  6. package/dist/esm/ui/ContextPanel/index.js +27 -2
  7. package/dist/esm/version-wrapper.js +1 -1
  8. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @atlaskit/editor-core
2
2
 
3
+ ## 227.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`0fd161ec1e393`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0fd161ec1e393) -
8
+ ContextPanel no longer moves focus into the editor when it closes if a consumer has already
9
+ restored focus to an element outside the panel (for example the button that opened it), following
10
+ the WAI-ARIA dialog pattern. Focus still returns to the editor when it was inside the closing
11
+ panel or on `document.body`. Adds `@atlaskit/browser-apis` as a dependency (used for SSR-safe
12
+ document access).
13
+
3
14
  ## 227.0.9
4
15
 
5
16
  ### Patch Changes
package/dist/cjs/ui/ContextPanel/index.js CHANGED
@@ -16,6 +16,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
16
16
  var _react = _interopRequireDefault(require("react"));
17
17
  var _reactIntl = require("react-intl");
18
18
  var _Transition = _interopRequireDefault(require("react-transition-group/Transition"));
19
+ var _browserApis = require("@atlaskit/browser-apis");
19
20
  var _contextPanel = require("@atlaskit/editor-common/context-panel");
20
21
  var _hooks = require("@atlaskit/editor-common/hooks");
21
22
  var _messages = require("@atlaskit/editor-common/messages");
@@ -54,9 +55,33 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
54
55
  (0, _defineProperty2.default)(_this, "handleTransitionExited", function () {
55
56
  _this.unsetPluginContent();
56
57
  });
57
- (0, _defineProperty2.default)(_this, "focusEditor", function () {
58
- var _editorAPI$core;
58
+ /**
59
+ * Returns focus to the editor when the panel starts closing, so keyboard users
60
+ * are not left with focus on an element that is about to disappear.
61
+ *
62
+ * Skipped when focus is already on a live element *outside* the exiting panel:
63
+ * that means the consumer has restored focus itself (e.g. to the button that
64
+ * opened the panel, per the WAI-ARIA dialog pattern), and overriding it would
65
+ * strand keyboard and screen-reader users in the editor.
66
+ *
67
+ * @param node The exiting panel content, as passed by `Transition`'s `onExiting`.
68
+ */
69
+ (0, _defineProperty2.default)(_this, "focusEditor", function (node) {
70
+ var _node$contains, _editorAPI$core;
59
71
  var editorAPI = _this.props.editorAPI;
72
+
73
+ // `node` can be null here: consumers often clear the panel's children in the
74
+ // same update that hides it, so `Transition` has no DOM node to hand us. Treat
75
+ // that as "focus is not inside the panel" and rely on the active element alone.
76
+ //
77
+ // `Element` rather than `HTMLElement`: focusable SVG elements (e.g. an
78
+ // SVG-based trigger button) are valid focus targets but are not HTMLElements.
79
+ var activeDocument = (0, _browserApis.getDocument)();
80
+ var activeElement = activeDocument === null || activeDocument === void 0 ? void 0 : activeDocument.activeElement;
81
+ var focusHeldOutsidePanel = !!activeDocument && activeElement instanceof Element && activeElement !== activeDocument.body && activeElement.isConnected && !((_node$contains = node === null || node === void 0 ? void 0 : node.contains(activeElement)) !== null && _node$contains !== void 0 ? _node$contains : false);
82
+ if (focusHeldOutsidePanel) {
83
+ return;
84
+ }
60
85
  editorAPI === null || editorAPI === void 0 || (_editorAPI$core = editorAPI.core) === null || _editorAPI$core === void 0 || _editorAPI$core.actions.focus({
61
86
  scrollIntoView: false
62
87
  });
package/dist/cjs/version-wrapper.js CHANGED
@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.version = exports.name = void 0;
7
7
  var name = exports.name = "@atlaskit/editor-core";
8
8
  // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
9
- var version = exports.version = "227.0.8";
9
+ var version = exports.version = "227.0.9";
package/dist/es2019/ui/ContextPanel/index.js CHANGED
@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
4
4
  import React from 'react';
5
5
  import { injectIntl } from 'react-intl';
6
6
  import Transition from 'react-transition-group/Transition';
7
+ import { getDocument } from '@atlaskit/browser-apis';
7
8
  import { ContextPanelConsumer } from '@atlaskit/editor-common/context-panel';
8
9
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
9
10
  import { contextPanelMessages } from '@atlaskit/editor-common/messages';
@@ -29,11 +30,35 @@ class SwappableContentAreaInner extends React.PureComponent {
29
30
  _defineProperty(this, "handleTransitionExited", () => {
30
31
  this.unsetPluginContent();
31
32
  });
32
- _defineProperty(this, "focusEditor", () => {
33
- var _editorAPI$core;
33
+ /**
34
+ * Returns focus to the editor when the panel starts closing, so keyboard users
35
+ * are not left with focus on an element that is about to disappear.
36
+ *
37
+ * Skipped when focus is already on a live element *outside* the exiting panel:
38
+ * that means the consumer has restored focus itself (e.g. to the button that
39
+ * opened the panel, per the WAI-ARIA dialog pattern), and overriding it would
40
+ * strand keyboard and screen-reader users in the editor.
41
+ *
42
+ * @param node The exiting panel content, as passed by `Transition`'s `onExiting`.
43
+ */
44
+ _defineProperty(this, "focusEditor", node => {
45
+ var _node$contains, _editorAPI$core;
34
46
  const {
35
47
  editorAPI
36
48
  } = this.props;
49
+
50
+ // `node` can be null here: consumers often clear the panel's children in the
51
+ // same update that hides it, so `Transition` has no DOM node to hand us. Treat
52
+ // that as "focus is not inside the panel" and rely on the active element alone.
53
+ //
54
+ // `Element` rather than `HTMLElement`: focusable SVG elements (e.g. an
55
+ // SVG-based trigger button) are valid focus targets but are not HTMLElements.
56
+ const activeDocument = getDocument();
57
+ const activeElement = activeDocument === null || activeDocument === void 0 ? void 0 : activeDocument.activeElement;
58
+ const focusHeldOutsidePanel = !!activeDocument && activeElement instanceof Element && activeElement !== activeDocument.body && activeElement.isConnected && !((_node$contains = node === null || node === void 0 ? void 0 : node.contains(activeElement)) !== null && _node$contains !== void 0 ? _node$contains : false);
59
+ if (focusHeldOutsidePanel) {
60
+ return;
61
+ }
37
62
  editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$core = editorAPI.core) === null || _editorAPI$core === void 0 ? void 0 : _editorAPI$core.actions.focus({
38
63
  scrollIntoView: false
39
64
  });
package/dist/es2019/version-wrapper.js CHANGED
@@ -1,3 +1,3 @@
1
1
  export const name = "@atlaskit/editor-core";
2
2
  // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
3
- export const version = "227.0.8";
3
+ export const version = "227.0.9";
package/dist/esm/ui/ContextPanel/index.js CHANGED
@@ -13,6 +13,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
13
13
  import React from 'react';
14
14
  import { injectIntl } from 'react-intl';
15
15
  import Transition from 'react-transition-group/Transition';
16
+ import { getDocument } from '@atlaskit/browser-apis';
16
17
  import { ContextPanelConsumer } from '@atlaskit/editor-common/context-panel';
17
18
  import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
18
19
  import { contextPanelMessages } from '@atlaskit/editor-common/messages';
@@ -47,9 +48,33 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
47
48
  _defineProperty(_this, "handleTransitionExited", function () {
48
49
  _this.unsetPluginContent();
49
50
  });
50
- _defineProperty(_this, "focusEditor", function () {
51
- var _editorAPI$core;
51
+ /**
52
+ * Returns focus to the editor when the panel starts closing, so keyboard users
53
+ * are not left with focus on an element that is about to disappear.
54
+ *
55
+ * Skipped when focus is already on a live element *outside* the exiting panel:
56
+ * that means the consumer has restored focus itself (e.g. to the button that
57
+ * opened the panel, per the WAI-ARIA dialog pattern), and overriding it would
58
+ * strand keyboard and screen-reader users in the editor.
59
+ *
60
+ * @param node The exiting panel content, as passed by `Transition`'s `onExiting`.
61
+ */
62
+ _defineProperty(_this, "focusEditor", function (node) {
63
+ var _node$contains, _editorAPI$core;
52
64
  var editorAPI = _this.props.editorAPI;
65
+
66
+ // `node` can be null here: consumers often clear the panel's children in the
67
+ // same update that hides it, so `Transition` has no DOM node to hand us. Treat
68
+ // that as "focus is not inside the panel" and rely on the active element alone.
69
+ //
70
+ // `Element` rather than `HTMLElement`: focusable SVG elements (e.g. an
71
+ // SVG-based trigger button) are valid focus targets but are not HTMLElements.
72
+ var activeDocument = getDocument();
73
+ var activeElement = activeDocument === null || activeDocument === void 0 ? void 0 : activeDocument.activeElement;
74
+ var focusHeldOutsidePanel = !!activeDocument && activeElement instanceof Element && activeElement !== activeDocument.body && activeElement.isConnected && !((_node$contains = node === null || node === void 0 ? void 0 : node.contains(activeElement)) !== null && _node$contains !== void 0 ? _node$contains : false);
75
+ if (focusHeldOutsidePanel) {
76
+ return;
77
+ }
53
78
  editorAPI === null || editorAPI === void 0 || (_editorAPI$core = editorAPI.core) === null || _editorAPI$core === void 0 || _editorAPI$core.actions.focus({
54
79
  scrollIntoView: false
55
80
  });
package/dist/esm/version-wrapper.js CHANGED
@@ -1,3 +1,3 @@
1
1
  export var name = "@atlaskit/editor-core";
2
2
  // eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
3
- export var version = "227.0.8";
3
+ export var version = "227.0.9";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-core",
3
- "version": "227.0.9",
3
+ "version": "227.1.0",
4
4
  "description": "A package contains Atlassian editor core functionality",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -43,6 +43,7 @@
43
43
  "@atlaskit/analytics-namespaced-context": "^8.2.0",
44
44
  "@atlaskit/analytics-next": "^12.5.0",
45
45
  "@atlaskit/analytics-next-stable-react-context": "1.0.1",
46
+ "@atlaskit/browser-apis": "^1.2.0",
46
47
  "@atlaskit/button": "^25.3.0",
47
48
  "@atlaskit/css": "^1.1.0",
48
49
  "@atlaskit/editor-json-transformer": "^9.8.0",
@@ -136,8 +137,8 @@
136
137
  "@atlaskit/editor-plugin-text-color": "^17.0.0",
137
138
  "@atlaskit/editor-plugin-toolbar-lists-indentation": "^18.0.0",
138
139
  "@atlaskit/editor-plugin-track-changes": "^16.0.0",
139
- "@atlaskit/editor-synced-block-provider": "^13.1.0",
140
- "@atlaskit/editor-synced-block-renderer": "^15.0.0",
140
+ "@atlaskit/editor-synced-block-provider": "^13.2.0",
141
+ "@atlaskit/editor-synced-block-renderer": "^15.1.0",
141
142
  "@atlaskit/editor-test-helpers": "workspace:^",
142
143
  "@atlaskit/form": "^17.2.0",
143
144
  "@atlaskit/link-provider": "^5.6.0",