@atlaskit/editor-plugin-block-controls 13.2.16 → 13.2.17

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 13.2.17
+
+### Patch Changes
+
+- [`161922d5b8cee`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/161922d5b8cee) -
+  Fix editor tooltips affected by inline top-layer rendering. Table cell menu tooltips are no longer
+  constrained by the button background selector, and layout column drag handles now own their
+  wrapper layout without flattening the tooltip's visual surface.
+- Updated dependencies
+
 ## 13.2.16
 
 ### Patch Changes

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

@@ -1177,7 +1177,8 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     }, (0, _react2.jsx)(_tooltip.default, {
       content: tooltipContent,
       ignoreTooltipPointerEvents: true,
-      position: 'top'
+      position: 'top',
+      tag: (0, _platformFeatureFlags.fg)('platform-dst-top-layer-tooltip') ? 'span' : 'div'
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       ,
       onShow: function onShow() {
@@ -1264,7 +1265,8 @@ var DragHandleWithVisibility = exports.DragHandleWithVisibility = function DragH
   return (0, _react2.jsx)(_visibilityContainer.VisibilityContainer, {
     api: api,
     controlSide: !isLayoutColumn && !skipControlSideRestriction && rightSideControlsEnabled ? 'left' : undefined,
-    forceVisibleOnMouseOut: (0, _expValEquals.expValEquals)('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) && !!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused)
+    forceVisibleOnMouseOut: (0, _expValEquals.expValEquals)('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) && !!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused),
+    shouldUseDisplayContents: isLayoutColumn && (0, _platformFeatureFlags.fg)('platform-dst-top-layer-tooltip')
   }, (0, _react2.jsx)(DragHandle, {
     view: view,
     api: api,

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

@@ -37,6 +37,9 @@ var hiddenStyles = (0, _primitives.xcss)({
   opacity: 0,
   visibility: 'hidden'
 });
+var displayContentsStyles = (0, _primitives.xcss)({
+  display: 'contents'
+});
 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)"), {
@@ -51,11 +54,15 @@ var hiddenStylesCSS = (0, _react2.css)({
   opacity: 0,
   visibility: 'hidden'
 });
+var displayContentsStylesCSS = (0, _react2.css)({
+  display: 'contents'
+});
 var VisibilityContainer = exports.VisibilityContainer = function VisibilityContainer(_ref) {
   var api = _ref.api,
     children = _ref.children,
     controlSide = _ref.controlSide,
-    forceVisibleOnMouseOut = _ref.forceVisibleOnMouseOut;
+    forceVisibleOnMouseOut = _ref.forceVisibleOnMouseOut,
+    shouldUseDisplayContents = _ref.shouldUseDisplayContents;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['typeAhead', 'blockControls', 'editorViewMode', 'userIntent'], function (states) {
       var _states$typeAheadStat, _states$blockControls, _states$blockControls2, _states$blockControls3, _states$editorViewMod, _states$userIntentSta, _states$blockControls4;
       return {
@@ -128,12 +135,12 @@ var VisibilityContainer = exports.VisibilityContainer = function VisibilityConta
     exposure: true
   })) {
     return (0, _react2.jsx)("div", {
-      css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS]
+      css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS, shouldUseDisplayContents && displayContentsStylesCSS]
     }, children);
   }
-
+  return (0, _react2.jsx)(_primitives.Box
   // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-  return (0, _react2.jsx)(_primitives.Box, {
-    xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles]
+  , {
+    xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles, shouldUseDisplayContents && displayContentsStyles]
   }, children);
 };

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

@@ -1154,7 +1154,8 @@ export const DragHandle = ({
   }, jsx(Tooltip, {
     content: tooltipContent,
     ignoreTooltipPointerEvents: true,
-    position: 'top'
+    position: 'top',
+    tag: fg('platform-dst-top-layer-tooltip') ? 'span' : 'div'
     // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
     ,
     onShow: () => {
@@ -1237,7 +1238,8 @@ export const DragHandleWithVisibility = ({
   return jsx(VisibilityContainer, {
     api: api,
     controlSide: !isLayoutColumn && !skipControlSideRestriction && rightSideControlsEnabled ? 'left' : undefined,
-    forceVisibleOnMouseOut: expValEquals('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) && !!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused)
+    forceVisibleOnMouseOut: expValEquals('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) && !!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused),
+    shouldUseDisplayContents: isLayoutColumn && fg('platform-dst-top-layer-tooltip')
   }, jsx(DragHandle, {
     view: view,
     api: api,

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

@@ -24,6 +24,9 @@ const hiddenStyles = xcss({
   opacity: 0,
   visibility: 'hidden'
 });
+const displayContentsStyles = xcss({
+  display: 'contents'
+});
 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
@@ -40,11 +43,15 @@ const hiddenStylesCSS = css({
   opacity: 0,
   visibility: 'hidden'
 });
+const displayContentsStylesCSS = css({
+  display: 'contents'
+});
 export const VisibilityContainer = ({
   api,
   children,
   controlSide,
-  forceVisibleOnMouseOut
+  forceVisibleOnMouseOut,
+  shouldUseDisplayContents
 }) => {
   const {
     isTypeAheadOpen,
@@ -116,12 +123,12 @@ export const VisibilityContainer = ({
     exposure: true
   })) {
     return jsx("div", {
-      css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS]
+      css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS, shouldUseDisplayContents && displayContentsStylesCSS]
     }, children);
   }
-
+  return jsx(Box
   // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-  return jsx(Box, {
-    xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles]
+  , {
+    xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles, shouldUseDisplayContents && displayContentsStyles]
   }, children);
 };

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

@@ -1173,7 +1173,8 @@ export var DragHandle = function DragHandle(_ref) {
     }, jsx(Tooltip, {
       content: tooltipContent,
       ignoreTooltipPointerEvents: true,
-      position: 'top'
+      position: 'top',
+      tag: fg('platform-dst-top-layer-tooltip') ? 'span' : 'div'
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       ,
       onShow: function onShow() {
@@ -1260,7 +1261,8 @@ export var DragHandleWithVisibility = function DragHandleWithVisibility(_ref1) {
   return jsx(VisibilityContainer, {
     api: api,
     controlSide: !isLayoutColumn && !skipControlSideRestriction && rightSideControlsEnabled ? 'left' : undefined,
-    forceVisibleOnMouseOut: expValEquals('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) && !!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused)
+    forceVisibleOnMouseOut: expValEquals('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) && !!(handleOptions !== null && handleOptions !== void 0 && handleOptions.isFocused),
+    shouldUseDisplayContents: isLayoutColumn && fg('platform-dst-top-layer-tooltip')
   }, jsx(DragHandle, {
     view: view,
     api: api,

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

@@ -26,6 +26,9 @@ var hiddenStyles = xcss({
   opacity: 0,
   visibility: 'hidden'
 });
+var displayContentsStyles = xcss({
+  display: 'contents'
+});
 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)"), {
@@ -40,11 +43,15 @@ var hiddenStylesCSS = css({
   opacity: 0,
   visibility: 'hidden'
 });
+var displayContentsStylesCSS = css({
+  display: 'contents'
+});
 export var VisibilityContainer = function VisibilityContainer(_ref) {
   var api = _ref.api,
     children = _ref.children,
     controlSide = _ref.controlSide,
-    forceVisibleOnMouseOut = _ref.forceVisibleOnMouseOut;
+    forceVisibleOnMouseOut = _ref.forceVisibleOnMouseOut,
+    shouldUseDisplayContents = _ref.shouldUseDisplayContents;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['typeAhead', 'blockControls', 'editorViewMode', 'userIntent'], function (states) {
       var _states$typeAheadStat, _states$blockControls, _states$blockControls2, _states$blockControls3, _states$editorViewMod, _states$userIntentSta, _states$blockControls4;
       return {
@@ -117,12 +124,12 @@ export var VisibilityContainer = function VisibilityContainer(_ref) {
     exposure: true
   })) {
     return jsx("div", {
-      css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS]
+      css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS, shouldUseDisplayContents && displayContentsStylesCSS]
     }, children);
   }
-
+  return jsx(Box
   // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-  return jsx(Box, {
-    xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles]
+  , {
+    xcss: [baseStyles, shouldHide ? hiddenStyles : visibleStyles, shouldUseDisplayContents && displayContentsStyles]
   }, children);
 };

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

@@ -11,6 +11,10 @@ interface VisibilityContainerProps {
     children: React.ReactNode;
     controlSide?: 'left' | 'right';
     forceVisibleOnMouseOut?: boolean;
+    /**
+     * Set when the container should not create its own layout box while its descendants retain theirs.
+     */
+    shouldUseDisplayContents?: boolean;
 }
-export declare const VisibilityContainer: ({ api, children, controlSide, forceVisibleOnMouseOut, }: VisibilityContainerProps) => jsx.JSX.Element;
+export declare const VisibilityContainer: ({ api, children, controlSide, forceVisibleOnMouseOut, shouldUseDisplayContents, }: VisibilityContainerProps) => jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "13.2.16",
+	"version": "13.2.17",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^4.1.0",
 		"@atlaskit/primitives": "^22.1.0",
 		"@atlaskit/theme": "^26.1.0",
-		"@atlaskit/tmp-editor-statsig": "^131.0.0",
+		"@atlaskit/tmp-editor-statsig": "^132.0.0",
 		"@atlaskit/tokens": "^16.2.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@babel/runtime": "^7.0.0",
@@ -133,6 +133,10 @@
 		"platform_editor_layout_column_menu_kill_switch_1": {
 			"type": "boolean",
 			"referenceOnly": true
+		},
+		"platform-dst-top-layer-tooltip": {
+			"type": "boolean",
+			"referenceOnly": true
 		}
 	},
 	"devDependencies": {