@atlaskit/editor-plugin-quick-insert 5.0.1 → 5.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/quickInsertPlugin.js +3 -0
  3. package/dist/cjs/ui/ModalElementBrowser/ModalElementBrowser.js +35 -22
  4. package/dist/es2019/quickInsertPlugin.js +3 -0
  5. package/dist/es2019/ui/ModalElementBrowser/ModalElementBrowser.js +35 -22
  6. package/dist/esm/quickInsertPlugin.js +3 -0
  7. package/dist/esm/ui/ModalElementBrowser/ModalElementBrowser.js +35 -22
  8. package/package.json +10 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-quick-insert
2
2
 
3
+ ## 5.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [`820a427f6f09e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/820a427f6f09e) -
8
+ ENGHEALTH-28871 fix modal element browser accessibility focus violations
9
+ - Updated dependencies
10
+
3
11
  ## 5.0.1
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/quickInsertPlugin.js CHANGED
@@ -86,6 +86,9 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
86
86
  },
87
87
  contentComponent: function contentComponent(_ref5) {
88
88
  var editorView = _ref5.editorView;
89
+ if (!editorView) {
90
+ return null;
91
+ }
89
92
  if (options !== null && options !== void 0 && options.enableElementBrowser) {
90
93
  return /*#__PURE__*/_react.default.createElement(_ModalElementBrowser.default, {
91
94
  editorView: editorView,
package/dist/cjs/ui/ModalElementBrowser/ModalElementBrowser.js CHANGED
@@ -15,6 +15,7 @@ var _elementBrowser = require("@atlaskit/editor-common/element-browser");
15
15
  var _quickInsert = require("@atlaskit/editor-common/quick-insert");
16
16
  var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/question-circle"));
17
17
  var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
18
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
19
  var _colors = require("@atlaskit/theme/colors");
19
20
  var _categories = require("./categories");
20
21
  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); }
@@ -77,6 +78,7 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
77
78
  });
78
79
  }, [onInsertItem, selectedItem, helpUrl, intl]);
79
80
 
81
+ // remove when cleaning up platform_editor_modal_element_browser_a11y
80
82
  // Since Modal uses stackIndex it's shouldCloseOnEscapePress prop doesn't work.
81
83
  var onKeyDown = (0, _react.useCallback)(function (e) {
82
84
  if (e.key === 'Escape') {
@@ -97,31 +99,42 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
97
99
  emptyStateHandler: props.emptyStateHandler
98
100
  }));
99
101
  }, [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler]);
100
- return (
101
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
102
- (0, _react2.jsx)("div", {
103
- "data-editor-popup": true,
104
- onClick: onModalClick,
105
- onKeyDown: onKeyDown
106
- }, (0, _react2.jsx)(_modalDialog.ModalTransition, null, props.isOpen && (0, _react2.jsx)(_modalDialog.default, {
107
- testId: "element-browser-modal-dialog",
108
- stackIndex: 0,
109
- key: "element-browser-modal",
110
- onClose: props.onClose,
111
- onCloseComplete: props.onCloseComplete,
112
- height: "664px",
113
- width: "x-large",
114
- autoFocus: false,
115
- shouldReturnFocus: props.shouldReturnFocus
116
- // defaults to true and doesn't work along with stackIndex=1.
117
- // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
118
- ,
119
- shouldCloseOnEscapePress: false
120
- }, (0, _react2.jsx)(RenderBody, null), (0, _react2.jsx)(RenderFooter, null))))
121
- );
102
+ return (0, _platformFeatureFlags.fg)('platform_editor_modal_element_browser_a11y') ? (0, _react2.jsx)("div", {
103
+ "data-editor-popup": true
104
+ }, (0, _react2.jsx)(_modalDialog.ModalTransition, null, props.isOpen && (0, _react2.jsx)(_modalDialog.default, {
105
+ testId: "element-browser-modal-dialog",
106
+ stackIndex: 0,
107
+ key: "element-browser-modal",
108
+ onClose: props.onClose,
109
+ onCloseComplete: props.onCloseComplete,
110
+ height: "664px",
111
+ width: "x-large",
112
+ shouldReturnFocus: props.shouldReturnFocus
113
+ }, (0, _react2.jsx)(RenderBody, null), (0, _react2.jsx)(RenderFooter, null)))) :
114
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
115
+ (0, _react2.jsx)("div", {
116
+ "data-editor-popup": true,
117
+ onClick: onModalClick,
118
+ onKeyDown: onKeyDown
119
+ }, (0, _react2.jsx)(_modalDialog.ModalTransition, null, props.isOpen && (0, _react2.jsx)(_modalDialog.default, {
120
+ testId: "element-browser-modal-dialog",
121
+ stackIndex: 0,
122
+ key: "element-browser-modal",
123
+ onClose: props.onClose,
124
+ onCloseComplete: props.onCloseComplete,
125
+ height: "664px",
126
+ width: "x-large",
127
+ autoFocus: false,
128
+ shouldReturnFocus: props.shouldReturnFocus
129
+ // defaults to true and doesn't work along with stackIndex=1.
130
+ // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
131
+ ,
132
+ shouldCloseOnEscapePress: false
133
+ }, (0, _react2.jsx)(RenderBody, null), (0, _react2.jsx)(RenderFooter, null))));
122
134
  };
