@atlaskit/editor-plugin-toolbar 5.0.4 → 5.1.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-toolbar
 
+## 5.1.1
+
+### Patch Changes
+
+- [`11f2dadbd0b51`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/11f2dadbd0b51) -
+  Adjust z-index of selection toolbar, making it inline with menus and other high priority elements.
+- Updated dependencies
+
+## 5.1.0
+
+### Minor Changes
+
+- [`5a8d797e50210`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5a8d797e50210) -
+  [FFCLEANUP-91669] clean up platform_editor_hide_toolbar_tooltips_fix experiment to hide dropdown
+  menu item tooltips on hover of the dropdown menu button
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.0.4
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -42,6 +42,9 @@
 		{
 			"path": "../../editor-prosemirror/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-shared-styles/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-toolbar/afm-cc/tsconfig.json"
 		},

package/dist/cjs/ui/OverflowMenu.js

@@ -9,30 +9,18 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var OverflowMenu = exports.OverflowMenu = function OverflowMenu(_ref) {
   var children = _ref.children;
   var intl = (0, _reactIntlNext.useIntl)();
   var tooltipContent = intl.formatMessage(_messages.toolbarMessages.selectionToolbarOverflowMenuTooltip);
-  if ((0, _expValEquals.expValEquals)('platform_editor_hide_toolbar_tooltips_fix', 'isEnabled', true)) {
-    return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
-      label: tooltipContent,
-      iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ShowMoreHorizontalIcon, {
-        label: ""
-      }),
-      tooltipComponent: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
-        content: tooltipContent,
-        position: "top"
-      })
-    }, children);
-  }
-  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
-    content: tooltipContent,
-    position: "top"
-  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
     label: tooltipContent,
     iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ShowMoreHorizontalIcon, {
       label: ""
+    }),
+    tooltipComponent: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+      content: tooltipContent,
+      position: "top"
     })
-  }, children));
+  }, children);
 };

package/dist/cjs/ui/SelectionToolbar/index.js

@@ -17,8 +17,10 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _editorToolbarModel = require("@atlaskit/editor-toolbar-model");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _consts = require("../consts");
@@ -102,7 +104,8 @@ var SelectionToolbar = exports.SelectionToolbar = function SelectionToolbar(_ref
     offset: [0, 10],
     target: (0, _utils2.getDomRefFromSelection)(editorView),
     onPositionCalculated: onPositionCalculated,
-    mountTo: mountPoint
+    mountTo: mountPoint,
+    zIndex: (0, _platformFeatureFlags.fg)('platform_editor_sel_toolbar_stacking_fix') ? _editorSharedStyles.akEditorFloatingDialogZIndex : undefined
   }, /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
     editorView: editorView,
     editorToolbarDockingPreference: editorToolbarDockingPreference,

package/dist/cjs/ui/TextCollapsedMenu.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 /**
  * Basic version of existing 'Text Styles' Menu - which doesn't dynamically change icon
  * and is also placeholder to render all other menus in the collapsed state.
@@ -18,25 +17,14 @@ var TextCollapsedMenu = exports.TextCollapsedMenu = function TextCollapsedMenu(_
   var children = _ref.children;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  if ((0, _expValEquals.expValEquals)('platform_editor_hide_toolbar_tooltips_fix', 'isEnabled', true)) {
-    return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
-      iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TextIcon, {
-        label: formatMessage(_messages.toolbarMessages.textStylesTooltip),
-        size: "small"
-      }),
-      enableMaxHeight: true,
-      tooltipComponent: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
-        content: formatMessage(_messages.toolbarMessages.textStylesTooltip)
-      })
-    }, children);
-  }
-  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
-    content: formatMessage(_messages.toolbarMessages.textStylesTooltip)
-  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
     iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TextIcon, {
       label: formatMessage(_messages.toolbarMessages.textStylesTooltip),
       size: "small"
     }),
-    enableMaxHeight: true
-  }, children));
+    enableMaxHeight: true,
+    tooltipComponent: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+      content: formatMessage(_messages.toolbarMessages.textStylesTooltip)
+    })
+  }, children);
 };

package/dist/es2019/ui/OverflowMenu.js

@@ -2,31 +2,19 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { ShowMoreHorizontalIcon, ToolbarDropdownMenu, ToolbarTooltip } from '@atlaskit/editor-toolbar';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export const OverflowMenu = ({
   children
 }) => {
   const intl = useIntl();
   const tooltipContent = intl.formatMessage(toolbarMessages.selectionToolbarOverflowMenuTooltip);
-  if (expValEquals('platform_editor_hide_toolbar_tooltips_fix', 'isEnabled', true)) {
-    return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
-      label: tooltipContent,
-      iconBefore: /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
-        label: ""
-      }),
-      tooltipComponent: /*#__PURE__*/React.createElement(ToolbarTooltip, {
-        content: tooltipContent,
-        position: "top"
-      })
-    }, children);
-  }
-  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
-    content: tooltipContent,
-    position: "top"
-  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+  return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
     label: tooltipContent,
     iconBefore: /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
       label: ""
