@atlaskit/editor-plugin-breakout 3.0.4 → 3.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/pm-plugins/get-guidelines.js +3 -1
  3. package/dist/cjs/pm-plugins/resizer-callbacks.js +4 -1
  4. package/dist/cjs/ui/LayoutButton.js +11 -1
  5. package/dist/es2019/pm-plugins/get-guidelines.js +4 -2
  6. package/dist/es2019/pm-plugins/resizer-callbacks.js +5 -2
  7. package/dist/es2019/ui/LayoutButton.js +13 -1
  8. package/dist/esm/pm-plugins/get-guidelines.js +4 -2
  9. package/dist/esm/pm-plugins/resizer-callbacks.js +5 -2
  10. package/dist/esm/ui/LayoutButton.js +11 -1
  11. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @atlaskit/editor-plugin-breakout
2
2
 
3
+ ## 3.0.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#188277](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/188277)
8
+ [`9e6d67b625ac9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e6d67b625ac9) -
9
+ [ux] Hides drag controls for all nodes and resize handles on expands and layouts on narrow
10
+ screens.
11
+ - Updated dependencies
12
+
13
+ ## 3.0.5
14
+
15
+ ### Patch Changes
16
+
17
+ - [#185940](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/185940)
18
+ [`456bee393c4d3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/456bee393c4d3) -
19
+ [ux] When editor-area is less than 768px wide, we reduce editor gutters to 24px in Full-page
20
+ editor.
21
+ - Updated dependencies
22
+
3
23
  ## 3.0.4
4
24
 
5
25
  ### Patch Changes
package/dist/cjs/pm-plugins/get-guidelines.js CHANGED
@@ -9,6 +9,7 @@ var _memoizeOne = _interopRequireDefault(require("memoize-one"));
9
9
  var _styles = require("@atlaskit/editor-common/styles");
