@atlaskit/editor-plugin-insert-block 1.14.6 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 2.0.1
+
+### Patch Changes
+
+- [#142202](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142202)
+  [`030b6385e8e47`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/030b6385e8e47) -
+  Add disabled state for right rail experiment, and add appearance checks for experiments
+
+## 2.0.0
+
+### Major Changes
+
+- [#141573](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/141573)
+  [`2360742cbceac`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2360742cbceac) -
+  [ux] Removing replacePlusMenuWithElementBrowser option from insert-block plugin. This is to ensure
+  consistent UI and reduce unnecessary code bundled with the editor. If you are currently using this
+  option you must remove it and it will use the new approach only now.
+
+### Minor Changes
+
+- [#140915](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/140915)
+  [`eaccad51157d6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/eaccad51157d6) -
+  [ux] Migrate new icons including color, highlight and task on Editor primary toolbar
+
 ## 1.14.6
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -332,7 +332,6 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     insertMenuItems: options.insertMenuItems,
     editorActions: editorActions,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    replacePlusMenuWithElementBrowser: options.replacePlusMenuWithElementBrowser,
     showElementBrowserLink: options.showElementBrowserLink,
     showSeparator: !isLastItem && toolbarSize <= _types.ToolbarSize.S,
     registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions

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

@@ -33,7 +33,8 @@ var InsertMenu = function InsertMenu(_ref) {
     showElementBrowserLink = _ref.showElementBrowserLink,
     onInsert = _ref.onInsert,
     toggleVisiblity = _ref.toggleVisiblity,
-    pluginInjectionApi = _ref.pluginInjectionApi;
+    pluginInjectionApi = _ref.pluginInjectionApi,
+    isFullPageAppearance = _ref.isFullPageAppearance;
   var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     itemCount = _useState2[0],
@@ -69,7 +70,7 @@ var InsertMenu = function InsertMenu(_ref) {
     if (!editorView.hasFocus()) {
       editorView.focus();
     }
-    if ((0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
+    if (isFullPageAppearance && (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
       var _pluginInjectionApi$q;
       pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 || _pluginInjectionApi$q.actions.insertItem(item,
       // @ts-expect-error
@@ -78,7 +79,7 @@ var InsertMenu = function InsertMenu(_ref) {
       var _pluginInjectionApi$q2;
       pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q2 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q2 === void 0 || _pluginInjectionApi$q2.actions.insertItem(item, _analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
     }
-  }, [editorView, toggleVisiblity, pluginInjectionApi]);
+  }, [editorView, toggleVisiblity, pluginInjectionApi, isFullPageAppearance]);
   var getItems = (0, _react.useCallback)(function (query, category) {
     var result;
     /**
@@ -99,9 +100,9 @@ var InsertMenu = function InsertMenu(_ref) {
         category: category,
         featuredItems: true,
         // @ts-ignore
-        templateItems: (0, _experiments.editorExperiment)('element-level-templates', true)
+        templateItems: isFullPageAppearance && (0, _experiments.editorExperiment)('element-level-templates', true)
       })) !== null && _pluginInjectionApi$q5 !== void 0 ? _pluginInjectionApi$q5 : [];
-      if ((0, _experiments.editorExperiment)('element-level-templates', true)) {
+      if (isFullPageAppearance && (0, _experiments.editorExperiment)('element-level-templates', true)) {
         // Make sure template options appear as top 5 items
         featuredQuickInsertSuggestions.sort(function (a, b) {
           var _b$priority, _a$priority;
@@ -115,12 +116,12 @@ var InsertMenu = function InsertMenu(_ref) {
     }
     setItemCount(result.length);
     return result;
-  }, [pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.actions, quickInsertDropdownItems]);
+  }, [pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.actions, quickInsertDropdownItems, isFullPageAppearance]);
   var emptyStateHandler = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q8 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q8 === void 0 || (_pluginInjectionApi$q8 = _pluginInjectionApi$q8.sharedState.currentState()) === null || _pluginInjectionApi$q8 === void 0 ? void 0 : _pluginInjectionApi$q8.emptyStateHandler;
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     (0, _react2.jsx)("div", {
-      css: insertMenuWrapper(itemCount)
+      css: insertMenuWrapper(itemCount, isFullPageAppearance)
     }, (0, _react2.jsx)(ElementBrowserWrapper, {
       handleClickOutside: toggleVisiblity,
       handleEscapeKeydown: toggleVisiblity,
@@ -164,8 +165,8 @@ var getInsertMenuHeight = function getInsertMenuHeight(_ref3) {
   }
   return 560; // For showing 6 Elements.
 };
-var insertMenuWrapper = function insertMenuWrapper(itemCount) {
-  if ((0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
+var insertMenuWrapper = function insertMenuWrapper(itemCount, isFullPageAppearance) {
+  if (isFullPageAppearance && (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true)) {
     return (0, _react2.css)({
       display: 'flex',
       flexDirection: 'column',

package/dist/cjs/ui/ElementRail/MainToolBarIcon.js

@@ -44,8 +44,19 @@ var buttonStyles = (0, _primitives.xcss)({
     outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
   }
 });
+var disabledStyles = (0, _primitives.xcss)({
+  color: 'color.text.disabled',
+  backgroundColor: 'color.background.neutral',
+  ':hover': {
+    backgroundColor: 'color.background.neutral'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral'
+  }
+});
 var RightRailIcon = exports.RightRailIcon = function RightRailIcon(_ref) {
-  var onClick = _ref.onClick;
+  var onClick = _ref.onClick,
+    isDisabled = _ref.isDisabled;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
@@ -60,8 +71,9 @@ var RightRailIcon = exports.RightRailIcon = function RightRailIcon(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
     type: "button",
     "aria-label": formatMessage(_messages.toolbarInsertBlockMessages.insertMenu),
-    xcss: [buttonStyles],
-    onClick: onClick
+    xcss: [buttonStyles, isDisabled ? disabledStyles : undefined],
+    onClick: onClick,
+    isDisabled: isDisabled
   }, /*#__PURE__*/_react.default.createElement(_add.default, {
     label: formatMessage(_messages.toolbarInsertBlockMessages.insertMenu),
     size: "medium"

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

@@ -230,6 +230,7 @@ var InsertMenuRail = exports.InsertMenuRail = function InsertMenuRail(_ref) {
     onInsert: onInsert,
     toggleVisiblity: function toggleVisiblity() {},
     showElementBrowserLink: true,
-    pluginInjectionApi: api
+    pluginInjectionApi: api,
+    isFullPageAppearance: true
   }));
 };

package/dist/cjs/ui/ToolbarInsertBlock/block-insert-element-browser.js

@@ -26,7 +26,8 @@ var BlockInsertElementBrowser = exports.BlockInsertElementBrowser = function Blo
     onInsert: props.onInsert,
     toggleVisiblity: props.togglePlusMenuVisibility,
     showElementBrowserLink: props.showElementBrowserLink,
-    pluginInjectionApi: props.pluginInjectionApi
+    pluginInjectionApi: props.pluginInjectionApi,
+    isFullPageAppearance: props.isFullPageAppearance
   })), /*#__PURE__*/_react.default.createElement(_dropdownButton.DropDownButton, {
     "aria-expanded": props.open,
     "aria-haspopup": true,

package/dist/cjs/ui/ToolbarInsertBlock/block-insert-menu.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.BlockInsertMenu = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _blockInsertElementBrowser = require("./block-insert-element-browser");
-var _blockInsertMenuLegacy = require("./block-insert-menu-legacy");
 var _dropdownButton = require("./dropdown-button");
 var BlockInsertMenu = exports.BlockInsertMenu = function BlockInsertMenu(props) {
   if (props.items.length === 0) {
@@ -27,40 +26,24 @@ var BlockInsertMenu = exports.BlockInsertMenu = function BlockInsertMenu(props)
       "aria-keyshortcuts": "/"
     }));
   }
-  if (props.replacePlusMenuWithElementBrowser) {
-    return /*#__PURE__*/_react.default.createElement(_blockInsertElementBrowser.BlockInsertElementBrowser, {
-      disabled: props.disabled,
-      editorView: props.editorView,
-      items: props.items,
-      label: props.label,
-      onClick: props.onClick,
-      onKeyDown: props.onKeyDown,
-      onInsert: props.onInsert,
-      onRef: props.onPlusButtonRef,
-      open: props.open,
-      plusButtonRef: props.plusButtonRef,
-      popupsBoundariesElement: props.popupsBoundariesElement,
-      popupsMountPoint: props.popupsMountPoint,
-      popupsScrollableElement: props.popupsScrollableElement,
-      spacing: props.spacing,
-      togglePlusMenuVisibility: props.togglePlusMenuVisibility,
-      showElementBrowserLink: props.showElementBrowserLink,
-      pluginInjectionApi: props.pluginInjectionApi
-    });
-  }
-  return /*#__PURE__*/_react.default.createElement(_blockInsertMenuLegacy.BlockInsertMenuLegacy, {
+  return /*#__PURE__*/_react.default.createElement(_blockInsertElementBrowser.BlockInsertElementBrowser, {
     disabled: props.disabled,
+    editorView: props.editorView,
     items: props.items,
     label: props.label,
     onClick: props.onClick,
     onKeyDown: props.onKeyDown,
-    onItemActivated: props.onItemActivated,
-    onOpenChange: props.onOpenChange,
-    onRef: props.onRef,
+    onInsert: props.onInsert,
+    onRef: props.onPlusButtonRef,
     open: props.open,
+    plusButtonRef: props.plusButtonRef,
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: props.popupsMountPoint,
     popupsScrollableElement: props.popupsScrollableElement,
-    spacing: props.spacing
+    spacing: props.spacing,
+    togglePlusMenuVisibility: props.togglePlusMenuVisibility,
+    showElementBrowserLink: props.showElementBrowserLink,
+    pluginInjectionApi: props.pluginInjectionApi,
+    isFullPageAppearance: props.isFullPageAppearance
   });
 };

package/dist/cjs/ui/ToolbarInsertBlock/create-items.js

@@ -15,7 +15,6 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _item = require("./item");
 var _messages2 = require("./messages");
 var _shallowEquals = require("./shallow-equals");
-var _sortItems = require("./sort-items");
 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; }
 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; }
 var buttonToItem = (0, _memoize.default)(function (button) {
@@ -63,8 +62,7 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
     expandEnabled = config.expandEnabled,
     numberOfButtons = config.numberOfButtons,
     schema = config.schema,
-    formatMessage = config.formatMessage,
-    isNewMenuEnabled = config.isNewMenuEnabled;
+    formatMessage = config.formatMessage;
   var items = [];
   if (actionSupported) {
     items.push((0, _item.action)({
@@ -223,7 +221,7 @@ var createInsertBlockItems = function createInsertBlockItems(config) {
     var name = _ref.value.name;
     return name !== 'table selector';
   });
-  var dropdownItems = (!isNewMenuEnabled ? (0, _sortItems.sortItems)(remainingItems) : remainingItems).map(buttonToDropdownItem(formatMessage(_messages2.messages.insertMenu)));
+  var dropdownItems = remainingItems.map(buttonToDropdownItem(formatMessage(_messages2.messages.insertMenu)));
   return [buttonItems, dropdownItems];
 };
 var createItems = exports.createItems = (0, _memoizeOne.default)(createInsertBlockItems, _shallowEquals.shallowEquals);

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

@@ -569,13 +569,12 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         popupsMountPoint = _this$props11.popupsMountPoint,
         popupsBoundariesElement = _this$props11.popupsBoundariesElement,
         popupsScrollableElement = _this$props11.popupsScrollableElement,
-        emojiProvider = _this$props11.emojiProvider,
-        replacePlusMenuWithElementBrowser = _this$props11.replacePlusMenuWithElementBrowser;
+        emojiProvider = _this$props11.emojiProvider;
       var dropdownEmoji = this.state.dropdownItems.some(function (_ref7) {
         var name = _ref7.value.name;
         return name === 'emoji';
       });
-      var dropDownButtonRef = replacePlusMenuWithElementBrowser ? this.plusButtonRef : this.dropdownButtonRef;
+      var dropDownButtonRef = this.plusButtonRef;
       var ref = dropdownEmoji ? dropDownButtonRef : this.emojiButtonRef;
       if (!emojiPickerOpen || !ref || !emojiProvider) {
         return null;
@@ -660,7 +659,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         _tableSelectorButton5,
         _tableSelectorButton6,
         _this$props$isDisable,
-        _this$props$replacePl,
+        _this$props$isDisable2,
         _this$props$pluginInj3;
       var _this$state2 = this.state,
         buttons = _this$state2.buttons,
@@ -705,6 +704,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       } finally {
         _iterator.f();
       }
+      var isFullPageAppearance = ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '');
       return (
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         (0, _react2.jsx)("span", {
@@ -768,13 +768,14 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           onKeyDown: this.handleTableSelectorOpenByKeyboard
         })), (0, _react2.jsx)("span", {
           css: _styles.wrapperStyle
-        }, this.renderPopup(), this.renderTableSelectorPopup(), (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true) && ['full-page', 'full-width'].includes(editorAppearance !== null && editorAppearance !== void 0 ? editorAppearance : '') ? (0, _react2.jsx)(_MainToolBarIcon.RightRailIcon, {
-          onClick: this.handleClick
+        }, this.renderPopup(), this.renderTableSelectorPopup(), isFullPageAppearance && (0, _experiments.editorExperiment)('insert-menu-in-right-rail', true) ? (0, _react2.jsx)(_MainToolBarIcon.RightRailIcon, {
+          onClick: this.handleClick,
+          isDisabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false
         }) : (0, _react2.jsx)(_blockInsertMenu.BlockInsertMenu, {
           popupsMountPoint: this.props.popupsMountPoint,
           popupsBoundariesElement: this.props.popupsBoundariesElement,
           popupsScrollableElement: this.props.popupsScrollableElement,
-          disabled: (_this$props$isDisable = this.props.isDisabled) !== null && _this$props$isDisable !== void 0 ? _this$props$isDisable : false,
+          disabled: (_this$props$isDisable2 = this.props.isDisabled) !== null && _this$props$isDisable2 !== void 0 ? _this$props$isDisable2 : false,
           editorView: this.props.editorView,
           spacing: this.props.isReducedSpacing ? 'none' : 'default',
           label: this.props.intl.formatMessage(_messages.messages.insertMenu),
@@ -789,9 +790,9 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           onInsert: this.insertInsertMenuItem,
           onOpenChange: this.onOpenChange,
           togglePlusMenuVisibility: this.togglePlusMenuVisibility,
-          replacePlusMenuWithElementBrowser: (_this$props$replacePl = this.props.replacePlusMenuWithElementBrowser) !== null && _this$props$replacePl !== void 0 ? _this$props$replacePl : false,
           showElementBrowserLink: this.props.showElementBrowserLink || false,
-          pluginInjectionApi: this.props.pluginInjectionApi
+          pluginInjectionApi: this.props.pluginInjectionApi,
+          isFullPageAppearance: isFullPageAppearance
         })), !((_this$props$pluginInj3 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj3 !== void 0 && _this$props$pluginInj3.primaryToolbar) && this.props.showSeparator && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
         (0, _react2.jsx)("span", {
@@ -829,8 +830,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           insertMenuItems: props.insertMenuItems,
           schema: props.editorView.state.schema,
           numberOfButtons: props.buttons,
-          formatMessage: props.intl.formatMessage,
-          isNewMenuEnabled: props.replacePlusMenuWithElementBrowser
+          formatMessage: props.intl.formatMessage
         }),
         _createItems2 = (0, _slicedToArray2.default)(_createItems, 2),
         buttons = _createItems2[0],

package/dist/cjs/ui/ToolbarInsertBlock/item.js

@@ -10,9 +10,10 @@ var _react2 = require("@emotion/react");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
+var _fieldText = _interopRequireDefault(require("@atlaskit/icon-lab/core/field-text"));
+var _status = _interopRequireDefault(require("@atlaskit/icon-lab/core/status"));
 var _angleBracketsEditorCode = _interopRequireDefault(require("@atlaskit/icon/core/migration/angle-brackets--editor-code"));
 var _calendarEditorDate = _interopRequireDefault(require("@atlaskit/icon/core/migration/calendar--editor-date"));
-var _checkboxCheckedEditorTask = _interopRequireDefault(require("@atlaskit/icon/core/migration/checkbox-checked--editor-task"));
 var _decisionEditorDecision = _interopRequireDefault(require("@atlaskit/icon/core/migration/decision--editor-decision"));
 var _emojiEditorEmoji = _interopRequireDefault(require("@atlaskit/icon/core/migration/emoji--editor-emoji"));
 var _gridEditorTable = _interopRequireDefault(require("@atlaskit/icon/core/migration/grid--editor-table"));
@@ -24,8 +25,10 @@ var _mentionEditorMention = _interopRequireDefault(require("@atlaskit/icon/core/
 var _minusEditorHorizontalRule = _interopRequireDefault(require("@atlaskit/icon/core/migration/minus--editor-horizontal-rule"));
 var _quotationMarkQuote = _interopRequireDefault(require("@atlaskit/icon/core/migration/quotation-mark--quote"));
 var _showMoreHorizontalEditorMore = _interopRequireDefault(require("@atlaskit/icon/core/migration/show-more-horizontal--editor-more"));
+var _task = _interopRequireDefault(require("@atlaskit/icon/core/task"));
+var _task2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/task"));
 var _text = _interopRequireDefault(require("@atlaskit/icon/glyph/media-services/text"));
-var _status = _interopRequireDefault(require("@atlaskit/icon/glyph/status"));
+var _status2 = _interopRequireDefault(require("@atlaskit/icon/glyph/status"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
 var _chevronRightChevronRightCircle = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-right--chevron-right-circle"));
 var _shallowEquals = require("./shallow-equals");
@@ -70,7 +73,14 @@ var action = exports.action = mem(function (init) {
     disabled: init.disabled,
     name: 'action',
     shortcut: '[]',
-    Icon: _checkboxCheckedEditorTask.default,
+    Icon: function Icon() {
+      return (0, _react2.jsx)(_task.default, {
+        label: "",
+        color: "currentColor",
+        spacing: "spacious",
+        LEGACY_fallbackIcon: _task2.default
+      });
+    },
     'aria-keyshortcuts': '[ ] Space'
   });
 });
@@ -244,8 +254,11 @@ var placeholder = exports.placeholder = mem(function (init) {
     disabled: init.disabled,
     name: 'placeholder text',
     Icon: function Icon() {
-      return (0, _react2.jsx)(_text.default, {
-        label: ""
+      return (0, _react2.jsx)(_fieldText.default, {
+        label: "",
+        spacing: "spacious",
+        color: "currentColor",
+        LEGACY_fallbackIcon: _text.default
       });
     }
   });
@@ -256,7 +269,14 @@ var status = exports.status = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'status',
-    Icon: _status.default
+    Icon: function Icon() {
+      return (0, _react2.jsx)(_status.default, {
+        label: "",
+        color: "currentColor",
+        spacing: "spacious",
+        LEGACY_fallbackIcon: _status2.default
+      });
+    }
   });
 });
 var more = exports.more = mem(function (init) {

package/dist/es2019/plugin.js

@@ -327,7 +327,6 @@ function ToolbarInsertBlockWithInjectionApi({
     insertMenuItems: options.insertMenuItems,
     editorActions: editorActions,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    replacePlusMenuWithElementBrowser: options.replacePlusMenuWithElementBrowser,
     showElementBrowserLink: options.showElementBrowserLink,
     showSeparator: !isLastItem && toolbarSize <= ToolbarSize.S,
     registerToggleDropdownMenuOptions: registerToggleDropdownMenuOptions

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

@@ -23,7 +23,8 @@ const InsertMenu = ({
   showElementBrowserLink,
   onInsert,
   toggleVisiblity,
-  pluginInjectionApi
+  pluginInjectionApi,
+  isFullPageAppearance
 }) => {
   var _pluginInjectionApi$q7, _pluginInjectionApi$q8, _pluginInjectionApi$q9;
   const [itemCount, setItemCount] = useState(0);
@@ -52,7 +53,7 @@ const InsertMenu = ({
     if (!editorView.hasFocus()) {
       editorView.focus();
     }
-    if (editorExperiment('insert-menu-in-right-rail', true)) {
+    if (isFullPageAppearance && editorExperiment('insert-menu-in-right-rail', true)) {
       var _pluginInjectionApi$q;
       pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.actions.insertItem(item,
       // @ts-expect-error
@@ -61,7 +62,7 @@ const InsertMenu = ({
       var _pluginInjectionApi$q2;
       pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q2 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q2 === void 0 ? void 0 : _pluginInjectionApi$q2.actions.insertItem(item, INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
     }
-  }, [editorView, toggleVisiblity, pluginInjectionApi]);
+  }, [editorView, toggleVisiblity, pluginInjectionApi, isFullPageAppearance]);
   const getItems = useCallback((query, category) => {
     let result;
     /**
@@ -82,9 +83,9 @@ const InsertMenu = ({
         category,
         featuredItems: true,
         // @ts-ignore
-        templateItems: editorExperiment('element-level-templates', true)
+        templateItems: isFullPageAppearance && editorExperiment('element-level-templates', true)
       })) !== null && _pluginInjectionApi$q5 !== void 0 ? _pluginInjectionApi$q5 : [];
-      if (editorExperiment('element-level-templates', true)) {
+      if (isFullPageAppearance && editorExperiment('element-level-templates', true)) {
         // Make sure template options appear as top 5 items
         featuredQuickInsertSuggestions.sort((a, b) => {
           var _b$priority, _a$priority;
@@ -98,12 +99,12 @@ const InsertMenu = ({
     }
     setItemCount(result.length);
     return result;
-  }, [pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.actions, quickInsertDropdownItems]);
+  }, [pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q7 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q7 === void 0 ? void 0 : _pluginInjectionApi$q7.actions, quickInsertDropdownItems, isFullPageAppearance]);
   const emptyStateHandler = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q8 = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q8 === void 0 ? void 0 : (_pluginInjectionApi$q9 = _pluginInjectionApi$q8.sharedState.currentState()) === null || _pluginInjectionApi$q9 === void 0 ? void 0 : _pluginInjectionApi$q9.emptyStateHandler;
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     jsx("div", {
-      css: insertMenuWrapper(itemCount)
+      css: insertMenuWrapper(itemCount, isFullPageAppearance)
     }, jsx(ElementBrowserWrapper, {
       handleClickOutside: toggleVisiblity,
       handleEscapeKeydown: toggleVisiblity,
@@ -149,8 +150,8 @@ const getInsertMenuHeight = ({
   }
   return 560; // For showing 6 Elements.
 };
-const insertMenuWrapper = itemCount => {
-  if (editorExperiment('insert-menu-in-right-rail', true)) {
+const insertMenuWrapper = (itemCount, isFullPageAppearance) => {
+  if (isFullPageAppearance && editorExperiment('insert-menu-in-right-rail', true)) {
     return css({
       display: 'flex',
       flexDirection: 'column',

package/dist/es2019/ui/ElementRail/MainToolBarIcon.js

@@ -37,8 +37,19 @@ const buttonStyles = xcss({
     outline: `2px solid ${"var(--ds-border-focused, #388BFF)"}`
   }
 });
+const disabledStyles = xcss({
+  color: 'color.text.disabled',
+  backgroundColor: 'color.background.neutral',
+  ':hover': {
+    backgroundColor: 'color.background.neutral'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral'
+  }
+});
 export const RightRailIcon = ({
-  onClick
+  onClick,
+  isDisabled
 }) => {
   const {
     formatMessage
@@ -55,8 +66,9 @@ export const RightRailIcon = ({
   }, /*#__PURE__*/React.createElement(Pressable, {
     type: "button",
     "aria-label": formatMessage(toolbarInsertBlockMessages.insertMenu),
-    xcss: [buttonStyles],
-    onClick: onClick
+    xcss: [buttonStyles, isDisabled ? disabledStyles : undefined],
+    onClick: onClick,
+    isDisabled: isDisabled
   }, /*#__PURE__*/React.createElement(EditorAddIcon, {
     label: formatMessage(toolbarInsertBlockMessages.insertMenu),
     size: "medium"

package/dist/es2019/ui/ElementRail/index.js

@@ -227,6 +227,7 @@ export const InsertMenuRail = ({
     onInsert: onInsert,
     toggleVisiblity: () => {},
     showElementBrowserLink: true,
-    pluginInjectionApi: api
+    pluginInjectionApi: api,
+    isFullPageAppearance: true
   }));
 };

package/dist/es2019/ui/ToolbarInsertBlock/block-insert-element-browser.js

@@ -19,7 +19,8 @@ export const BlockInsertElementBrowser = props => {
     onInsert: props.onInsert,
     toggleVisiblity: props.togglePlusMenuVisibility,
     showElementBrowserLink: props.showElementBrowserLink,
-    pluginInjectionApi: props.pluginInjectionApi
+    pluginInjectionApi: props.pluginInjectionApi,
+    isFullPageAppearance: props.isFullPageAppearance
   })), /*#__PURE__*/React.createElement(DropDownButton, {
     "aria-expanded": props.open,
     "aria-haspopup": true,

package/dist/es2019/ui/ToolbarInsertBlock/block-insert-menu.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { BlockInsertElementBrowser } from './block-insert-element-browser';
-import { BlockInsertMenuLegacy } from './block-insert-menu-legacy';
 import { DropDownButton } from './dropdown-button';
 export const BlockInsertMenu = props => {
   if (props.items.length === 0) {
@@ -20,40 +19,24 @@ export const BlockInsertMenu = props => {
       "aria-keyshortcuts": "/"
     }));
   }
-  if (props.replacePlusMenuWithElementBrowser) {
-    return /*#__PURE__*/React.createElement(BlockInsertElementBrowser, {
-      disabled: props.disabled,
-      editorView: props.editorView,
-      items: props.items,
-      label: props.label,
-      onClick: props.onClick,
-      onKeyDown: props.onKeyDown,
-      onInsert: props.onInsert,
-      onRef: props.onPlusButtonRef,
-      open: props.open,
-      plusButtonRef: props.plusButtonRef,
-      popupsBoundariesElement: props.popupsBoundariesElement,
-      popupsMountPoint: props.popupsMountPoint,
-      popupsScrollableElement: props.popupsScrollableElement,
-      spacing: props.spacing,
-      togglePlusMenuVisibility: props.togglePlusMenuVisibility,
-      showElementBrowserLink: props.showElementBrowserLink,
-      pluginInjectionApi: props.pluginInjectionApi
-    });
-  }
-  return /*#__PURE__*/React.createElement(BlockInsertMenuLegacy, {
+  return /*#__PURE__*/React.createElement(BlockInsertElementBrowser, {
     disabled: props.disabled,
+    editorView: props.editorView,
     items: props.items,
     label: props.label,
     onClick: props.onClick,
     onKeyDown: props.onKeyDown,
-    onItemActivated: props.onItemActivated,
-    onOpenChange: props.onOpenChange,
-    onRef: props.onRef,
+    onInsert: props.onInsert,
+    onRef: props.onPlusButtonRef,
     open: props.open,
+    plusButtonRef: props.plusButtonRef,
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: props.popupsMountPoint,
     popupsScrollableElement: props.popupsScrollableElement,
-    spacing: props.spacing
+    spacing: props.spacing,
+    togglePlusMenuVisibility: props.togglePlusMenuVisibility,
+    showElementBrowserLink: props.showElementBrowserLink,
+    pluginInjectionApi: props.pluginInjectionApi,
+    isFullPageAppearance: props.isFullPageAppearance
   });
 };

package/dist/es2019/ui/ToolbarInsertBlock/create-items.js

@@ -6,7 +6,6 @@ import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { action, blockquote, codeblock, date, decision, emoji, expand, horizontalrule, imageUpload, layout, link, media, mention, more, panel, placeholder, status, table, tableSelector } from './item';
 import { messages } from './messages';
 import { shallowEquals } from './shallow-equals';
-import { sortItems } from './sort-items';
 const buttonToItem = memoize(button => ({
   ...button,
   title: /*#__PURE__*/React.createElement(ToolTipContent, {
@@ -49,8 +48,7 @@ const createInsertBlockItems = config => {
     expandEnabled,
     numberOfButtons,
     schema,
-    formatMessage,
-    isNewMenuEnabled
+    formatMessage
   } = config;
   const items = [];
   if (actionSupported) {
@@ -205,7 +203,7 @@ const createInsertBlockItems = config => {
       name
     }
   }) => name !== 'table selector');
-  const dropdownItems = (!isNewMenuEnabled ? sortItems(remainingItems) : remainingItems).map(buttonToDropdownItem(formatMessage(messages.insertMenu)));
+  const dropdownItems = remainingItems.map(buttonToDropdownItem(formatMessage(messages.insertMenu)));
   return [buttonItems, dropdownItems];
 };
 export const createItems = memoizeOne(createInsertBlockItems, shallowEquals);