@atlaskit/editor-plugin-layout 2.7.5 → 2.8.1

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/editor-plugin-layout
 
+## 2.8.1
+
+### Patch Changes
+
+- [#161565](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/161565)
+  [`78560d0f96f90`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/78560d0f96f90) -
+  Disable layout resizer when platform_editor_breakout_resizer is enabled
+- Updated dependencies
+
+## 2.8.0
+
+### Minor Changes
+
+- [#160582](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160582)
+  [`63a34f82a6b4c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/63a34f82a6b4c) -
+  ED-25466 add icons to layout dropdown
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.7.6
+
+### Patch Changes
+
+- [#159070](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159070)
+  [`9857b771c1da1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9857b771c1da1) -
+  [ux] [ED-27778] Fix selection state hiding for tables, breakout buttons and layout
+- Updated dependencies
+
 ## 2.7.5
 
 ### Patch Changes

package/dist/cjs/nodeviews/index.js

@@ -17,6 +17,7 @@ var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/rea
 var _resizer = require("@atlaskit/editor-common/resizer");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _model = require("@atlaskit/editor-prosemirror/model");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _utils = require("../pm-plugins/utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -69,6 +70,7 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     parentRef = _ref.parentRef;
   var _useSharedState = useSharedState(pluginInjectionApi),
     editorDisabled = _useSharedState.editorDisabled;
+  var interactionState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'interaction.interactionState');
   var getEditorWidth = function getEditorWidth() {
     var _pluginInjectionApi$w;
     return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
@@ -94,13 +96,16 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     // put the selection into the first column of the layout
     (0, _utils.selectIntoLayout)(view, pos, 0);
   }, [getPos, view]);
+  if (interactionState === 'hasNotHadInteraction' && (0, _platformFeatureFlags.fg)('platform_editor_hide_expand_selection_states')) {
+    return null;
+  }
   return /*#__PURE__*/_react.default.createElement(_resizer.BreakoutResizer, {
     getRef: forwardRef,
     getPos: getPos,
     editorView: view,
     nodeType: "layoutSection",
     getEditorWidth: getEditorWidth,
-    disabled: editorDisabled === true || !isBreakoutAvailable(view.state.schema),
+    disabled: (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) ? true : editorDisabled === true || !isBreakoutAvailable(view.state.schema),
     parentRef: parentRef,
     editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
     displayGuidelines: (0, _experiments.editorExperiment)('single_column_layouts', true) ? displayGuidelines : undefined,

package/dist/cjs/ui/icons/LayoutColumnsIcon.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditorLayoutFourColumnsIcon = exports.EditorLayoutFiveColumnsIcon = void 0;
+var _react = require("@emotion/react");
+var _layoutFiveColumns = _interopRequireDefault(require("@atlaskit/icon-lab/core/layout-five-columns"));
+var _layoutFourColumns = _interopRequireDefault(require("@atlaskit/icon-lab/core/layout-four-columns"));
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var wrapperStyle = (0, _react.css)({
+  padding: '0 4px'
+});
+var Wrapper = function Wrapper(_ref) {
+  var children = _ref.children;
+  return (0, _react.jsx)("div", {
+    css: wrapperStyle
+  }, children);
+};
+var EditorLayoutFiveColumnsIcon = exports.EditorLayoutFiveColumnsIcon = function EditorLayoutFiveColumnsIcon() {
+  return (0, _react.jsx)(Wrapper, null, (0, _react.jsx)(_layoutFiveColumns.default, {
+    label: ""
+  }));
+};
+var EditorLayoutFourColumnsIcon = exports.EditorLayoutFourColumnsIcon = function EditorLayoutFourColumnsIcon() {
+  return (0, _react.jsx)(Wrapper, null, (0, _react.jsx)(_layoutFourColumns.default, {
+    label: ""
+  }));
+};

package/dist/cjs/ui/toolbar.js

@@ -24,6 +24,7 @@ var _layoutTwoColumnsSidebarRightEditorLayoutTwoRightSidebar = _interopRequireDe
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("../pm-plugins/actions");
+var _LayoutColumnsIcon = require("./icons/LayoutColumnsIcon");
 var _LayoutThreeWithLeftSidebars = require("./icons/LayoutThreeWithLeftSidebars");
 var _LayoutThreeWithRightSidebars = require("./icons/LayoutThreeWithRightSidebars");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -120,6 +121,31 @@ var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, ed
 var layoutToolbarTitle = exports.layoutToolbarTitle = 'Layout floating controls';
 var iconPlaceholder = _layoutTwoColumnsEditorLayoutTwoEqual.default; // TODO: ED-25466 - Replace with proper icon
 
+var getLayoutColumnsIcons = function getLayoutColumnsIcons(colCount) {
+  if (!(0, _experiments.editorExperiment)('single_column_layouts', true)) {
+    return undefined;
+  }
+  switch (colCount) {
+    case 1:
+      return /*#__PURE__*/_react.default.createElement(_layoutOneColumnEditorLayoutSingle.default, {
+        label: ""
+      });
+    case 2:
+      return /*#__PURE__*/_react.default.createElement(_layoutTwoColumnsEditorLayoutTwoEqual.default, {
+        label: ""
+      });
+    case 3:
+      return /*#__PURE__*/_react.default.createElement(_layoutThreeColumnsEditorLayoutThreeEqual.default, {
+        label: ""
+      });
+    case 4:
+      return /*#__PURE__*/_react.default.createElement(_LayoutColumnsIcon.EditorLayoutFourColumnsIcon, null);
+    case 5:
+      return /*#__PURE__*/_react.default.createElement(_LayoutColumnsIcon.EditorLayoutFiveColumnsIcon, null);
+    default:
+      return undefined;
+  }
+};
 var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
   var addSidebarLayouts = _ref.addSidebarLayouts,
     intl = _ref.intl,
@@ -138,7 +164,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
       count: 2
     }),
     //'2-columns',
-    icon: iconPlaceholder,
+    icon: getLayoutColumnsIcons(2) || iconPlaceholder,
     onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('two_equal'),
     selected: numberOfColumns === 2
   }, {
@@ -146,7 +172,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
       count: 3
     }),
     //'3-columns'
