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

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

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/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/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/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/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/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.8",
+	"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",