@atlaskit/editor-plugin-layout 2.4.0 → 2.4.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-layout
 
+## 2.4.1
+
+### Patch Changes
+
+- [#134468](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134468)
+  [`e312ec529d05a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e312ec529d05a) -
+  [ux] Apply hover decoration when hovering on copy/delete button on overflow menu
+- Updated dependencies
+
 ## 2.4.0
 
 ### Minor Changes

package/dist/cjs/ui/toolbar.js

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.layoutToolbarTitle = exports.buildToolbar = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
 var _deleteEditorRemove = _interopRequireDefault(require("@atlaskit/icon/core/migration/delete--editor-remove"));
 var _layoutOneColumnEditorLayoutSingle = _interopRequireDefault(require("@atlaskit/icon/core/migration/layout-one-column--editor-layout-single"));
@@ -18,12 +20,15 @@ var _layoutThreeColumnsSidebarsEditorLayoutThreeWithSidebars = _interopRequireDe
 var _layoutTwoColumnsEditorLayoutTwoEqual = _interopRequireDefault(require("@atlaskit/icon/core/migration/layout-two-columns--editor-layout-two-equal"));
 var _layoutTwoColumnsSidebarLeftEditorLayoutTwoLeftSidebar = _interopRequireDefault(require("@atlaskit/icon/core/migration/layout-two-columns-sidebar-left--editor-layout-two-left-sidebar"));
 var _layoutTwoColumnsSidebarRightEditorLayoutTwoRightSidebar = _interopRequireDefault(require("@atlaskit/icon/core/migration/layout-two-columns-sidebar-right--editor-layout-two-right-sidebar"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("../pm-plugins/actions");
 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); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LAYOUT_TYPES = [{
   id: 'editor.layout.twoEquals',
   type: 'two_equal',
@@ -222,9 +227,17 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
       }]
     };
     var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
+    var hoverDecorationProps = function hoverDecorationProps(nodeType, className) {
+      return (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? {
+        onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
+        onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
+        onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
+        onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
+      } : undefined;
+    };
     var overflowMenu = {
       type: 'overflow-dropdown',
-      options: [{
+      options: [_objectSpread({
         title: 'Copy',
         onClick: function onClick() {
           var _api$core, _api$floatingToolbar;
@@ -235,13 +248,13 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl, pos
         icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
           label: "Copy"
         })
-      }, {
+      }, hoverDecorationProps(nodeType, _editorSharedStyles.akEditorSelectedNodeClassName)), _objectSpread({
         title: 'Delete',
         onClick: (0, _actions.deleteActiveLayoutNode)(editorAnalyticsAPI),
         icon: /*#__PURE__*/_react.default.createElement(_deleteEditorRemove.default, {
           label: "Delete"
         })
-      }]
+      }, hoverDecorationProps(nodeType))]
     };
     return {
       title: layoutToolbarTitle,

package/dist/es2019/ui/toolbar.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import commonMessages, { layoutMessages, layoutMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/migration/delete--editor-remove';
 import LayoutOneColumnIcon from '@atlaskit/icon/core/migration/layout-one-column--editor-layout-single';
@@ -9,6 +10,7 @@ import LayoutThreeColumnsSidebarsIcon from '@atlaskit/icon/core/migration/layout
 import LayoutTwoColumnsIcon from '@atlaskit/icon/core/migration/layout-two-columns--editor-layout-two-equal';
 import LayoutTwoColumnsSidebarLeftIcon from '@atlaskit/icon/core/migration/layout-two-columns-sidebar-left--editor-layout-two-left-sidebar';
 import LayoutTwoColumnsSidebarRightIcon from '@atlaskit/icon/core/migration/layout-two-columns-sidebar-right--editor-layout-two-right-sidebar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
 import { LayoutThreeWithLeftSidebarsIcon } from './icons/LayoutThreeWithLeftSidebars';
@@ -209,6 +211,12 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
       }]
     };
     const layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
+    const hoverDecorationProps = (nodeType, className) => fg('platform_editor_controls_patch_1') ? {
+      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
+      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
+      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
+      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
+    } : undefined;
     const overflowMenu = {
       type: 'overflow-dropdown',
       options: [{
@@ -221,13 +229,15 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
         },
         icon: /*#__PURE__*/React.createElement(CopyIcon, {
           label: "Copy"
-        })
+        }),
+        ...hoverDecorationProps(nodeType, akEditorSelectedNodeClassName)
       }, {
         title: 'Delete',
         onClick: deleteActiveLayoutNode(editorAnalyticsAPI),
         icon: /*#__PURE__*/React.createElement(DeleteIcon, {
           label: "Delete"
-        })
+        }),
+        ...hoverDecorationProps(nodeType)
       }]
     };
     return {

package/dist/esm/ui/toolbar.js

@@ -1,7 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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; }
 import React from 'react';
 import commonMessages, { layoutMessages, layoutMessages as toolbarMessages } from '@atlaskit/editor-common/messages';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/migration/delete--editor-remove';
 import LayoutOneColumnIcon from '@atlaskit/icon/core/migration/layout-one-column--editor-layout-single';
@@ -10,6 +14,7 @@ import LayoutThreeColumnsSidebarsIcon from '@atlaskit/icon/core/migration/layout
 import LayoutTwoColumnsIcon from '@atlaskit/icon/core/migration/layout-two-columns--editor-layout-two-equal';
 import LayoutTwoColumnsSidebarLeftIcon from '@atlaskit/icon/core/migration/layout-two-columns-sidebar-left--editor-layout-two-left-sidebar';
 import LayoutTwoColumnsSidebarRightIcon from '@atlaskit/icon/core/migration/layout-two-columns-sidebar-right--editor-layout-two-right-sidebar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { deleteActiveLayoutNode, getPresetLayout, setPresetLayout } from '../pm-plugins/actions';
 import { LayoutThreeWithLeftSidebarsIcon } from './icons/LayoutThreeWithLeftSidebars';
@@ -212,9 +217,17 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
       }]
     };
     var layoutTypes = allowSingleColumnLayout ? LAYOUT_TYPES_WITH_SINGLE_COL : LAYOUT_TYPES;
+    var hoverDecorationProps = function hoverDecorationProps(nodeType, className) {
+      return fg('platform_editor_controls_patch_1') ? {
+        onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
+        onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
+        onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
+        onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
+      } : undefined;
+    };
     var overflowMenu = {
       type: 'overflow-dropdown',
-      options: [{
+      options: [_objectSpread({
         title: 'Copy',
         onClick: function onClick() {
           var _api$core, _api$floatingToolbar;
@@ -225,13 +238,13 @@ export var buildToolbar = function buildToolbar(state, intl, pos, _allowBreakout
         icon: /*#__PURE__*/React.createElement(CopyIcon, {
           label: "Copy"
         })
-      }, {
+      }, hoverDecorationProps(nodeType, akEditorSelectedNodeClassName)), _objectSpread({
         title: 'Delete',
         onClick: deleteActiveLayoutNode(editorAnalyticsAPI),
         icon: /*#__PURE__*/React.createElement(DeleteIcon, {
           label: "Delete"
         })
-      }]
+      }, hoverDecorationProps(nodeType))]
     };
     return {
       title: layoutToolbarTitle,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "2.4.0",
+	"version": "2.4.1",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,7 +34,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^102.14.0",
+		"@atlaskit/editor-common": "^102.15.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
@@ -42,9 +42,10 @@
 		"@atlaskit/editor-plugin-selection": "^2.1.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/icon": "^25.2.0",
+		"@atlaskit/editor-shared-styles": "^3.4.0",
+		"@atlaskit/icon": "^25.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^4.4.0",
+		"@atlaskit/tmp-editor-statsig": "^4.6.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
@@ -100,6 +101,9 @@
 	"platform-feature-flags": {
 		"platform-visual-refresh-icons": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_1": {
+			"type": "boolean"
 		}
 	}
 }