@atlaskit/editor-plugin-block-controls 4.0.7 → 4.0.9

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 4.0.9
+
+### Patch Changes
+
+- [#188277](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/188277)
+  [`9e6d67b625ac9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e6d67b625ac9) -
+  [ux] Hides drag controls for all nodes and resize handles on expands and layouts on narrow
+  screens.
+- Updated dependencies
+
+## 4.0.8
+
+### Patch Changes
+
+- [#185723](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/185723)
+  [`751aeb4580469`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/751aeb4580469) -
+  ED-28315 clean up fg platform_editor_controls_patch_13
+- Updated dependencies
+
 ## 4.0.7
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -195,7 +195,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         isEditing: (_interactionTrackingP = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
         isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState0 = _main.key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
       };
-      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_13')) {
+      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
         var _interactionTrackingP2, _interactionTrackingP3;
         sharedState.isMouseOut = (_interactionTrackingP2 = (_interactionTrackingP3 = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP3 === void 0 ? void 0 : _interactionTrackingP3.isMouseOut) !== null && _interactionTrackingP2 !== void 0 ? _interactionTrackingP2 : false;
       }

package/dist/cjs/pm-plugins/interaction-tracking/pm-plugin.js

@@ -9,7 +9,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _bindEventListener = require("bind-event-listener");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _handleKeyDown = require("./handle-key-down");
 var _handleMouseMove = require("./handle-mouse-move");
@@ -24,26 +23,13 @@ var createInteractionTrackingPlugin = exports.createInteractionTrackingPlugin =
         var state = {
           isEditing: false
         };
-        if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_13')) {
+        if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
           state.isMouseOut = false;
         }
         return state;
       },
       apply: function apply(tr, pluginState) {
         var meta = tr.getMeta(interactionTrackingPluginKey);
-        if (!(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_13')) {
-          switch (meta === null || meta === void 0 ? void 0 : meta.type) {
-            case 'startEditing':
-              return {
-                isEditing: true
-              };
-            case 'stopEditing':
-              return {
-                isEditing: false
-              };
-          }
-          return pluginState;
-        }
         var newState = {};
         switch (meta === null || meta === void 0 ? void 0 : meta.type) {
           case 'startEditing':
@@ -68,7 +54,7 @@ var createInteractionTrackingPlugin = exports.createInteractionTrackingPlugin =
         mousemove: _handleMouseMove.handleMouseMove
       }
     },
-    view: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_13') ? function (view) {
+    view: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? function (view) {
       var editorContentArea = view.dom.closest('.ak-editor-content-area');
       var unbindMouseEnter;
       var unbindMouseLeave;

package/dist/cjs/ui/drag-handle.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DragHandleWithVisibility = exports.DragHandle = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _bindEventListener = require("bind-event-listener");
@@ -27,6 +27,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
 var _primitives = require("@atlaskit/primitives");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _main = require("../pm-plugins/main");
@@ -134,6 +135,10 @@ var dragHandleButtonStyles = (0, _react2.css)({
     backgroundColor: "var(--ds-background-disabled, transparent)"
   }
 });
+var dragHandleButtonSmallScreenStyles = (0, _react2.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_consts.akEditorFullPageNarrowBreakout, "px)"), {
+  opacity: 0,
+  visibility: 'hidden'
+}));
 var dragHandleButtonStylesOld = (0, _react2.css)({
   position: 'absolute',
   paddingTop: "var(--ds-space-025, 2px)",
@@ -878,7 +883,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
         css: [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
         // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
         // See https://product-fabric.atlassian.net/browse/ED-26266
-        _browser.browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles],
+        _browser.browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && (0, _experiments.editorExperiment)('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,

package/dist/cjs/ui/global-styles.js

@@ -28,10 +28,10 @@ var _consts = require("./consts");
  */
 var dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
 var gutterPaddingWidth = function gutterPaddingWidth() {
-  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_13') ? "".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px") : '100%';
+  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? "".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px") : '100%';
 };
 var gutterPaddingLeft = function gutterPaddingLeft() {
-  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_13') ? "-".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px") : '-100px';
+  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? "-".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px") : '-100px';
 };
 var extendedHoverZone = function extendedHoverZone() {
   return (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {

package/dist/cjs/ui/visibility-container.js

@@ -5,9 +5,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.VisibilityContainer = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _primitives = require("@atlaskit/primitives");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 
 var baseStyles = (0, _primitives.xcss)({
@@ -21,6 +32,20 @@ var hiddenStyles = (0, _primitives.xcss)({
   opacity: 0,
   visibility: 'hidden'
 });
+var baseStylesCSS = (0, _react2.css)((0, _defineProperty2.default)({
+  transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
+}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
+  opacity: 0,
+  visibility: 'hidden'
+}));
+var visibleStylesCSS = (0, _react2.css)({
+  opacity: 1,
+  visibility: 'visible'
+});
+var hiddenStylesCSS = (0, _react2.css)({
+  opacity: 0,
+  visibility: 'hidden'
+});
 var VisibilityContainer = exports.VisibilityContainer = function VisibilityContainer(_ref) {
   var api = _ref.api,
     children = _ref.children;
@@ -28,7 +53,12 @@ var VisibilityContainer = exports.VisibilityContainer = function VisibilityConta
   var isEditing = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isEditing');
   var isMouseOut = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isMouseOut');
   var shouldHide = isTypeAheadOpen || isEditing || isMouseOut;
-  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+  if ((0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
+    return (0, _react2.jsx)("div", {
+      css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS]
+    }, children);
+  }
+  return (0, _react2.jsx)(_primitives.Box, {
     xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles]
   }, children);
 };

package/dist/es2019/blockControlsPlugin.js

@@ -186,7 +186,7 @@ export const blockControlsPlugin = ({
       isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
       isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState0 = key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
     };
-    if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13')) {
+    if (editorExperiment('platform_editor_controls', 'variant1')) {
       var _interactionTrackingP2, _interactionTrackingP3;
       sharedState.isMouseOut = (_interactionTrackingP2 = (_interactionTrackingP3 = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP3 === void 0 ? void 0 : _interactionTrackingP3.isMouseOut) !== null && _interactionTrackingP2 !== void 0 ? _interactionTrackingP2 : false;
     }

package/dist/es2019/pm-plugins/interaction-tracking/pm-plugin.js

@@ -1,7 +1,6 @@
 import { bind } from 'bind-event-listener';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { handleKeyDown } from './handle-key-down';
 import { handleMouseEnter, handleMouseLeave, handleMouseMove } from './handle-mouse-move';
@@ -14,26 +13,13 @@ export const createInteractionTrackingPlugin = () => {
         const state = {
           isEditing: false
         };
-        if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13')) {
+        if (editorExperiment('platform_editor_controls', 'variant1')) {
           state.isMouseOut = false;
         }
         return state;
       },
       apply(tr, pluginState) {
         const meta = tr.getMeta(interactionTrackingPluginKey);
-        if (!fg('platform_editor_controls_patch_13')) {
-          switch (meta === null || meta === void 0 ? void 0 : meta.type) {
-            case 'startEditing':
-              return {
-                isEditing: true
-              };
-            case 'stopEditing':
-              return {
-                isEditing: false
-              };
-          }
-          return pluginState;
-        }
         const newState = {};
         switch (meta === null || meta === void 0 ? void 0 : meta.type) {
           case 'startEditing':
@@ -61,7 +47,7 @@ export const createInteractionTrackingPlugin = () => {
         mousemove: handleMouseMove
       }
     },
-    view: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13') ? view => {
+    view: editorExperiment('platform_editor_controls', 'variant1') ? view => {
       const editorContentArea = view.dom.closest('.ak-editor-content-area');
       let unbindMouseEnter;
       let unbindMouseLeave;

package/dist/es2019/ui/drag-handle.js

@@ -17,7 +17,7 @@ import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorTableToolbarSize } from '@atlaskit/editor-shared-styles/consts';
+import { akEditorTableToolbarSize, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles/consts';
 import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -25,6 +25,7 @@ import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { key } from '../pm-plugins/main';
@@ -126,6 +127,13 @@ const dragHandleButtonStyles = css({
     backgroundColor: "var(--ds-background-disabled, transparent)"
   }
 });
+const dragHandleButtonSmallScreenStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  [`@container editor-area (max-width: ${akEditorFullPageNarrowBreakout}px)`]: {
+    opacity: 0,
+    visibility: 'hidden'
+  }
+});
 const dragHandleButtonStylesOld = css({
   position: 'absolute',
   paddingTop: `${"var(--ds-space-025, 2px)"}`,
@@ -866,7 +874,7 @@ export const DragHandle = ({
     css: [editorExperiment('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
     // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
     // See https://product-fabric.atlassian.net/browse/ED-26266
-    browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles],
+    browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
     ref: buttonRef
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,

package/dist/es2019/ui/global-styles.js

@@ -19,8 +19,8 @@ import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
  * including those within table rows and media.
  */
 const dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
-const gutterPaddingWidth = () => editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13') ? `${akEditorGutterPaddingDynamic()}px` : '100%';
-const gutterPaddingLeft = () => editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13') ? `-${akEditorGutterPaddingDynamic()}px` : '-100px';
+const gutterPaddingWidth = () => editorExperiment('platform_editor_controls', 'variant1') ? `${akEditorGutterPaddingDynamic()}px` : '100%';
+const gutterPaddingLeft = () => editorExperiment('platform_editor_controls', 'variant1') ? `-${akEditorGutterPaddingDynamic()}px` : '-100px';
 const extendedHoverZone = () => css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
   [`.block-ctrl-drag-preview ${dragHandlerAnchorSelector}::after`]: {

package/dist/es2019/ui/visibility-container.js

@@ -1,7 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const baseStyles = xcss({
   transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
 });
@@ -13,6 +22,22 @@ const hiddenStyles = xcss({
   opacity: 0,
   visibility: 'hidden'
 });
+const baseStylesCSS = css({
+  transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  [`@container editor-area (max-width: ${akEditorFullPageNarrowBreakout}px)`]: {
+    opacity: 0,
+    visibility: 'hidden'
+  }
+});
+const visibleStylesCSS = css({
+  opacity: 1,
+  visibility: 'visible'
+});
+const hiddenStylesCSS = css({
+  opacity: 0,
+  visibility: 'hidden'
+});
 export const VisibilityContainer = ({
   api,
   children
@@ -21,7 +46,12 @@ export const VisibilityContainer = ({
   const isEditing = useSharedPluginStateSelector(api, 'blockControls.isEditing');
   const isMouseOut = useSharedPluginStateSelector(api, 'blockControls.isMouseOut');
   const shouldHide = isTypeAheadOpen || isEditing || isMouseOut;
-  return /*#__PURE__*/React.createElement(Box, {
+  if (expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
+    return jsx("div", {
+      css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS]
+    }, children);
+  }
+  return jsx(Box, {
     xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles]
   }, children);
 };

package/dist/esm/blockControlsPlugin.js

@@ -188,7 +188,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
         isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState0 = key.getState(editorState)) === null || _key$getState0 === void 0 ? void 0 : _key$getState0.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
       };
-      if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13')) {
+      if (editorExperiment('platform_editor_controls', 'variant1')) {
         var _interactionTrackingP2, _interactionTrackingP3;
         sharedState.isMouseOut = (_interactionTrackingP2 = (_interactionTrackingP3 = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP3 === void 0 ? void 0 : _interactionTrackingP3.isMouseOut) !== null && _interactionTrackingP2 !== void 0 ? _interactionTrackingP2 : false;
       }

package/dist/esm/pm-plugins/interaction-tracking/pm-plugin.js

@@ -4,7 +4,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { bind } from 'bind-event-listener';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { handleKeyDown } from './handle-key-down';
 import { handleMouseEnter, handleMouseLeave, handleMouseMove } from './handle-mouse-move';
@@ -17,26 +16,13 @@ export var createInteractionTrackingPlugin = function createInteractionTrackingP
         var state = {
           isEditing: false
         };
-        if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13')) {
+        if (editorExperiment('platform_editor_controls', 'variant1')) {
           state.isMouseOut = false;
         }
         return state;
       },
       apply: function apply(tr, pluginState) {
         var meta = tr.getMeta(interactionTrackingPluginKey);
-        if (!fg('platform_editor_controls_patch_13')) {
-          switch (meta === null || meta === void 0 ? void 0 : meta.type) {
-            case 'startEditing':
-              return {
-                isEditing: true
-              };
-            case 'stopEditing':
-              return {
-                isEditing: false
-              };
-          }
-          return pluginState;
-        }
         var newState = {};
         switch (meta === null || meta === void 0 ? void 0 : meta.type) {
           case 'startEditing':
@@ -61,7 +47,7 @@ export var createInteractionTrackingPlugin = function createInteractionTrackingP
         mousemove: handleMouseMove
       }
     },
-    view: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13') ? function (view) {
+    view: editorExperiment('platform_editor_controls', 'variant1') ? function (view) {
       var editorContentArea = view.dom.closest('.ak-editor-content-area');
       var unbindMouseEnter;
       var unbindMouseLeave;

package/dist/esm/ui/drag-handle.js

@@ -1,6 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -22,7 +22,7 @@ import { tableControlsSpacing } from '@atlaskit/editor-common/styles';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorTableToolbarSize } from '@atlaskit/editor-shared-styles/consts';
+import { akEditorTableToolbarSize, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles/consts';
 import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
 import DragHandlerIcon from '@atlaskit/icon/glyph/drag-handler';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -30,6 +30,7 @@ import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import Tooltip from '@atlaskit/tooltip';
 import { key } from '../pm-plugins/main';
@@ -131,6 +132,10 @@ var dragHandleButtonStyles = css({
     backgroundColor: "var(--ds-background-disabled, transparent)"
   }
 });
+var dragHandleButtonSmallScreenStyles = css(_defineProperty({}, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
+  opacity: 0,
+  visibility: 'hidden'
+}));
 var dragHandleButtonStylesOld = css({
   position: 'absolute',
   paddingTop: "var(--ds-space-025, 2px)",
@@ -875,7 +880,7 @@ export var DragHandle = function DragHandle(_ref) {
         css: [editorExperiment('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
         // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
         // See https://product-fabric.atlassian.net/browse/ED-26266
-        browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles],
+        browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
         ref: buttonRef
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,

package/dist/esm/ui/global-styles.js

@@ -21,10 +21,10 @@ import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
  */
 var dragHandlerAnchorSelector = '[data-drag-handler-anchor-name]:not([data-drag-handler-node-type="tableRow"], [data-drag-handler-node-type="media"])';
 var gutterPaddingWidth = function gutterPaddingWidth() {
-  return editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13') ? "".concat(akEditorGutterPaddingDynamic(), "px") : '100%';
+  return editorExperiment('platform_editor_controls', 'variant1') ? "".concat(akEditorGutterPaddingDynamic(), "px") : '100%';
 };
 var gutterPaddingLeft = function gutterPaddingLeft() {
-  return editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_13') ? "-".concat(akEditorGutterPaddingDynamic(), "px") : '-100px';
+  return editorExperiment('platform_editor_controls', 'variant1') ? "-".concat(akEditorGutterPaddingDynamic(), "px") : '-100px';
 };
 var extendedHoverZone = function extendedHoverZone() {
   return css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".block-ctrl-drag-preview ".concat(dragHandlerAnchorSelector, "::after"), {

package/dist/esm/ui/visibility-container.js

@@ -1,7 +1,17 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var baseStyles = xcss({
   transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
 });
@@ -13,6 +23,20 @@ var hiddenStyles = xcss({
   opacity: 0,
   visibility: 'hidden'
 });
+var baseStylesCSS = css(_defineProperty({
+  transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
+}, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
+  opacity: 0,
+  visibility: 'hidden'
+}));
+var visibleStylesCSS = css({
+  opacity: 1,
+  visibility: 'visible'
+});
+var hiddenStylesCSS = css({
+  opacity: 0,
+  visibility: 'hidden'
+});
 export var VisibilityContainer = function VisibilityContainer(_ref) {
   var api = _ref.api,
     children = _ref.children;
@@ -20,7 +44,12 @@ export var VisibilityContainer = function VisibilityContainer(_ref) {
   var isEditing = useSharedPluginStateSelector(api, 'blockControls.isEditing');
   var isMouseOut = useSharedPluginStateSelector(api, 'blockControls.isMouseOut');
   var shouldHide = isTypeAheadOpen || isEditing || isMouseOut;
-  return /*#__PURE__*/React.createElement(Box, {
+  if (expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
+    return jsx("div", {
+      css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS]
+    }, children);
+  }
+  return jsx(Box, {
     xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles]
   }, children);
 };

package/dist/types/ui/visibility-container.d.ts

@@ -1,9 +1,14 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
 interface VisibilityContainerProps {
     api?: ExtractInjectionAPI<BlockControlsPlugin>;
     children: React.ReactNode;
 }
-export declare const VisibilityContainer: ({ api, children }: VisibilityContainerProps) => React.JSX.Element;
+export declare const VisibilityContainer: ({ api, children }: VisibilityContainerProps) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/visibility-container.d.ts

@@ -1,9 +1,14 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { BlockControlsPlugin } from '../blockControlsPluginType';
 interface VisibilityContainerProps {
     api?: ExtractInjectionAPI<BlockControlsPlugin>;
     children: React.ReactNode;
 }
-export declare const VisibilityContainer: ({ api, children }: VisibilityContainerProps) => React.JSX.Element;
+export declare const VisibilityContainer: ({ api, children }: VisibilityContainerProps) => jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "4.0.7",
+	"version": "4.0.9",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -46,7 +46,7 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.5.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^27.3.0",
+		"@atlaskit/icon": "^27.5.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -55,7 +55,7 @@
 		"@atlaskit/primitives": "^14.10.0",
 		"@atlaskit/theme": "^19.0.0",
 		"@atlaskit/tmp-editor-statsig": "^9.8.0",
-		"@atlaskit/tokens": "^5.5.0",
+		"@atlaskit/tokens": "^5.6.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -167,9 +167,6 @@
 		"dst-a11y__replace-anchor-with-link__editor-jenga": {
 			"type": "boolean"
 		},
-		"platform_editor_controls_patch_13": {
-			"type": "boolean"
-		},
 		"platform_editor_breakout_resizing_hello_release": {
 			"type": "boolean"
 		},