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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-quick-insert
 
+## 5.0.3
+
+### Patch Changes
+
+- [`ed4268ebeec91`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ed4268ebeec91) -
+  Hydration fixes for quick insert plugin
+- Updated dependencies
+
+## 5.0.2
+
+### Patch Changes
+
+- [`820a427f6f09e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/820a427f6f09e) -
+  ENGHEALTH-28871 fix modal element browser accessibility focus violations
+- Updated dependencies
+
 ## 5.0.1
 
 ### Patch Changes

package/dist/cjs/quickInsertPlugin.js

@@ -11,12 +11,14 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
 var _showMoreHorizontalEditorMore = _interopRequireDefault(require("@atlaskit/icon/core/migration/show-more-horizontal--editor-more"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("./pm-plugins/commands");
 var _pluginKey = require("./pm-plugins/plugin-key");
@@ -86,6 +88,9 @@ var quickInsertPlugin = exports.quickInsertPlugin = function quickInsertPlugin(_
     },
     contentComponent: function contentComponent(_ref5) {
       var editorView = _ref5.editorView;
+      if (!editorView || (0, _expValEquals.expValEquals)('platform_editor_hydratable_ui', 'isEnabled', true) && (0, _coreUtils.isSSR)()) {
+        return null;
+      }
       if (options !== null && options !== void 0 && options.enableElementBrowser) {
         return /*#__PURE__*/_react.default.createElement(_ModalElementBrowser.default, {
           editorView: editorView,

package/dist/cjs/ui/ModalElementBrowser/ModalElementBrowser.js

@@ -15,6 +15,7 @@ var _elementBrowser = require("@atlaskit/editor-common/element-browser");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/question-circle"));
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _categories = require("./categories");
 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) {
     });
   }, [onInsertItem, selectedItem, helpUrl, intl]);
 
+  // remove when cleaning up platform_editor_modal_element_browser_a11y
   // Since Modal uses stackIndex it's shouldCloseOnEscapePress prop doesn't work.
   var onKeyDown = (0, _react.useCallback)(function (e) {
     if (e.key === 'Escape') {
@@ -97,31 +99,42 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
       emptyStateHandler: props.emptyStateHandler
     }));
   }, [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler]);
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
-    (0, _react2.jsx)("div", {
-      "data-editor-popup": true,
-      onClick: onModalClick,
-      onKeyDown: onKeyDown
-    }, (0, _react2.jsx)(_modalDialog.ModalTransition, null, props.isOpen && (0, _react2.jsx)(_modalDialog.default, {
-      testId: "element-browser-modal-dialog",
-      stackIndex: 0,
-      key: "element-browser-modal",
-      onClose: props.onClose,
-      onCloseComplete: props.onCloseComplete,
-      height: "664px",
-      width: "x-large",
-      autoFocus: false,
-      shouldReturnFocus: props.shouldReturnFocus
-      // defaults to true and doesn't work along with stackIndex=1.
-      // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
-      ,
-      shouldCloseOnEscapePress: false
-    }, (0, _react2.jsx)(RenderBody, null), (0, _react2.jsx)(RenderFooter, null))))
-  );
+  return (0, _platformFeatureFlags.fg)('platform_editor_modal_element_browser_a11y') ? (0, _react2.jsx)("div", {
+    "data-editor-popup": true
+  }, (0, _react2.jsx)(_modalDialog.ModalTransition, null, props.isOpen && (0, _react2.jsx)(_modalDialog.default, {
+    testId: "element-browser-modal-dialog",
+    stackIndex: 0,
+    key: "element-browser-modal",
+    onClose: props.onClose,
+    onCloseComplete: props.onCloseComplete,
+    height: "664px",
+    width: "x-large",
+    shouldReturnFocus: props.shouldReturnFocus
+  }, (0, _react2.jsx)(RenderBody, null), (0, _react2.jsx)(RenderFooter, null)))) :
+  // eslint-disable-next-line jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
+  (0, _react2.jsx)("div", {
+    "data-editor-popup": true,
+    onClick: onModalClick,
+    onKeyDown: onKeyDown
+  }, (0, _react2.jsx)(_modalDialog.ModalTransition, null, props.isOpen && (0, _react2.jsx)(_modalDialog.default, {
+    testId: "element-browser-modal-dialog",
+    stackIndex: 0,
+    key: "element-browser-modal",
+    onClose: props.onClose,
+    onCloseComplete: props.onCloseComplete,
+    height: "664px",
+    width: "x-large",
+    autoFocus: false,
+    shouldReturnFocus: props.shouldReturnFocus
+    // defaults to true and doesn't work along with stackIndex=1.
+    // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
+    ,
+    shouldCloseOnEscapePress: false
+  }, (0, _react2.jsx)(RenderBody, null), (0, _react2.jsx)(RenderFooter, null))));
 };
 ModalElementBrowser.displayName = 'ModalElementBrowser';
 
+// remove when cleaning up platform_editor_modal_element_browser_a11y
 // Prevent ModalElementBrowser click propagation through to the editor.
 var onModalClick = function onModalClick(e) {
   return e.stopPropagation();

package/dist/es2019/quickInsertPlugin.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { useIntl } from 'react-intl-next';
+import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { memoProcessQuickInsertItems } from '@atlaskit/editor-common/quick-insert';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/migration/show-more-horizontal--editor-more';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createInsertItem, openElementBrowserModal } from './pm-plugins/commands';
 import { pluginKey } from './pm-plugins/plugin-key';
@@ -76,6 +78,9 @@ export const quickInsertPlugin = ({
     contentComponent({
       editorView
     }) {
+      if (!editorView || expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && isSSR()) {
+        return null;
+      }
       if (options !== null && options !== void 0 && options.enableElementBrowser) {
         return /*#__PURE__*/React.createElement(ModalElementBrowser, {
           editorView: editorView,

package/dist/es2019/ui/ModalElementBrowser/ModalElementBrowser.js

@@ -12,6 +12,7 @@ import { ElementBrowser } from '@atlaskit/editor-common/element-browser';
 import { messages } from '@atlaskit/editor-common/quick-insert';
 import QuestionCircleIcon from '@atlaskit/icon/core/migration/question-circle';
 import Modal, { ModalTransition, useModal } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N0 } from '@atlaskit/theme/colors';
 import { getCategories } from './categories';
 export const MODAL_WRAPPER_PADDING = 16;
@@ -61,6 +62,7 @@ const ModalElementBrowser = props => {
     beforeElement: helpUrl ? HelpLink(helpUrl, intl.formatMessage(messages.help)) : undefined
   }), [onInsertItem, selectedItem, helpUrl, intl]);
 
+  // remove when cleaning up platform_editor_modal_element_browser_a11y
   // Since Modal uses stackIndex it's shouldCloseOnEscapePress prop doesn't work.
   const onKeyDown = useCallback(e => {
     if (e.key === 'Escape') {
@@ -79,31 +81,42 @@ const ModalElementBrowser = props => {
     onInsertItem: onInsertItem,
     emptyStateHandler: props.emptyStateHandler
   })), [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler]);
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
-    jsx("div", {
-      "data-editor-popup": true,
-      onClick: onModalClick,
-      onKeyDown: onKeyDown
-    }, jsx(ModalTransition, null, props.isOpen && jsx(Modal, {
-      testId: "element-browser-modal-dialog",
-      stackIndex: 0,
-      key: "element-browser-modal",
-      onClose: props.onClose,
-      onCloseComplete: props.onCloseComplete,
-      height: "664px",
-      width: "x-large",
-      autoFocus: false,
-      shouldReturnFocus: props.shouldReturnFocus
-      // defaults to true and doesn't work along with stackIndex=1.
-      // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
-      ,
-      shouldCloseOnEscapePress: false
-    }, jsx(RenderBody, null), jsx(RenderFooter, null))))
-  );
+  return fg('platform_editor_modal_element_browser_a11y') ? jsx("div", {
+    "data-editor-popup": true
+  }, jsx(ModalTransition, null, props.isOpen && jsx(Modal, {
+    testId: "element-browser-modal-dialog",
+    stackIndex: 0,
+    key: "element-browser-modal",
+    onClose: props.onClose,
+    onCloseComplete: props.onCloseComplete,
+    height: "664px",
+    width: "x-large",
+    shouldReturnFocus: props.shouldReturnFocus
+  }, jsx(RenderBody, null), jsx(RenderFooter, null)))) :
+  // eslint-disable-next-line jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
+  jsx("div", {
+    "data-editor-popup": true,
+    onClick: onModalClick,
+    onKeyDown: onKeyDown
+  }, jsx(ModalTransition, null, props.isOpen && jsx(Modal, {
+    testId: "element-browser-modal-dialog",
+    stackIndex: 0,
+    key: "element-browser-modal",
+    onClose: props.onClose,
+    onCloseComplete: props.onCloseComplete,
+    height: "664px",
+    width: "x-large",
+    autoFocus: false,
+    shouldReturnFocus: props.shouldReturnFocus
+    // defaults to true and doesn't work along with stackIndex=1.
+    // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
+    ,
+    shouldCloseOnEscapePress: false
+  }, jsx(RenderBody, null), jsx(RenderFooter, null))));
 };
 ModalElementBrowser.displayName = 'ModalElementBrowser';
 
+// remove when cleaning up platform_editor_modal_element_browser_a11y
 // Prevent ModalElementBrowser click propagation through to the editor.
 const onModalClick = e => e.stopPropagation();
 const Footer = ({

package/dist/esm/quickInsertPlugin.js

@@ -6,12 +6,14 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 import React from 'react';
 import { useIntl } from 'react-intl-next';
+import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { memoProcessQuickInsertItems } from '@atlaskit/editor-common/quick-insert';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
 import ShowMoreHorizontalIcon from '@atlaskit/icon/core/migration/show-more-horizontal--editor-more';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createInsertItem, openElementBrowserModal as _openElementBrowserModal } from './pm-plugins/commands';
 import { pluginKey } from './pm-plugins/plugin-key';
@@ -79,6 +81,9 @@ export var quickInsertPlugin = function quickInsertPlugin(_ref) {
     },
     contentComponent: function contentComponent(_ref5) {
       var editorView = _ref5.editorView;
+      if (!editorView || expValEquals('platform_editor_hydratable_ui', 'isEnabled', true) && isSSR()) {
+        return null;
+      }
       if (options !== null && options !== void 0 && options.enableElementBrowser) {
         return /*#__PURE__*/React.createElement(ModalElementBrowser, {
           editorView: editorView,

package/dist/esm/ui/ModalElementBrowser/ModalElementBrowser.js

@@ -13,6 +13,7 @@ import { ElementBrowser } from '@atlaskit/editor-common/element-browser';
 import { messages } from '@atlaskit/editor-common/quick-insert';
 import QuestionCircleIcon from '@atlaskit/icon/core/migration/question-circle';
 import Modal, { ModalTransition, useModal } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N0 } from '@atlaskit/theme/colors';
 import { getCategories } from './categories';
 export var MODAL_WRAPPER_PADDING = 16;
@@ -67,6 +68,7 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
     });
   }, [onInsertItem, selectedItem, helpUrl, intl]);
 
+  // remove when cleaning up platform_editor_modal_element_browser_a11y
   // Since Modal uses stackIndex it's shouldCloseOnEscapePress prop doesn't work.
   var onKeyDown = useCallback(function (e) {
     if (e.key === 'Escape') {
@@ -87,31 +89,42 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
       emptyStateHandler: props.emptyStateHandler
     }));
   }, [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler]);
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
-    jsx("div", {
-      "data-editor-popup": true,
-      onClick: onModalClick,
-      onKeyDown: onKeyDown
-    }, jsx(ModalTransition, null, props.isOpen && jsx(Modal, {
-      testId: "element-browser-modal-dialog",
-      stackIndex: 0,
-      key: "element-browser-modal",
-      onClose: props.onClose,
-      onCloseComplete: props.onCloseComplete,
-      height: "664px",
-      width: "x-large",
-      autoFocus: false,
-      shouldReturnFocus: props.shouldReturnFocus
-      // defaults to true and doesn't work along with stackIndex=1.
-      // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
-      ,
-      shouldCloseOnEscapePress: false
-    }, jsx(RenderBody, null), jsx(RenderFooter, null))))
-  );
+  return fg('platform_editor_modal_element_browser_a11y') ? jsx("div", {
+    "data-editor-popup": true
+  }, jsx(ModalTransition, null, props.isOpen && jsx(Modal, {
+    testId: "element-browser-modal-dialog",
+    stackIndex: 0,
+    key: "element-browser-modal",
+    onClose: props.onClose,
+    onCloseComplete: props.onCloseComplete,
+    height: "664px",
+    width: "x-large",
+    shouldReturnFocus: props.shouldReturnFocus
+  }, jsx(RenderBody, null), jsx(RenderFooter, null)))) :
+  // eslint-disable-next-line jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
+  jsx("div", {
+    "data-editor-popup": true,
+    onClick: onModalClick,
+    onKeyDown: onKeyDown
+  }, jsx(ModalTransition, null, props.isOpen && jsx(Modal, {
+    testId: "element-browser-modal-dialog",
+    stackIndex: 0,
+    key: "element-browser-modal",
+    onClose: props.onClose,
+    onCloseComplete: props.onCloseComplete,
+    height: "664px",
+    width: "x-large",
+    autoFocus: false,
+    shouldReturnFocus: props.shouldReturnFocus
+    // defaults to true and doesn't work along with stackIndex=1.
+    // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
+    ,
+    shouldCloseOnEscapePress: false
+  }, jsx(RenderBody, null), jsx(RenderFooter, null))));
 };
 ModalElementBrowser.displayName = 'ModalElementBrowser';
 
+// remove when cleaning up platform_editor_modal_element_browser_a11y
 // Prevent ModalElementBrowser click propagation through to the editor.
 var onModalClick = function onModalClick(e) {
   return e.stopPropagation();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-quick-insert",
-	"version": "5.0.1",
+	"version": "5.0.3",
 	"description": "Quick insert plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,20 +31,20 @@
 	"dependencies": {
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/editor-plugin-connectivity": "^5.0.0",
-		"@atlaskit/editor-plugin-metrics": "^6.0.0",
-		"@atlaskit/editor-plugin-type-ahead": "^5.0.0",
+		"@atlaskit/editor-plugin-metrics": "^6.3.0",
+		"@atlaskit/editor-plugin-type-ahead": "^5.3.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/icon": "^28.1.0",
-		"@atlaskit/modal-dialog": "^14.3.0",
+		"@atlaskit/icon": "^28.3.0",
+		"@atlaskit/modal-dialog": "^14.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^12.10.0",
+		"@atlaskit/tmp-editor-statsig": "^12.30.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^109.1.0",
+		"@atlaskit/editor-common": "^109.16.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -103,6 +103,9 @@
 		},
 		"platform_editor_controls_fix_view_more_in_comment": {
 			"type": "boolean"
+		},
+		"platform_editor_modal_element_browser_a11y": {
+			"type": "boolean"
 		}
 	}
 }