10
10
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
11
11
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
12
13
  var WIDTHS = {
13
14
  MIN: _editorSharedStyles.akEditorDefaultLayoutWidth,
14
15
  WIDE: _editorSharedStyles.akEditorCalculatedWideLayoutWidth,
@@ -48,7 +49,8 @@ var getGuidelines = exports.getGuidelines = (0, _memoizeOne.default)(function (i
48
49
  var _ref = getEditorWidth() || {},
49
50
  width = _ref.width,
50
51
  lineLength = _ref.lineLength;
51
- var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() - _editorSharedStyles.akEditorGutterPadding) : undefined;
52
+ var padding = width && width <= _editorSharedStyles.akEditorFullPageNarrowBreakout && (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
53
+ var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * padding - _editorSharedStyles.akEditorGutterPadding) : undefined;
52
54
  if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
53
55
  guidelines.push({
54
56
  key: GUIDELINE_KEYS.lineLengthLeft,
package/dist/cjs/pm-plugins/resizer-callbacks.js CHANGED
@@ -7,6 +7,7 @@ exports.createResizerCallbacks = createResizerCallbacks;
7
7
  exports.getProposedWidth = getProposedWidth;
8
8
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
9
9
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
10
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
10
11
  var _setBreakoutWidth = require("../editor-commands/set-breakout-width");
11
12
  var _getGuidelines = require("./get-guidelines");
12
13
  var _resizingMarkView = require("./resizing-mark-view");
@@ -28,7 +29,9 @@ function getProposedWidth(_ref) {
28
29
  source = _ref.source;
29
30
  var directionMultiplier = source.data.handleSide === 'left' ? -1 : 1;
30
31
  var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO * directionMultiplier;
31
- var containerWidth = ((api === null || api === void 0 || (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 || (_api$width$sharedStat = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat === void 0 ? void 0 : _api$width$sharedStat.width) || 0) - 2 * (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() - _editorSharedStyles.akEditorGutterPadding;
32
+ var width = (api === null || api === void 0 || (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 || (_api$width$sharedStat = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat === void 0 ? void 0 : _api$width$sharedStat.width) || 0;
33
+ var padding = width <= _editorSharedStyles.akEditorFullPageNarrowBreakout && (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
34
+ var containerWidth = width - 2 * padding - _editorSharedStyles.akEditorGutterPadding;
32
35
 
33
36
  // the node width may be greater than the container width so we resize using the smaller value
34
37
  var proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
package/dist/cjs/ui/LayoutButton.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = void 0;
8
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
8
9
  var _react = require("react");
9
10
  var _react2 = require("@emotion/react");
10
11
  var _reactIntlNext = require("react-intl-next");
@@ -15,12 +16,14 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
15
16
  var _utils = require("@atlaskit/editor-common/utils");
16
17
  var _state = require("@atlaskit/editor-prosemirror/state");
17
18
  var _utils2 = require("@atlaskit/editor-prosemirror/utils");
19
+ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
18
20
  var _growHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/grow-horizontal"));
19
21
  var _shrinkHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/shrink-horizontal"));
20
22
  var _collapse = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/collapse"));
21
23
  var _expand = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/expand"));
22
24
  var _colors = require("@atlaskit/theme/colors");
23
25
  var _constants = require("@atlaskit/theme/constants");
26
+ var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
24
27
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
25
28
  var _removeBreakout = require("../editor-commands/remove-breakout");
26
29
  var _setBreakoutMode = require("../editor-commands/set-breakout-mode");
@@ -48,6 +51,13 @@ var toolbarButtonWrapperStyles = (0, _react2.css)({
48
51
  }
49
52
  }
50
53
  });
54
+ var toolbarButtonNarrowScreenStyles = (0, _react2.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
55
+ // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
56
+ '&& button': {
57
+ visibility: 'hidden',
58
+ opacity: 0
59
+ }
60
+ }));
51
61
  function getBreakoutNodeElement(pluginState, selection, editorView) {
52
62
  if (!pluginState.breakoutNode) {
53
63
  return undefined;
@@ -139,7 +149,7 @@ var LayoutButton = function LayoutButton(_ref) {
139
149
  forcePlacement: true,
140
150
  zIndex: belowOtherPopupsZIndex
141
151
  }, (0, _react2.jsx)("div", {
142
- css: toolbarButtonWrapperStyles
152
+ css: [toolbarButtonWrapperStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && toolbarButtonNarrowScreenStyles]
143
153
  }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
144
154
  title: title,
145
155
  testId: titleMessage.id,
package/dist/es2019/pm-plugins/get-guidelines.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import memoizeOne from 'memoize-one';
2
2
  import { EXPAND_CONTAINER_PADDING, LAYOUT_COLUMN_PADDING, resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
3
- import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
3
+ import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
4
4
  import { fg } from '@atlaskit/platform-feature-flags';
5
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
5
6
  const WIDTHS = {
6
7
  MIN: akEditorDefaultLayoutWidth,
7
8
  WIDE: akEditorCalculatedWideLayoutWidth,
@@ -39,7 +40,8 @@ export const getGuidelines = memoizeOne((isResizing, newWidth, getEditorWidth, n
39
40
  width,
40
41
  lineLength
41
42
  } = getEditorWidth() || {};
42
- const fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding) : undefined;
43
+ const padding = width && width <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
44
+ const fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * padding - akEditorGutterPadding) : undefined;
43
45
  if (fg('platform_editor_breakout_resizing_hello_release')) {
44
46
  guidelines.push({
45
47
  key: GUIDELINE_KEYS.lineLengthLeft,
package/dist/es2019/pm-plugins/resizer-callbacks.js CHANGED
@@ -1,5 +1,6 @@
1
- import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
1
+ import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
2
2
  import { fg } from '@atlaskit/platform-feature-flags';
3
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
3
4
  import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
4
5
  import { getGuidelines } from './get-guidelines';
5
6
  import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
@@ -22,7 +23,9 @@ export function getProposedWidth({
22
23
  var _api$width$sharedStat, _api$width$sharedStat2;
23
24
  const directionMultiplier = source.data.handleSide === 'left' ? -1 : 1;
24
25
  const diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO * directionMultiplier;
25
- const containerWidth = ((api === null || api === void 0 ? void 0 : (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 ? void 0 : (_api$width$sharedStat2 = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat2 === void 0 ? void 0 : _api$width$sharedStat2.width) || 0) - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding;
26
+ const width = (api === null || api === void 0 ? void 0 : (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 ? void 0 : (_api$width$sharedStat2 = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat2 === void 0 ? void 0 : _api$width$sharedStat2.width) || 0;
27
+ const padding = width <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
28
+ const containerWidth = width - 2 * padding - akEditorGutterPadding;
26
29
 
27
30
  // the node width may be greater than the container width so we resize using the smaller value
28
31
  const proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
package/dist/es2019/ui/LayoutButton.js CHANGED
@@ -14,12 +14,14 @@ import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
14
14
  import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
15
15
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
16
16
  import { findDomRefAtPos, findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
17
+ import { akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
17
18
  import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
18
19
  import ShrinkHorizontalIcon from '@atlaskit/icon/core/shrink-horizontal';
19
20
  import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
20
21
  import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
21
22
  import { B300, N20A, N300 } from '@atlaskit/theme/colors';
22
23
  import { layers } from '@atlaskit/theme/constants';
24
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
23
25
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
24
26
  import { removeBreakout } from '../editor-commands/remove-breakout';
25
27
  import { setBreakoutMode } from '../editor-commands/set-breakout-mode';
@@ -40,6 +42,16 @@ const toolbarButtonWrapperStyles = css({
40
42
  }
41
43
  }
42
44
  });
45
+ const toolbarButtonNarrowScreenStyles = css({
46
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
47
+ [`@container editor-area (max-width: ${akEditorFullPageNarrowBreakout}px)`]: {
48
+ // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
49
+ '&& button': {
50
+ visibility: 'hidden',
51
+ opacity: 0
52
+ }
53
+ }
54
+ });
43
55
  function getBreakoutNodeElement(pluginState, selection, editorView) {
44
56
  if (!pluginState.breakoutNode) {
45
57
  return undefined;
@@ -138,7 +150,7 @@ const LayoutButton = ({
138
150
  forcePlacement: true,
139
151
  zIndex: belowOtherPopupsZIndex
140
152
  }, jsx("div", {
141
- css: toolbarButtonWrapperStyles
153
+ css: [toolbarButtonWrapperStyles, expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && toolbarButtonNarrowScreenStyles]
142
154
  }, jsx(ToolbarButton, {
143
155
  title: title,
144
156
  testId: titleMessage.id,
package/dist/esm/pm-plugins/get-guidelines.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import memoizeOne from 'memoize-one';
2
2
  import { EXPAND_CONTAINER_PADDING, LAYOUT_COLUMN_PADDING, resizerHandleThumbWidth } from '@atlaskit/editor-common/styles';
3
- import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
3
+ import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
4
4
  import { fg } from '@atlaskit/platform-feature-flags';
5
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
5
6
  var WIDTHS = {
6
7
  MIN: akEditorDefaultLayoutWidth,
7
8
  WIDE: akEditorCalculatedWideLayoutWidth,
@@ -41,7 +42,8 @@ export var getGuidelines = memoizeOne(function (isResizing, newWidth, getEditorW
41
42
  var _ref = getEditorWidth() || {},
42
43
  width = _ref.width,
43
44
  lineLength = _ref.lineLength;
44
- var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding) : undefined;
45
+ var padding = width && width <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
46
+ var fullWidth = width ? Math.min(WIDTHS.MAX, width - 2 * padding - akEditorGutterPadding) : undefined;
45
47
  if (fg('platform_editor_breakout_resizing_hello_release')) {
46
48
  guidelines.push({
47
49
  key: GUIDELINE_KEYS.lineLengthLeft,
package/dist/esm/pm-plugins/resizer-callbacks.js CHANGED
@@ -1,5 +1,6 @@
1
- import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
1
+ import { akEditorGutterPaddingDynamic, akEditorGutterPadding, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
2
2
  import { fg } from '@atlaskit/platform-feature-flags';
3
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
3
4
  import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
4
5
  import { getGuidelines } from './get-guidelines';
5
6
  import { LOCAL_RESIZE_PROPERTY } from './resizing-mark-view';
@@ -21,7 +22,9 @@ export function getProposedWidth(_ref) {
21
22
  source = _ref.source;
22
23
  var directionMultiplier = source.data.handleSide === 'left' ? -1 : 1;
23
24
  var diffX = (location.current.input.clientX - location.initial.input.clientX) * RESIZE_RATIO * directionMultiplier;
24
- var containerWidth = ((api === null || api === void 0 || (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 || (_api$width$sharedStat = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat === void 0 ? void 0 : _api$width$sharedStat.width) || 0) - 2 * akEditorGutterPaddingDynamic() - akEditorGutterPadding;
25
+ var width = (api === null || api === void 0 || (_api$width$sharedStat = api.width.sharedState) === null || _api$width$sharedStat === void 0 || (_api$width$sharedStat = _api$width$sharedStat.currentState()) === null || _api$width$sharedStat === void 0 ? void 0 : _api$width$sharedStat.width) || 0;
26
+ var padding = width <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
27
+ var containerWidth = width - 2 * padding - akEditorGutterPadding;
25
28
 
26
29
  // the node width may be greater than the container width so we resize using the smaller value
27
30
  var proposedWidth = Math.min(initialWidth, containerWidth) + diffX;
package/dist/esm/ui/LayoutButton.js CHANGED
@@ -1,3 +1,4 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
1
2
  /**
2
3
  * @jsxRuntime classic
3
4
  * @jsx jsx
@@ -14,12 +15,14 @@ import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
14
15
  import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
15
16
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
16
17
  import { findDomRefAtPos, findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
18
+ import { akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
17
19
  import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
18
20
  import ShrinkHorizontalIcon from '@atlaskit/icon/core/shrink-horizontal';
19
21
  import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
20
22
  import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
21
23
  import { B300, N20A, N300 } from '@atlaskit/theme/colors';
22
24
  import { layers } from '@atlaskit/theme/constants';
25
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
23
26
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
24
27
  import { removeBreakout } from '../editor-commands/remove-breakout';
25
28
  import { setBreakoutMode } from '../editor-commands/set-breakout-mode';
@@ -40,6 +43,13 @@ var toolbarButtonWrapperStyles = css({
40
43
  }
41
44
  }
42
45
  });
46
+ var toolbarButtonNarrowScreenStyles = css(_defineProperty({}, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
47
+ // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
48
+ '&& button': {
49
+ visibility: 'hidden',
50
+ opacity: 0
51
+ }
52
+ }));
43
53
  function getBreakoutNodeElement(pluginState, selection, editorView) {
44
54
  if (!pluginState.breakoutNode) {
45
55
  return undefined;
@@ -131,7 +141,7 @@ var LayoutButton = function LayoutButton(_ref) {
131
141
  forcePlacement: true,
132
142
  zIndex: belowOtherPopupsZIndex
133
143
  }, jsx("div", {
134
- css: toolbarButtonWrapperStyles
144
+ css: [toolbarButtonWrapperStyles, expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && toolbarButtonNarrowScreenStyles]
135
145
  }, jsx(ToolbarButton, {
136
146
  title: title,
137
147
  testId: titleMessage.id,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-breakout",
3
- "version": "3.0.4",
3
+ "version": "3.0.6",
4
4
  "description": "Breakout plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -41,13 +41,13 @@
41
41
  "@atlaskit/editor-plugin-user-intent": "^1.0.0",
42
42
  "@atlaskit/editor-plugin-width": "^4.0.0",
43
43
  "@atlaskit/editor-prosemirror": "7.0.0",
44
- "@atlaskit/editor-shared-styles": "^3.4.0",
45
- "@atlaskit/icon": "^27.3.0",
44
+ "@atlaskit/editor-shared-styles": "^3.5.0",
45
+ "@atlaskit/icon": "^27.5.0",
46
46
  "@atlaskit/platform-feature-flags": "^1.1.0",
47
47
  "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
48
48
  "@atlaskit/theme": "^19.0.0",
49
- "@atlaskit/tmp-editor-statsig": "^9.7.0",
50
- "@atlaskit/tokens": "^5.5.0",
49
+ "@atlaskit/tmp-editor-statsig": "^9.8.0",
50
+ "@atlaskit/tokens": "^5.6.0",
51
51
  "@atlaskit/tooltip": "^20.3.0",
52
52
  "@babel/runtime": "^7.0.0",
53
53
  "@emotion/react": "^11.7.1",