-    icon: iconPlaceholder,
+    icon: getLayoutColumnsIcons(3) || iconPlaceholder,
     onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('three_equal'),
     selected: numberOfColumns === 3
   }, {
@@ -154,7 +180,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
       count: 4
     }),
     //'4-columns'
-    icon: iconPlaceholder,
+    icon: getLayoutColumnsIcons(4) || iconPlaceholder,
     onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('four_equal'),
     selected: numberOfColumns === 4
   }, {
@@ -162,7 +188,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
       count: 5
     }),
     //'5-columns'
-    icon: iconPlaceholder,
+    icon: getLayoutColumnsIcons(5) || iconPlaceholder,
     onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('five_equal'),
     selected: numberOfColumns === 5
   }];
@@ -171,7 +197,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
       count: 1
     }),
     //'1-columns',
-    icon: iconPlaceholder,
+    icon: getLayoutColumnsIcons(1) || iconPlaceholder,
     onClick: (0, _actions.setPresetLayout)(editorAnalyticsAPI)('single'),
     selected: numberOfColumns === 1
   } : [];

package/dist/es2019/nodeviews/index.js

@@ -4,6 +4,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { selectIntoLayout } from '../pm-plugins/utils';
 const layoutDynamicFullWidthGuidelineOffset = 16;
@@ -55,6 +56,7 @@ const LayoutBreakoutResizer = ({
   const {
     editorDisabled
   } = useSharedState(pluginInjectionApi);
+  const interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
   const getEditorWidth = () => {
     var _pluginInjectionApi$w;
     return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
@@ -80,13 +82,16 @@ const LayoutBreakoutResizer = ({
     // put the selection into the first column of the layout
     selectIntoLayout(view, pos, 0);
   }, [getPos, view]);
+  if (interactionState === 'hasNotHadInteraction' && fg('platform_editor_hide_expand_selection_states')) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(BreakoutResizer, {
     getRef: forwardRef,
     getPos: getPos,
     editorView: view,
     nodeType: "layoutSection",
     getEditorWidth: getEditorWidth,
-    disabled: editorDisabled === true || !isBreakoutAvailable(view.state.schema),
+    disabled: editorExperiment('platform_editor_breakout_resizing', true) ? true : editorDisabled === true || !isBreakoutAvailable(view.state.schema),
     parentRef: parentRef,
     editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
     displayGuidelines: editorExperiment('single_column_layouts', true) ? displayGuidelines : undefined,

package/dist/es2019/ui/icons/LayoutColumnsIcon.js

@@ -0,0 +1,29 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import LayoutFiveColumnsIcon from '@atlaskit/icon-lab/core/layout-five-columns';
+import LayoutFourColumnsIcon from '@atlaskit/icon-lab/core/layout-four-columns';
+const wrapperStyle = css({
+  padding: '0 4px'
+});
+const Wrapper = ({
+  children
+}) => {
+  return jsx("div", {
+    css: wrapperStyle
+  }, children);
+};
+export const EditorLayoutFiveColumnsIcon = () => {
+  return jsx(Wrapper, null, jsx(LayoutFiveColumnsIcon, {
+    label: ""
+  }));
+};
+export const EditorLayoutFourColumnsIcon = () => {
+  return jsx(Wrapper, null, jsx(LayoutFourColumnsIcon, {
+    label: ""
+  }));
+};

package/dist/es2019/ui/toolbar.js

@@ -14,6 +14,7 @@ import LayoutTwoColumnsSidebarRightIcon from '@atlaskit/icon/core/migration/layo
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
+import { EditorLayoutFiveColumnsIcon, EditorLayoutFourColumnsIcon } from './icons/LayoutColumnsIcon';
 import { LayoutThreeWithLeftSidebarsIcon } from './icons/LayoutThreeWithLeftSidebars';
 import { LayoutThreeWithRightSidebarsIcon } from './icons/LayoutThreeWithRightSidebars';
 const LAYOUT_TYPES = [{
@@ -104,6 +105,31 @@ const buildLayoutButton = (intl, item, currentLayout, editorAnalyticsAPI) => ({
 export const layoutToolbarTitle = 'Layout floating controls';
 const iconPlaceholder = LayoutTwoColumnsIcon; // TODO: ED-25466 - Replace with proper icon
 
+const getLayoutColumnsIcons = colCount => {
+  if (!editorExperiment('single_column_layouts', true)) {
+    return undefined;
+  }
+  switch (colCount) {
+    case 1:
+      return /*#__PURE__*/React.createElement(LayoutOneColumnIcon, {
+        label: ""
+      });
+    case 2:
+      return /*#__PURE__*/React.createElement(LayoutTwoColumnsIcon, {
+        label: ""
+      });
+    case 3:
+      return /*#__PURE__*/React.createElement(LayoutThreeColumnsIcon, {
+        label: ""
+      });
+    case 4:
+      return /*#__PURE__*/React.createElement(EditorLayoutFourColumnsIcon, null);
+    case 5:
+      return /*#__PURE__*/React.createElement(EditorLayoutFiveColumnsIcon, null);
+    default:
+      return undefined;
+  }
+};
 const getAdvancedLayoutItems = ({
   addSidebarLayouts,
   intl,
@@ -123,7 +149,7 @@ const getAdvancedLayoutItems = ({
       count: 2
     }),
     //'2-columns',
-    icon: iconPlaceholder,
+    icon: getLayoutColumnsIcons(2) || iconPlaceholder,
     onClick: setPresetLayout(editorAnalyticsAPI)('two_equal'),
     selected: numberOfColumns === 2
   }, {
@@ -131,7 +157,7 @@ const getAdvancedLayoutItems = ({
       count: 3
     }),
     //'3-columns'
-    icon: iconPlaceholder,
+    icon: getLayoutColumnsIcons(3) || iconPlaceholder,
     onClick: setPresetLayout(editorAnalyticsAPI)('three_equal'),
     selected: numberOfColumns === 3
   }, {
@@ -139,7 +165,7 @@ const getAdvancedLayoutItems = ({
       count: 4
     }),
     //'4-columns'
-    icon: iconPlaceholder,
+    icon: getLayoutColumnsIcons(4) || iconPlaceholder,
     onClick: setPresetLayout(editorAnalyticsAPI)('four_equal'),
     selected: numberOfColumns === 4
   }, {
@@ -147,7 +173,7 @@ const getAdvancedLayoutItems = ({
       count: 5
     }),
     //'5-columns'
-    icon: iconPlaceholder,
+    icon: getLayoutColumnsIcons(5) || iconPlaceholder,
     onClick: setPresetLayout(editorAnalyticsAPI)('five_equal'),
     selected: numberOfColumns === 5
   }];
@@ -156,7 +182,7 @@ const getAdvancedLayoutItems = ({
       count: 1
     }),
     //'1-columns',
-    icon: iconPlaceholder,
+    icon: getLayoutColumnsIcons(1) || iconPlaceholder,
     onClick: setPresetLayout(editorAnalyticsAPI)('single'),
     selected: numberOfColumns === 1
   } : [];

package/dist/esm/nodeviews/index.js

@@ -11,6 +11,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { BreakoutResizer, ignoreResizerMutations } from '@atlaskit/editor-common/resizer';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { selectIntoLayout } from '../pm-plugins/utils';
 var layoutDynamicFullWidthGuidelineOffset = 16;
@@ -59,6 +60,7 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     parentRef = _ref.parentRef;
   var _useSharedState = useSharedState(pluginInjectionApi),
     editorDisabled = _useSharedState.editorDisabled;
+  var interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
   var getEditorWidth = function getEditorWidth() {
     var _pluginInjectionApi$w;
     return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.sharedState.currentState();
@@ -84,13 +86,16 @@ var LayoutBreakoutResizer = function LayoutBreakoutResizer(_ref) {
     // put the selection into the first column of the layout
     selectIntoLayout(view, pos, 0);
   }, [getPos, view]);
+  if (interactionState === 'hasNotHadInteraction' && fg('platform_editor_hide_expand_selection_states')) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(BreakoutResizer, {
     getRef: forwardRef,
     getPos: getPos,
     editorView: view,
     nodeType: "layoutSection",
     getEditorWidth: getEditorWidth,
-    disabled: editorDisabled === true || !isBreakoutAvailable(view.state.schema),
+    disabled: editorExperiment('platform_editor_breakout_resizing', true) ? true : editorDisabled === true || !isBreakoutAvailable(view.state.schema),
     parentRef: parentRef,
     editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
     displayGuidelines: editorExperiment('single_column_layouts', true) ? displayGuidelines : undefined,

package/dist/esm/ui/icons/LayoutColumnsIcon.js

@@ -0,0 +1,28 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import LayoutFiveColumnsIcon from '@atlaskit/icon-lab/core/layout-five-columns';
+import LayoutFourColumnsIcon from '@atlaskit/icon-lab/core/layout-four-columns';
+var wrapperStyle = css({
+  padding: '0 4px'
+});
+var Wrapper = function Wrapper(_ref) {
+  var children = _ref.children;
+  return jsx("div", {
+    css: wrapperStyle
+  }, children);
+};
+export var EditorLayoutFiveColumnsIcon = function EditorLayoutFiveColumnsIcon() {
+  return jsx(Wrapper, null, jsx(LayoutFiveColumnsIcon, {
+    label: ""
+  }));
+};
+export var EditorLayoutFourColumnsIcon = function EditorLayoutFourColumnsIcon() {
+  return jsx(Wrapper, null, jsx(LayoutFourColumnsIcon, {
+    label: ""
+  }));
+};

package/dist/esm/ui/toolbar.js

@@ -18,6 +18,7 @@ import LayoutTwoColumnsSidebarRightIcon from '@atlaskit/icon/core/migration/layo
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
+import { EditorLayoutFiveColumnsIcon, EditorLayoutFourColumnsIcon } from './icons/LayoutColumnsIcon';
 import { LayoutThreeWithLeftSidebarsIcon } from './icons/LayoutThreeWithLeftSidebars';
 import { LayoutThreeWithRightSidebarsIcon } from './icons/LayoutThreeWithRightSidebars';
 var LAYOUT_TYPES = [{
@@ -110,6 +111,31 @@ var buildLayoutButton = function buildLayoutButton(intl, item, currentLayout, ed
 export var layoutToolbarTitle = 'Layout floating controls';
 var iconPlaceholder = LayoutTwoColumnsIcon; // TODO: ED-25466 - Replace with proper icon
 
+var getLayoutColumnsIcons = function getLayoutColumnsIcons(colCount) {
+  if (!editorExperiment('single_column_layouts', true)) {
+    return undefined;
+  }
+  switch (colCount) {
+    case 1:
+      return /*#__PURE__*/React.createElement(LayoutOneColumnIcon, {
+        label: ""
+      });
+    case 2:
+      return /*#__PURE__*/React.createElement(LayoutTwoColumnsIcon, {
+        label: ""
+      });
+    case 3:
+      return /*#__PURE__*/React.createElement(LayoutThreeColumnsIcon, {
+        label: ""
+      });
+    case 4:
+      return /*#__PURE__*/React.createElement(EditorLayoutFourColumnsIcon, null);
+    case 5:
+      return /*#__PURE__*/React.createElement(EditorLayoutFiveColumnsIcon, null);
+    default:
+      return undefined;
+  }
+};
 var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
   var addSidebarLayouts = _ref.addSidebarLayouts,
     intl = _ref.intl,
@@ -128,7 +154,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
       count: 2
     }),
     //'2-columns',
-    icon: iconPlaceholder,
+    icon: getLayoutColumnsIcons(2) || iconPlaceholder,
     onClick: setPresetLayout(editorAnalyticsAPI)('two_equal'),
     selected: numberOfColumns === 2
   }, {
@@ -136,7 +162,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
       count: 3
     }),
     //'3-columns'
-    icon: iconPlaceholder,
+    icon: getLayoutColumnsIcons(3) || iconPlaceholder,
     onClick: setPresetLayout(editorAnalyticsAPI)('three_equal'),
     selected: numberOfColumns === 3
   }, {
@@ -144,7 +170,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
       count: 4
     }),
     //'4-columns'
-    icon: iconPlaceholder,
+    icon: getLayoutColumnsIcons(4) || iconPlaceholder,
     onClick: setPresetLayout(editorAnalyticsAPI)('four_equal'),
     selected: numberOfColumns === 4
   }, {
@@ -152,7 +178,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
       count: 5
     }),
     //'5-columns'
-    icon: iconPlaceholder,
+    icon: getLayoutColumnsIcons(5) || iconPlaceholder,
     onClick: setPresetLayout(editorAnalyticsAPI)('five_equal'),
     selected: numberOfColumns === 5
   }];
@@ -161,7 +187,7 @@ var getAdvancedLayoutItems = function getAdvancedLayoutItems(_ref) {
       count: 1
     }),
     //'1-columns',
-    icon: iconPlaceholder,
+    icon: getLayoutColumnsIcons(1) || iconPlaceholder,
     onClick: setPresetLayout(editorAnalyticsAPI)('single'),
     selected: numberOfColumns === 1
   } : [];

package/dist/types/layoutPluginType.d.ts

@@ -3,6 +3,7 @@ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
@@ -13,7 +14,8 @@ export type LayoutPluginDependencies = [
     OptionalPlugin<AnalyticsPlugin>,
     OptionalPlugin<WidthPlugin>,
     OptionalPlugin<EditorDisabledPlugin>,
-    OptionalPlugin<GuidelinePlugin>
+    OptionalPlugin<GuidelinePlugin>,
+    OptionalPlugin<InteractionPlugin>
 ];
 export type LayoutPlugin = NextEditorPlugin<'layout', {
     pluginConfiguration: LayoutPluginOptions | undefined;

package/dist/types/ui/icons/LayoutColumnsIcon.d.ts

@@ -0,0 +1,3 @@
+import { jsx } from '@emotion/react';
+export declare const EditorLayoutFiveColumnsIcon: () => jsx.JSX.Element;
+export declare const EditorLayoutFourColumnsIcon: () => jsx.JSX.Element;

package/dist/types-ts4.5/layoutPluginType.d.ts

@@ -3,6 +3,7 @@ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { insertLayoutColumnsWithAnalytics } from './pm-plugins/actions';
@@ -13,7 +14,8 @@ export type LayoutPluginDependencies = [
     OptionalPlugin<AnalyticsPlugin>,
     OptionalPlugin<WidthPlugin>,
     OptionalPlugin<EditorDisabledPlugin>,
-    OptionalPlugin<GuidelinePlugin>
+    OptionalPlugin<GuidelinePlugin>,
+    OptionalPlugin<InteractionPlugin>
 ];
 export type LayoutPlugin = NextEditorPlugin<'layout', {
     pluginConfiguration: LayoutPluginOptions | undefined;

package/dist/types-ts4.5/ui/icons/LayoutColumnsIcon.d.ts

@@ -0,0 +1,3 @@
+import { jsx } from '@emotion/react';
+export declare const EditorLayoutFiveColumnsIcon: () => jsx.JSX.Element;
+export declare const EditorLayoutFourColumnsIcon: () => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "2.7.5",
+	"version": "2.8.1",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,18 +34,20 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^105.10.0",
+		"@atlaskit/editor-common": "^105.11.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
+		"@atlaskit/editor-plugin-interaction": "^1.1.0",
 		"@atlaskit/editor-plugin-selection": "^2.2.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/icon": "^26.3.0",
+		"@atlaskit/icon-lab": "^4.16.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^5.0.0",
+		"@atlaskit/tmp-editor-statsig": "^5.1.0",
 		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
@@ -113,6 +115,9 @@
 		},
 		"platform_editor_controls_patch_8": {
 			"type": "boolean"
+		},
+		"platform_editor_hide_expand_selection_states": {
+			"type": "boolean"
 		}
 	}
 }