+    }),
+    tooltipComponent: /*#__PURE__*/React.createElement(ToolbarTooltip, {
+      content: tooltipContent,
+      position: "top"
     })
-  }, children));
+  }, children);
 };

package/dist/es2019/ui/SelectionToolbar/index.js

@@ -10,8 +10,10 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { calculateToolbarPositionTrackHead, calculateToolbarPositionOnCellSelection } from '@atlaskit/editor-common/utils';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { AllSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarSection, ToolbarButtonGroup, ToolbarDropdownItemSection, useToolbarUI } from '@atlaskit/editor-toolbar';
 import { ToolbarModelRenderer } from '@atlaskit/editor-toolbar-model';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { SELECTION_TOOLBAR_LABEL } from '../consts';
@@ -95,7 +97,8 @@ export const SelectionToolbar = ({
     offset: [0, 10],
     target: getDomRefFromSelection(editorView),
     onPositionCalculated: onPositionCalculated,
-    mountTo: mountPoint
+    mountTo: mountPoint,
+    zIndex: fg('platform_editor_sel_toolbar_stacking_fix') ? akEditorFloatingDialogZIndex : undefined
   }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
     editorView: editorView,
     editorToolbarDockingPreference: editorToolbarDockingPreference,

package/dist/es2019/ui/TextCollapsedMenu.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownMenu, ToolbarTooltip, TextIcon } from '@atlaskit/editor-toolbar';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 /**
  * Basic version of existing 'Text Styles' Menu - which doesn't dynamically change icon
  * and is also placeholder to render all other menus in the collapsed state.
@@ -13,25 +12,14 @@ export const TextCollapsedMenu = ({
   const {
     formatMessage
   } = useIntl();
-  if (expValEquals('platform_editor_hide_toolbar_tooltips_fix', 'isEnabled', true)) {
-    return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
-      iconBefore: /*#__PURE__*/React.createElement(TextIcon, {
-        label: formatMessage(toolbarMessages.textStylesTooltip),
-        size: "small"
-      }),
-      enableMaxHeight: true,
-      tooltipComponent: /*#__PURE__*/React.createElement(ToolbarTooltip, {
-        content: formatMessage(toolbarMessages.textStylesTooltip)
-      })
-    }, children);
-  }
-  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
-    content: formatMessage(toolbarMessages.textStylesTooltip)
-  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+  return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
     iconBefore: /*#__PURE__*/React.createElement(TextIcon, {
       label: formatMessage(toolbarMessages.textStylesTooltip),
       size: "small"
     }),
-    enableMaxHeight: true
-  }, children));
+    enableMaxHeight: true,
+    tooltipComponent: /*#__PURE__*/React.createElement(ToolbarTooltip, {
+      content: formatMessage(toolbarMessages.textStylesTooltip)
+    })
+  }, children);
 };

package/dist/esm/ui/OverflowMenu.js

@@ -2,30 +2,18 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { ShowMoreHorizontalIcon, ToolbarDropdownMenu, ToolbarTooltip } from '@atlaskit/editor-toolbar';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export var OverflowMenu = function OverflowMenu(_ref) {
   var children = _ref.children;
   var intl = useIntl();
   var tooltipContent = intl.formatMessage(toolbarMessages.selectionToolbarOverflowMenuTooltip);
-  if (expValEquals('platform_editor_hide_toolbar_tooltips_fix', 'isEnabled', true)) {
-    return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
-      label: tooltipContent,
-      iconBefore: /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
-        label: ""
-      }),
-      tooltipComponent: /*#__PURE__*/React.createElement(ToolbarTooltip, {
-        content: tooltipContent,
-        position: "top"
-      })
-    }, children);
-  }
-  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
-    content: tooltipContent,
-    position: "top"
-  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+  return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
     label: tooltipContent,
     iconBefore: /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
       label: ""