123
135
  ModalElementBrowser.displayName = 'ModalElementBrowser';
124
136
 
137
+ // remove when cleaning up platform_editor_modal_element_browser_a11y
125
138
  // Prevent ModalElementBrowser click propagation through to the editor.
126
139
  var onModalClick = function onModalClick(e) {
127
140
  return e.stopPropagation();
package/dist/es2019/quickInsertPlugin.js CHANGED
@@ -76,6 +76,9 @@ export const quickInsertPlugin = ({
76
76
  contentComponent({
77
77
  editorView
78
78
  }) {
79
+ if (!editorView) {
80
+ return null;
81
+ }
79
82
  if (options !== null && options !== void 0 && options.enableElementBrowser) {
80
83
  return /*#__PURE__*/React.createElement(ModalElementBrowser, {
81
84
  editorView: editorView,
package/dist/es2019/ui/ModalElementBrowser/ModalElementBrowser.js CHANGED
@@ -12,6 +12,7 @@ import { ElementBrowser } from '@atlaskit/editor-common/element-browser';
12
12
  import { messages } from '@atlaskit/editor-common/quick-insert';
13
13
  import QuestionCircleIcon from '@atlaskit/icon/core/migration/question-circle';
14
14
  import Modal, { ModalTransition, useModal } from '@atlaskit/modal-dialog';
15
+ import { fg } from '@atlaskit/platform-feature-flags';
15
16
  import { N0 } from '@atlaskit/theme/colors';
16
17
  import { getCategories } from './categories';
17
18
  export const MODAL_WRAPPER_PADDING = 16;
@@ -61,6 +62,7 @@ const ModalElementBrowser = props => {
61
62
  beforeElement: helpUrl ? HelpLink(helpUrl, intl.formatMessage(messages.help)) : undefined
62
63
  }), [onInsertItem, selectedItem, helpUrl, intl]);
63
64
 
65
+ // remove when cleaning up platform_editor_modal_element_browser_a11y
64
66
  // Since Modal uses stackIndex it's shouldCloseOnEscapePress prop doesn't work.
65
67
  const onKeyDown = useCallback(e => {
66
68
  if (e.key === 'Escape') {
@@ -79,31 +81,42 @@ const ModalElementBrowser = props => {
79
81
  onInsertItem: onInsertItem,
80
82
  emptyStateHandler: props.emptyStateHandler
81
83
  })), [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler]);
82
- return (
83
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
84
- jsx("div", {
85
- "data-editor-popup": true,
86
- onClick: onModalClick,
87
- onKeyDown: onKeyDown
88
- }, jsx(ModalTransition, null, props.isOpen && jsx(Modal, {
89
- testId: "element-browser-modal-dialog",
90
- stackIndex: 0,
91
- key: "element-browser-modal",
92
- onClose: props.onClose,
93
- onCloseComplete: props.onCloseComplete,
94
- height: "664px",
95
- width: "x-large",
96
- autoFocus: false,
97
- shouldReturnFocus: props.shouldReturnFocus
98
- // defaults to true and doesn't work along with stackIndex=1.
99
- // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
100
- ,
101
- shouldCloseOnEscapePress: false
102
- }, jsx(RenderBody, null), jsx(RenderFooter, null))))
103
- );
84
+ return fg('platform_editor_modal_element_browser_a11y') ? jsx("div", {
85
+ "data-editor-popup": true
86
+ }, jsx(ModalTransition, null, props.isOpen && jsx(Modal, {
87
+ testId: "element-browser-modal-dialog",
88
+ stackIndex: 0,
89
+ key: "element-browser-modal",
90
+ onClose: props.onClose,
91
+ onCloseComplete: props.onCloseComplete,
92
+ height: "664px",
93
+ width: "x-large",
94
+ shouldReturnFocus: props.shouldReturnFocus
95
+ }, jsx(RenderBody, null), jsx(RenderFooter, null)))) :
96
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
97
+ jsx("div", {
98
+ "data-editor-popup": true,
99
+ onClick: onModalClick,
100
+ onKeyDown: onKeyDown
101
+ }, jsx(ModalTransition, null, props.isOpen && jsx(Modal, {
102
+ testId: "element-browser-modal-dialog",
103
+ stackIndex: 0,
104
+ key: "element-browser-modal",
105
+ onClose: props.onClose,
106
+ onCloseComplete: props.onCloseComplete,
107
+ height: "664px",
108
+ width: "x-large",
109
+ autoFocus: false,
110
+ shouldReturnFocus: props.shouldReturnFocus
111
+ // defaults to true and doesn't work along with stackIndex=1.
112
+ // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
113
+ ,
114
+ shouldCloseOnEscapePress: false
115
+ }, jsx(RenderBody, null), jsx(RenderFooter, null))));
104
116
  };
105
117
  ModalElementBrowser.displayName = 'ModalElementBrowser';
106
118
 
119
+ // remove when cleaning up platform_editor_modal_element_browser_a11y
107
120
  // Prevent ModalElementBrowser click propagation through to the editor.
108
121
  const onModalClick = e => e.stopPropagation();
109
122
  const Footer = ({
package/dist/esm/quickInsertPlugin.js CHANGED
@@ -79,6 +79,9 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
79
79
  },
80
80
  contentComponent: function contentComponent(_ref5) {
81
81
  var editorView = _ref5.editorView;
82
+ if (!editorView) {
83
+ return null;
84
+ }
82
85
  if (options !== null && options !== void 0 && options.enableElementBrowser) {
83
86
  return /*#__PURE__*/React.createElement(ModalElementBrowser, {
84
87
  editorView: editorView,
package/dist/esm/ui/ModalElementBrowser/ModalElementBrowser.js CHANGED
@@ -13,6 +13,7 @@ import { ElementBrowser } from '@atlaskit/editor-common/element-browser';
13
13
  import { messages } from '@atlaskit/editor-common/quick-insert';
14
14
  import QuestionCircleIcon from '@atlaskit/icon/core/migration/question-circle';
15
15
  import Modal, { ModalTransition, useModal } from '@atlaskit/modal-dialog';
16
+ import { fg } from '@atlaskit/platform-feature-flags';
16
17
  import { N0 } from '@atlaskit/theme/colors';
17
18
  import { getCategories } from './categories';
18
19
  export var MODAL_WRAPPER_PADDING = 16;
@@ -67,6 +68,7 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
67
68
  });
68
69
  }, [onInsertItem, selectedItem, helpUrl, intl]);
69
70
 
71
+ // remove when cleaning up platform_editor_modal_element_browser_a11y
70
72
  // Since Modal uses stackIndex it's shouldCloseOnEscapePress prop doesn't work.
71
73
  var onKeyDown = useCallback(function (e) {
72
74
  if (e.key === 'Escape') {
@@ -87,31 +89,42 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
87
89
  emptyStateHandler: props.emptyStateHandler
88
90
  }));
89
91
  }, [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler]);
90
- return (
91
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
92
- jsx("div", {
93
- "data-editor-popup": true,
94
- onClick: onModalClick,
95
- onKeyDown: onKeyDown
96
- }, jsx(ModalTransition, null, props.isOpen && jsx(Modal, {
97
- testId: "element-browser-modal-dialog",
98
- stackIndex: 0,
99
- key: "element-browser-modal",
100
- onClose: props.onClose,
101
- onCloseComplete: props.onCloseComplete,
102
- height: "664px",
103
- width: "x-large",
104
- autoFocus: false,
105
- shouldReturnFocus: props.shouldReturnFocus
106
- // defaults to true and doesn't work along with stackIndex=1.
107
- // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
108
- ,
109
- shouldCloseOnEscapePress: false
110
- }, jsx(RenderBody, null), jsx(RenderFooter, null))))
111
- );
92
+ return fg('platform_editor_modal_element_browser_a11y') ? jsx("div", {
93
+ "data-editor-popup": true
94
+ }, jsx(ModalTransition, null, props.isOpen && jsx(Modal, {
95
+ testId: "element-browser-modal-dialog",
96
+ stackIndex: 0,
97
+ key: "element-browser-modal",
98
+ onClose: props.onClose,
99
+ onCloseComplete: props.onCloseComplete,
100
+ height: "664px",
101
+ width: "x-large",
102
+ shouldReturnFocus: props.shouldReturnFocus
103
+ }, jsx(RenderBody, null), jsx(RenderFooter, null)))) :
104
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
105
+ jsx("div", {
106
+ "data-editor-popup": true,
107
+ onClick: onModalClick,
108
+ onKeyDown: onKeyDown
109
+ }, jsx(ModalTransition, null, props.isOpen && jsx(Modal, {
110
+ testId: "element-browser-modal-dialog",
111
+ stackIndex: 0,
112
+ key: "element-browser-modal",
113
+ onClose: props.onClose,
114
+ onCloseComplete: props.onCloseComplete,
115
+ height: "664px",
116
+ width: "x-large",
117
+ autoFocus: false,
118
+ shouldReturnFocus: props.shouldReturnFocus
119
+ // defaults to true and doesn't work along with stackIndex=1.
120
+ // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
121
+ ,
122
+ shouldCloseOnEscapePress: false
123
+ }, jsx(RenderBody, null), jsx(RenderFooter, null))));
112
124
  };
113
125
  ModalElementBrowser.displayName = 'ModalElementBrowser';
114
126
 
127
+ // remove when cleaning up platform_editor_modal_element_browser_a11y
115
128
  // Prevent ModalElementBrowser click propagation through to the editor.
116
129
  var onModalClick = function onModalClick(e) {
117
130
  return e.stopPropagation();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-quick-insert",
3
- "version": "5.0.1",
3
+ "version": "5.0.2",
4
4
  "description": "Quick insert plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -31,20 +31,20 @@
31
31
  "dependencies": {
32
32
  "@atlaskit/button": "^23.4.0",
33
33
  "@atlaskit/editor-plugin-connectivity": "^5.0.0",
34
- "@atlaskit/editor-plugin-metrics": "^6.0.0",
35
- "@atlaskit/editor-plugin-type-ahead": "^5.0.0",
34
+ "@atlaskit/editor-plugin-metrics": "^6.2.0",
35
+ "@atlaskit/editor-plugin-type-ahead": "^5.2.0",
36
36
  "@atlaskit/editor-prosemirror": "7.0.0",
37
- "@atlaskit/icon": "^28.1.0",
38
- "@atlaskit/modal-dialog": "^14.3.0",
37
+ "@atlaskit/icon": "^28.3.0",
38
+ "@atlaskit/modal-dialog": "^14.4.0",
39
39
  "@atlaskit/platform-feature-flags": "^1.1.0",
40
40
  "@atlaskit/theme": "^21.0.0",
41
- "@atlaskit/tmp-editor-statsig": "^12.10.0",
41
+ "@atlaskit/tmp-editor-statsig": "^12.29.0",
42
42
  "@atlaskit/tokens": "^6.3.0",
43
43
  "@babel/runtime": "^7.0.0",
44
44
  "@emotion/react": "^11.7.1"
45
45
  },
46
46
  "peerDependencies": {
47
- "@atlaskit/editor-common": "^109.1.0",
47
+ "@atlaskit/editor-common": "^109.15.0",
48
48
  "react": "^18.2.0",
49
49
  "react-dom": "^18.2.0",
50
50
  "react-intl-next": "npm:react-intl@^5.18.1"
@@ -103,6 +103,9 @@
103
103
  },
104
104
  "platform_editor_controls_fix_view_more_in_comment": {
105
105
  "type": "boolean"
106
+ },
107
+ "platform_editor_modal_element_browser_a11y": {
108
+ "type": "boolean"
106
109
  }
107
110
  }
108
111
  }