@atlaskit/editor-core 178.1.1 → 179.0.0

package/dist/cjs/ui/EditorContext/index.js

@@ -1,56 +1,36 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useEditorContext = exports.default = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _actions = _interopRequireDefault(require("../../actions"));
-
 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); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 var EditorContext = /*#__PURE__*/_react.default.createContext({});
-
 var useEditorContext = function useEditorContext() {
   return _react.default.useContext(EditorContext);
 };
-
 exports.useEditorContext = useEditorContext;
-
 var LegacyEditorContext = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(LegacyEditorContext, _React$Component);
-
   var _super = _createSuper(LegacyEditorContext);
-
   function LegacyEditorContext(props) {
     var _this;
-
     (0, _classCallCheck2.default)(this, LegacyEditorContext);
     _this = _super.call(this, props);
     _this.editorActions = props.editorActions || new _actions.default();
     return _this;
   }
-
   (0, _createClass2.default)(LegacyEditorContext, [{
     key: "getChildContext",
     value: function getChildContext() {
@@ -68,7 +48,6 @@ var LegacyEditorContext = /*#__PURE__*/function (_React$Component) {
   }]);
   return LegacyEditorContext;
 }(_react.default.Component);
-
 exports.default = LegacyEditorContext;
 (0, _defineProperty2.default)(LegacyEditorContext, "childContextTypes", {
   editorActions: _propTypes.default.object

package/dist/cjs/ui/ElementBrowser/ElementBrowser.js

@@ -1,54 +1,33 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _StatelessElementBrowser = _interopRequireDefault(require("./components/StatelessElementBrowser"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 var ElementBrowser = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(ElementBrowser, _PureComponent);
-
   var _super = _createSuper(ElementBrowser);
-
   function ElementBrowser() {
     var _this;
-
     (0, _classCallCheck2.default)(this, ElementBrowser);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       categories: [],
@@ -58,18 +37,17 @@ var ElementBrowser = /*#__PURE__*/function (_PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getCategories", function () {
       var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.fetchItems();
-      return (// NOTE: we fetch all items to determine available categories.
+      return (
+        // NOTE: we fetch all items to determine available categories.
         _this.filterCategories(items, _this.props.categories)
       );
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "filterCategories", function (items) {
       var categories = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var showCategories = _this.props.showCategories;
-
       if (!showCategories) {
         return [];
       }
-
       return categories.filter(function (category) {
         return category.name === 'all' || items.some(function (item) {
           return (item.categories || []).includes(category.name);
@@ -81,7 +59,6 @@ var ElementBrowser = /*#__PURE__*/function (_PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSearch", function (searchTerm) {
       var defaultCategory = _this.props.defaultCategory;
-
       _this.setState({
         searchTerm: searchTerm,
         selectedCategory: defaultCategory
@@ -89,16 +66,15 @@ var ElementBrowser = /*#__PURE__*/function (_PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCategorySelection", function (clickedCategory) {
       var stateCategoryValue = _this.state.selectedCategory;
+
       /**
        * Reset selection if clicked on the same category twice.
        */
-
       if (stateCategoryValue === clickedCategory.name) {
         return _this.setState({
           selectedCategory: _this.props.defaultCategory
         });
       }
-
       _this.setState({
         selectedCategory: clickedCategory.name,
         searchTerm: ''
@@ -106,7 +82,6 @@ var ElementBrowser = /*#__PURE__*/function (_PureComponent) {
     });
     return _this;
   }
-
   (0, _createClass2.default)(ElementBrowser, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -120,9 +95,10 @@ var ElementBrowser = /*#__PURE__*/function (_PureComponent) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       var _this$state = this.state,
-          searchTerm = _this$state.searchTerm,
-          selectedCategory = _this$state.selectedCategory; // Update both items and categories when there's a new getItems
+        searchTerm = _this$state.searchTerm,
+        selectedCategory = _this$state.selectedCategory;
 
+      // Update both items and categories when there's a new getItems
       if (this.props.getItems !== prevProps.getItems) {
         this.setState({
           categories: this.getCategories(),
@@ -138,17 +114,17 @@ var ElementBrowser = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          onInsertItem = _this$props.onInsertItem,
-          onSelectItem = _this$props.onSelectItem,
-          showSearch = _this$props.showSearch,
-          showCategories = _this$props.showCategories,
-          mode = _this$props.mode,
-          emptyStateHandler = _this$props.emptyStateHandler;
+        onInsertItem = _this$props.onInsertItem,
+        onSelectItem = _this$props.onSelectItem,
+        showSearch = _this$props.showSearch,
+        showCategories = _this$props.showCategories,
+        mode = _this$props.mode,
+        emptyStateHandler = _this$props.emptyStateHandler;
       var _this$state2 = this.state,
-          categories = _this$state2.categories,
-          searchTerm = _this$state2.searchTerm,
-          selectedCategory = _this$state2.selectedCategory,
-          items = _this$state2.items;
+        categories = _this$state2.categories,
+        searchTerm = _this$state2.searchTerm,
+        selectedCategory = _this$state2.selectedCategory,
+        items = _this$state2.items;
       return /*#__PURE__*/_react.default.createElement(_StatelessElementBrowser.default, {
         items: items,
         categories: categories,
@@ -167,7 +143,6 @@ var ElementBrowser = /*#__PURE__*/function (_PureComponent) {
   }]);
   return ElementBrowser;
 }(_react.PureComponent);
-
 exports.default = ElementBrowser;
 (0, _defineProperty2.default)(ElementBrowser, "defaultProps", {
   defaultCategory: 'all',

package/dist/cjs/ui/ElementBrowser/InsertMenu.js

@@ -1,64 +1,40 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _menu = require("@atlaskit/menu");
-
 var _theme = require("@atlaskit/theme");
-
 var _components = require("@atlaskit/theme/components");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _assets = require("../../plugins/quick-insert/assets");
-
 var _withOuterListeners = _interopRequireDefault(require("../with-outer-listeners"));
-
 var _WithPluginState = _interopRequireDefault(require("../WithPluginState"));
-
 var _pluginKey = require("../../plugins/quick-insert/plugin-key");
-
 var _search = require("../../plugins/quick-insert/search");
-
 var _commands = require("../../plugins/quick-insert/commands");
-
 var _ElementBrowserLoader = _interopRequireDefault(require("./components/ElementBrowserLoader"));
-
 var _constants = require("./constants");
-
 var _excluded = ["children"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 var InsertMenu = function InsertMenu(_ref) {
   var editorView = _ref.editorView,
-      dropdownItems = _ref.dropdownItems,
-      showElementBrowserLink = _ref.showElementBrowserLink,
-      onInsert = _ref.onInsert,
-      toggleVisiblity = _ref.toggleVisiblity;
-
+    dropdownItems = _ref.dropdownItems,
+    showElementBrowserLink = _ref.showElementBrowserLink,
+    onInsert = _ref.onInsert,
+    toggleVisiblity = _ref.toggleVisiblity;
   var _useState = (0, _react.useState)(0),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      itemCount = _useState2[0],
-      setItemCount = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    itemCount = _useState2[0],
+    setItemCount = _useState2[1];
   var transform = (0, _react.useCallback)(function (item) {
     return {
       title: item.content,
@@ -83,23 +59,19 @@ var InsertMenu = function InsertMenu(_ref) {
   var viewMoreItem = showElementBrowserLink && quickInsertDropdownItems.pop();
   var onInsertItem = (0, _react.useCallback)(function (item) {
     toggleVisiblity();
-
     if (!editorView.hasFocus()) {
       editorView.focus();
     }
-
     (0, _commands.insertItem)(item)(editorView.state, editorView.dispatch);
   }, [editorView, toggleVisiblity]);
   var getItems = (0, _react.useCallback)(function (quickInsertState) {
     return function (query, category) {
       var result;
-
       if (query) {
         result = (0, _search.searchQuickInsertItems)(quickInsertState, {})(query, category);
       } else {
         result = quickInsertDropdownItems.concat((0, _search.getFeaturedQuickInsertItems)(quickInsertState, {})());
       }
-
       setItemCount(result.length);
       return result;
     };
@@ -115,7 +87,8 @@ var InsertMenu = function InsertMenu(_ref) {
       emptyStateHandler: quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.emptyStateHandler,
       onInsertItem: onInsertItem,
       showSearch: true,
-      showCategories: false // On page resize we want the InlineElementBrowser to show updated tools/overflow items
+      showCategories: false
+      // On page resize we want the InlineElementBrowser to show updated tools/overflow items
       ,
       key: quickInsertDropdownItems.length
     }));
@@ -133,7 +106,6 @@ var InsertMenu = function InsertMenu(_ref) {
     item: viewMoreItem
   }));
 };
-
 var ViewMore = function ViewMore(_ref3) {
   var item = _ref3.item;
   return (0, _react2.jsx)(_menu.Section, {
@@ -144,12 +116,12 @@ var ViewMore = function ViewMore(_ref3) {
       css: itemBefore
     }, item.icon()),
     "aria-describedby": item.title,
-    "data-testid": "view-more-elements-item" // @ts-ignore Overriding Menu styles is not supported
+    "data-testid": "view-more-elements-item"
+    // @ts-ignore Overriding Menu styles is not supported
     ,
     css: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n          padding: 0px 12px;\n        "])))
   }, item.title));
 };
-
 var getSvgIconForItem = function getSvgIconForItem(_ref4) {
   var name = _ref4.name;
   var Icon = {
@@ -166,16 +138,13 @@ var getSvgIconForItem = function getSvgIconForItem(_ref4) {
     label: ""
   }) : undefined;
 };
-
 var getInsertMenuHeight = function getInsertMenuHeight(_ref5) {
   var itemCount = _ref5.itemCount;
   // Figure based on visuals to exclude the searchbar, padding/margin, and the ViewMore item.
   var EXTRA_SPACE_EXCLUDING_ELEMENTLIST = 112;
-
   if (itemCount > 0 && itemCount < 6) {
     return itemCount * _constants.ELEMENT_ITEM_HEIGHT + EXTRA_SPACE_EXCLUDING_ELEMENTLIST;
   }
-
   return 560; // For showing 6 Elements.
 };
 
@@ -187,18 +156,15 @@ var insertMenuWrapper = function insertMenuWrapper(theme, itemCount) {
     dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
   })(theme), (0, _theme.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ",\n    0 2px 1px ").concat(_colors.N30A, ",\n    0 0 20px -6px ").concat(_colors.N60A), ")"));
 };
-
 var itemBefore = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 40px;\n  height: 40px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: ", "px;\n"])), (0, _theme.gridSize)() / 2);
 var flexWrapperStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  box-sizing: border-box;\n  overflow: hidden;\n"])));
-
 var FlexWrapper = function FlexWrapper(props) {
   var children = props.children,
-      divProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+    divProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: flexWrapperStyles
   }, divProps), children);
 };
-
 var ElementBrowserWrapper = (0, _withOuterListeners.default)(FlexWrapper);
 var _default = InsertMenu;
 exports.default = _default;

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

@@ -1,50 +1,29 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _reactIntlNext = require("react-intl-next");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _components = require("@atlaskit/theme/components");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
-
 var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/question-circle"));
-
 var _ElementBrowserLoader = _interopRequireDefault(require("./components/ElementBrowserLoader"));
-
 var _categories = require("./categories");
-
 var _constants2 = require("./constants");
-
 var _messages = require("./messages");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var actions = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  margin: 0 -4px;\n"])));
 var actionItem = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 0 auto;\n  margin: 0 4px;\n"])));
 var wrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n  padding: ", "px ", "px 0 10px;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", "px;\n"])), _constants2.MODAL_WRAPPER_PADDING, _constants2.MODAL_WRAPPER_PADDING, (0, _components.themed)({
@@ -52,15 +31,13 @@ var wrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _tagg
   dark: "var(--ds-surface-overlay, ".concat(_colors.DN50, ")")
 })(), (0, _constants.borderRadius)());
 var modalFooter = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: ", "px;\n\n  position: relative;\n  align-items: center;\n  justify-content: space-between;\n"])), _constants2.MODAL_WRAPPER_PADDING);
-
 var ModalElementBrowser = function ModalElementBrowser(props) {
   var _useState = (0, _react.useState)(),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      selectedItem = _useState2[0],
-      setSelectedItem = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    selectedItem = _useState2[0],
+    setSelectedItem = _useState2[1];
   var helpUrl = props.helpUrl,
-      intl = props.intl;
+    intl = props.intl;
   var onSelectItem = (0, _react.useCallback)(function (item) {
     setSelectedItem(item);
   }, [setSelectedItem]);
@@ -74,8 +51,9 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
       },
       beforeElement: helpUrl ? HelpLink(helpUrl, intl.formatMessage(_messages.messages.help)) : undefined
     });
-  }, [onInsertItem, selectedItem, helpUrl, intl]); // Since Modal uses stackIndex it's shouldCloseOnEscapePress prop doesn't work.
+  }, [onInsertItem, selectedItem, helpUrl, intl]);
 
+  // Since Modal uses stackIndex it's shouldCloseOnEscapePress prop doesn't work.
   var onKeyDown = (0, _react.useCallback)(function (e) {
     if (e.key === 'Escape') {
       props.onClose();
@@ -106,26 +84,24 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
     onClose: props.onClose,
     height: "664px",
     width: "x-large",
-    autoFocus: false // defaults to true and doesn't work along with stackIndex=1.
+    autoFocus: false
+    // 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';
 
-ModalElementBrowser.displayName = 'ModalElementBrowser'; // Prevent ModalElementBrowser click propagation through to the editor.
-
+// Prevent ModalElementBrowser click propagation through to the editor.
 var onModalClick = function onModalClick(e) {
   return e.stopPropagation();
 };
-
 var Footer = function Footer(_ref) {
   var onInsert = _ref.onInsert,
-      beforeElement = _ref.beforeElement;
-
+    beforeElement = _ref.beforeElement;
   var _useModal = (0, _modalDialog.useModal)(),
-      onClose = _useModal.onClose;
-
+    onClose = _useModal.onClose;
   return (0, _react2.jsx)("div", {
     css: modalFooter
   }, beforeElement ? beforeElement : (0, _react2.jsx)("span", null), (0, _react2.jsx)("div", {
@@ -144,7 +120,6 @@ var Footer = function Footer(_ref) {
     testId: "ModalElementBrowser__close-button"
   }, "Close"))));
 };
-
 var HelpLink = function HelpLink(url, helpText) {
   return (0, _react2.jsx)(_customThemeButton.default, {
     iconBefore: (0, _react2.jsx)(_questionCircle.default, {
@@ -157,7 +132,5 @@ var HelpLink = function HelpLink(url, helpText) {
     testId: "ModalElementBrowser__help-button"
   }, helpText);
 };
-
 var _default = (0, _reactIntlNext.injectIntl)(ModalElementBrowser);
-
 exports.default = _default;

package/dist/cjs/ui/ElementBrowser/categories.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getCategories = getCategories;
-
 var _reactIntlNext = require("react-intl-next");
-
 function getCategories(intl) {
   return [{
     title: intl.formatMessage(messages.all),
@@ -43,7 +41,6 @@ function getCategories(intl) {
     name: 'development'
   }];
 }
-
 var messages = (0, _reactIntlNext.defineMessages)({
   all: {
     id: 'fabric.editor.elementbrowser.categorylist.category-all',

package/dist/cjs/ui/ElementBrowser/components/CategoryList.js

@@ -1,63 +1,39 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = require("@emotion/react");
-
 var _react2 = _interopRequireWildcard(require("react"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-
 var _analyticsNext = require("@atlaskit/analytics-next");
-
 var _constants = require("../constants");
-
 var _useFocus = _interopRequireDefault(require("../hooks/use-focus"));
-
 var _analytics = require("../../../plugins/analytics");
-
 var _templateObject;
-
 var _excluded = ["categories"],
-    _excluded2 = ["buttonStyles"];
-
+  _excluded2 = ["buttonStyles"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function CategoryList(_ref) {
   var _ref$categories = _ref.categories,
-      categories = _ref$categories === void 0 ? [] : _ref$categories,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    categories = _ref$categories === void 0 ? [] : _ref$categories,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _React$useState = _react2.default.useState(null),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      focusedCategoryIndex = _React$useState2[0],
-      setFocusedCategoryIndex = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    focusedCategoryIndex = _React$useState2[0],
+    setFocusedCategoryIndex = _React$useState2[1];
   return (0, _react.jsx)(_react2.Fragment, null, categories.map(function (category, index) {
     return (0, _react.jsx)(CategoryListItem, (0, _extends2.default)({
       key: category.title,
@@ -68,28 +44,26 @@ function CategoryList(_ref) {
     }, props));
   }));
 }
-
 function CategoryListItem(_ref2) {
   var category = _ref2.category,
-      onSelectCategory = _ref2.onSelectCategory,
-      selectedCategory = _ref2.selectedCategory,
-      index = _ref2.index,
-      focus = _ref2.focus,
-      setFocusedCategoryIndex = _ref2.setFocusedCategoryIndex,
-      createAnalyticsEvent = _ref2.createAnalyticsEvent;
+    onSelectCategory = _ref2.onSelectCategory,
+    selectedCategory = _ref2.selectedCategory,
+    index = _ref2.index,
+    focus = _ref2.focus,
+    setFocusedCategoryIndex = _ref2.setFocusedCategoryIndex,
+    createAnalyticsEvent = _ref2.createAnalyticsEvent;
   var ref = (0, _useFocus.default)(focus);
   var onClick = (0, _react2.useCallback)(function () {
     onSelectCategory(category);
+
     /**
      * When user double clicks on same category, focus on first item.
      */
-
     if (selectedCategory === category.name) {
       setFocusedCategoryIndex(0);
     } else {
       setFocusedCategoryIndex(index);
     }
-
     (0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent)({
       payload: {
         action: _analytics.ACTION.CLICKED,
@@ -106,9 +80,8 @@ function CategoryListItem(_ref2) {
   }, [focus, index, setFocusedCategoryIndex]);
   var getTheme = (0, _react2.useCallback)(function (currentTheme, themeProps) {
     var _currentTheme = currentTheme(themeProps),
-        buttonStyles = _currentTheme.buttonStyles,
-        rest = (0, _objectWithoutProperties2.default)(_currentTheme, _excluded2);
-
+      buttonStyles = _currentTheme.buttonStyles,
+      rest = (0, _objectWithoutProperties2.default)(_currentTheme, _excluded2);
     return _objectSpread({
       buttonStyles: _objectSpread(_objectSpread({}, buttonStyles), {}, {
         textAlign: 'start',
@@ -133,7 +106,6 @@ function CategoryListItem(_ref2) {
     testId: "element-browser-category-item"
   }, category.title));
 }
-
 var buttonWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n  margin: 4px 4px 4px 0;\n\n  @media (min-width: ", "px) {\n    :not(:last-child) {\n      margin-bottom: 0;\n    }\n  }\n"])), _constants.GRID_SIZE * 4, _constants.DEVICE_BREAKPOINT_NUMBERS.medium);
 var MemoizedCategoryListWithAnalytics = /*#__PURE__*/(0, _react2.memo)((0, _analyticsNext.withAnalyticsContext)({
   component: 'CategoryList'