+    }),
+    tooltipComponent: /*#__PURE__*/React.createElement(ToolbarTooltip, {
+      content: tooltipContent,
+      position: "top"
     })
-  }, children));
+  }, children);
 };

package/dist/esm/ui/SelectionToolbar/index.js

@@ -10,8 +10,10 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { calculateToolbarPositionTrackHead, calculateToolbarPositionOnCellSelection } from '@atlaskit/editor-common/utils';
 import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
 import { AllSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { ToolbarSection, ToolbarButtonGroup, ToolbarDropdownItemSection, useToolbarUI } from '@atlaskit/editor-toolbar';
 import { ToolbarModelRenderer } from '@atlaskit/editor-toolbar-model';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { SELECTION_TOOLBAR_LABEL } from '../consts';
@@ -94,7 +96,8 @@ export var SelectionToolbar = function SelectionToolbar(_ref) {
     offset: [0, 10],
     target: getDomRefFromSelection(editorView),
     onPositionCalculated: onPositionCalculated,
-    mountTo: mountPoint
+    mountTo: mountPoint,
+    zIndex: fg('platform_editor_sel_toolbar_stacking_fix') ? akEditorFloatingDialogZIndex : undefined
   }, /*#__PURE__*/React.createElement(EditorToolbarProvider, {
     editorView: editorView,
     editorToolbarDockingPreference: editorToolbarDockingPreference,

package/dist/esm/ui/TextCollapsedMenu.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { ToolbarDropdownMenu, ToolbarTooltip, TextIcon } from '@atlaskit/editor-toolbar';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 /**
  * Basic version of existing 'Text Styles' Menu - which doesn't dynamically change icon
  * and is also placeholder to render all other menus in the collapsed state.
@@ -11,25 +10,14 @@ export var TextCollapsedMenu = function TextCollapsedMenu(_ref) {
   var children = _ref.children;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  if (expValEquals('platform_editor_hide_toolbar_tooltips_fix', 'isEnabled', true)) {
-    return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
-      iconBefore: /*#__PURE__*/React.createElement(TextIcon, {
-        label: formatMessage(toolbarMessages.textStylesTooltip),
-        size: "small"
-      }),
-      enableMaxHeight: true,
-      tooltipComponent: /*#__PURE__*/React.createElement(ToolbarTooltip, {
-        content: formatMessage(toolbarMessages.textStylesTooltip)
-      })
-    }, children);
-  }
-  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
-    content: formatMessage(toolbarMessages.textStylesTooltip)
-  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+  return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
     iconBefore: /*#__PURE__*/React.createElement(TextIcon, {
       label: formatMessage(toolbarMessages.textStylesTooltip),
       size: "small"
     }),
-    enableMaxHeight: true
-  }, children));
+    enableMaxHeight: true,
+    tooltipComponent: /*#__PURE__*/React.createElement(ToolbarTooltip, {
+      content: formatMessage(toolbarMessages.textStylesTooltip)
+    })
+  }, children);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-toolbar",
-	"version": "5.0.4",
+	"version": "5.1.1",
 	"description": "Toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,16 +36,17 @@
 		"@atlaskit/editor-plugin-user-intent": "^6.0.0",
 		"@atlaskit/editor-plugin-user-preferences": "^6.0.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
-		"@atlaskit/editor-toolbar": "^0.19.0",
+		"@atlaskit/editor-shared-styles": "^3.10.0",
+		"@atlaskit/editor-toolbar": "^0.20.0",
 		"@atlaskit/editor-toolbar-model": "^0.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^39.0.0",
+		"@atlaskit/tmp-editor-statsig": "^40.2.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^112.3.0",
+		"@atlaskit/editor-common": "^112.4.0",
 		"react": "^18.2.0"
 	},
 	"platform-feature-flags": {
@@ -54,6 +55,9 @@
 		},
 		"platform_editor_toolbar_open_experience_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_sel_toolbar_stacking_fix": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {