@atlaskit/editor-plugin-selection-extension 10.3.10 → 10.3.12

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-selection-extension
 
+## 10.3.12
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.3.11
+
+### Patch Changes
+
+- [`25ad5c762c280`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/25ad5c762c280) -
+  [ux] Add truncation on the extention label in block menu
+- [`ea60429849f59`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ea60429849f59) -
+  Clean up platform_editor_selection_extension_lozenge fg
+- Updated dependencies
+
 ## 10.3.10
 
 ### Patch Changes

package/dist/cjs/ui/menu/SelectionExtensionDropdownItem.compiled.css

@@ -1 +1,9 @@
-._18u01b66{margin-left:var(--ds-space-050,4px)}
+._18m915vq{overflow-y:hidden}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._1reo15vq{overflow-x:hidden}
+._1ul9idpf{min-width:0}
+._4cvr1h6o{align-items:center}
+._o5721q9c{white-space:nowrap}

package/dist/cjs/ui/menu/SelectionExtensionDropdownItem.js

@@ -2,13 +2,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectionExtensionDropdownItem = void 0;
 require("./SelectionExtensionDropdownItem.compiled.css");
 var _runtime = require("@compiled/react/runtime");
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
@@ -18,8 +20,11 @@ var _main = require("../../pm-plugins/main");
 var _utils = require("../../pm-plugins/utils");
 var _types = require("../../types");
 var _SelectionExtensionComponentContext = require("../SelectionExtensionComponentContext");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
-  lozenge: "_18u01b66"
+  contentWrapper: "_1e0c1txw _4cvr1h6o _1ul9idpf",
+  label: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c _1ul9idpf",
+  lozenge: "_18u01b66 _1o9zidpf"
 };
 var SelectionExtensionDropdownItem = exports.SelectionExtensionDropdownItem = function SelectionExtensionDropdownItem(_ref) {
   var dropdownItem = _ref.dropdownItem;
@@ -85,6 +90,43 @@ var SelectionExtensionDropdownItem = exports.SelectionExtensionDropdownItem = fu
       }
     });
   };
+  var labelRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isTruncated = _useState2[0],
+    setIsTruncated = _useState2[1];
+  var handleMouseEnter = (0, _react.useCallback)(function () {
+    var el = labelRef.current;
+    if (el) {
+      setIsTruncated(el.scrollWidth > el.clientWidth);
+    }
+  }, []);
+  if ((0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_2')) {
+    return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+      content: isTruncated ? dropdownItem.label : null,
+      position: "top"
+    }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+      elemBefore: IconComponent ? /*#__PURE__*/_react.default.createElement(IconComponent, {
+        size: extensionLocation === 'inline-toolbar' && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_1') ? 'small' : undefined,
+        label: ""
+      }) : undefined,
+      onClick: handleClick,
+      isDisabled: dropdownItem.isDisabled
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      as: "span",
+      xcss: styles.contentWrapper,
+      onMouseOver: handleMouseEnter
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      as: "span",
+      xcss: styles.label,
+      ref: labelRef
+    }, dropdownItem.label), dropdownItem.lozenge ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      as: "span",
+      xcss: styles.lozenge
+    }, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+      appearance: "new"
+    }, dropdownItem.lozenge.label)) : undefined)));
+  }
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     elemBefore: IconComponent ? /*#__PURE__*/_react.default.createElement(IconComponent, {
       size: extensionLocation === 'inline-toolbar' && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_1') ? 'small' : undefined,

package/dist/cjs/ui/menu/SelectionExtensionNestedDropdownMenu.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _SelectionExtensionComponentContext = require("../SelectionExtensionComponentContext");
 var _SelectionExtensionDropdownItem = require("./SelectionExtensionDropdownItem");
 var ChildItems = function ChildItems(_ref) {
@@ -54,7 +55,9 @@ var SelectionExtensionNestedDropdownMenu = exports.SelectionExtensionNestedDropd
       label: ""
     }),
     onClick: handleClick,
-    dropdownTestId: "editor-selection-extension-menu"
+    dropdownTestId: "editor-selection-extension-menu",
+    shouldTitleWrap: (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_2') ? false : undefined,
+    tooltipContent: (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_2') ? nestedDropdownMenu.label : undefined
   }, /*#__PURE__*/_react.default.createElement(ChildItems, {
     nestedDropdownMenu: nestedDropdownMenu
   }));

package/dist/cjs/ui/toolbar-components/MenuItem.js

@@ -9,7 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _main = require("../../pm-plugins/main");
 var _utils = require("../../pm-plugins/utils");
@@ -56,7 +55,7 @@ var MenuItem = exports.MenuItem = function MenuItem(_ref) {
       }),
       onClick: onClickHandle(extension),
       isDisabled: extension.isDisabled
-    }, extension.label, extension.lozenge && (0, _platformFeatureFlags.fg)('platform_editor_selection_extension_lozenge') && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    }, extension.label, extension.lozenge && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       as: "span",
       paddingInline: "space.100"
     }, /*#__PURE__*/_react.default.createElement(_lozenge.default, {

package/dist/es2019/ui/menu/SelectionExtensionDropdownItem.compiled.css

@@ -1 +1,9 @@
-._18u01b66{margin-left:var(--ds-space-050,4px)}
+._18m915vq{overflow-y:hidden}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._1reo15vq{overflow-x:hidden}
+._1ul9idpf{min-width:0}
+._4cvr1h6o{align-items:center}
+._o5721q9c{white-space:nowrap}

package/dist/es2019/ui/menu/SelectionExtensionDropdownItem.js

@@ -1,9 +1,9 @@
 /* SelectionExtensionDropdownItem.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./SelectionExtensionDropdownItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { ToolbarDropdownItem, ToolbarTooltip } from '@atlaskit/editor-toolbar';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
@@ -12,7 +12,9 @@ import { getSelectionAdfInfoNew, getSelectionTextInfoNew } from '../../pm-plugin
 import { SelectionExtensionActionTypes } from '../../types';
 import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
 const styles = {
-  lozenge: "_18u01b66"
+  contentWrapper: "_1e0c1txw _4cvr1h6o _1ul9idpf",
+  label: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c _1ul9idpf",
+  lozenge: "_18u01b66 _1o9zidpf"
 };
 export const SelectionExtensionDropdownItem = ({
   dropdownItem
@@ -82,6 +84,40 @@ export const SelectionExtensionDropdownItem = ({
       }
     });
   };
+  const labelRef = useRef(null);
+  const [isTruncated, setIsTruncated] = useState(false);
+  const handleMouseEnter = useCallback(() => {
+    const el = labelRef.current;
+    if (el) {
+      setIsTruncated(el.scrollWidth > el.clientWidth);
+    }
+  }, []);
+  if (fg('platform_editor_block_menu_v2_patch_2')) {
+    return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+      content: isTruncated ? dropdownItem.label : null,
+      position: "top"
+    }, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+      elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
+        size: extensionLocation === 'inline-toolbar' && fg('platform_editor_block_menu_v2_patch_1') ? 'small' : undefined,
+        label: ""
+      }) : undefined,
+      onClick: handleClick,
+      isDisabled: dropdownItem.isDisabled
+    }, /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.contentWrapper,
+      onMouseOver: handleMouseEnter
+    }, /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.label,
+      ref: labelRef
+    }, dropdownItem.label), dropdownItem.lozenge ? /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.lozenge
+    }, /*#__PURE__*/React.createElement(Lozenge, {
+      appearance: "new"
+    }, dropdownItem.lozenge.label)) : undefined)));
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
       size: extensionLocation === 'inline-toolbar' && fg('platform_editor_block_menu_v2_patch_1') ? 'small' : undefined,

package/dist/es2019/ui/menu/SelectionExtensionNestedDropdownMenu.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
 import { SelectionExtensionDropdownItem } from './SelectionExtensionDropdownItem';
 const ChildItems = ({
@@ -48,7 +49,9 @@ export const SelectionExtensionNestedDropdownMenu = ({
       label: ""
     }),
     onClick: handleClick,
-    dropdownTestId: "editor-selection-extension-menu"
+    dropdownTestId: "editor-selection-extension-menu",
+    shouldTitleWrap: fg('platform_editor_block_menu_v2_patch_2') ? false : undefined,
+    tooltipContent: fg('platform_editor_block_menu_v2_patch_2') ? nestedDropdownMenu.label : undefined
   }, /*#__PURE__*/React.createElement(ChildItems, {
     nestedDropdownMenu: nestedDropdownMenu
   }));

package/dist/es2019/ui/toolbar-components/MenuItem.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import Lozenge from '@atlaskit/lozenge';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { selectionExtensionPluginKey } from '../../pm-plugins/main';
 import { getSelectionAdfInfoNew, getSelectionTextInfo } from '../../pm-plugins/utils';
@@ -51,7 +50,7 @@ export const MenuItem = ({
       }),
       onClick: onClickHandle(extension),
       isDisabled: extension.isDisabled
-    }, extension.label, extension.lozenge && fg('platform_editor_selection_extension_lozenge') && /*#__PURE__*/React.createElement(Box, {
+    }, extension.label, extension.lozenge && /*#__PURE__*/React.createElement(Box, {
       as: "span",
       paddingInline: "space.100"
     }, /*#__PURE__*/React.createElement(Lozenge, {

package/dist/esm/ui/menu/SelectionExtensionDropdownItem.compiled.css

@@ -1 +1,9 @@
-._18u01b66{margin-left:var(--ds-space-050,4px)}
+._18m915vq{overflow-y:hidden}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._1reo15vq{overflow-x:hidden}
+._1ul9idpf{min-width:0}
+._4cvr1h6o{align-items:center}
+._o5721q9c{white-space:nowrap}

package/dist/esm/ui/menu/SelectionExtensionDropdownItem.js

@@ -1,9 +1,10 @@
 /* SelectionExtensionDropdownItem.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./SelectionExtensionDropdownItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { ToolbarDropdownItem, ToolbarTooltip } from '@atlaskit/editor-toolbar';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
@@ -12,7 +13,9 @@ import { getSelectionAdfInfoNew, getSelectionTextInfoNew } from '../../pm-plugin
 import { SelectionExtensionActionTypes } from '../../types';
 import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
 var styles = {
-  lozenge: "_18u01b66"
+  contentWrapper: "_1e0c1txw _4cvr1h6o _1ul9idpf",
+  label: "_1reo15vq _18m915vq _1bto1l2s _o5721q9c _1ul9idpf",
+  lozenge: "_18u01b66 _1o9zidpf"
 };
 export var SelectionExtensionDropdownItem = function SelectionExtensionDropdownItem(_ref) {
   var dropdownItem = _ref.dropdownItem;
@@ -78,6 +81,43 @@ export var SelectionExtensionDropdownItem = function SelectionExtensionDropdownI
       }
     });
   };
+  var labelRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isTruncated = _useState2[0],
+    setIsTruncated = _useState2[1];
+  var handleMouseEnter = useCallback(function () {
+    var el = labelRef.current;
+    if (el) {
+      setIsTruncated(el.scrollWidth > el.clientWidth);
+    }
+  }, []);
+  if (fg('platform_editor_block_menu_v2_patch_2')) {
+    return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+      content: isTruncated ? dropdownItem.label : null,
+      position: "top"
+    }, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+      elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
+        size: extensionLocation === 'inline-toolbar' && fg('platform_editor_block_menu_v2_patch_1') ? 'small' : undefined,
+        label: ""
+      }) : undefined,
+      onClick: handleClick,
+      isDisabled: dropdownItem.isDisabled
+    }, /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.contentWrapper,
+      onMouseOver: handleMouseEnter
+    }, /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.label,
+      ref: labelRef
+    }, dropdownItem.label), dropdownItem.lozenge ? /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: styles.lozenge
+    }, /*#__PURE__*/React.createElement(Lozenge, {
+      appearance: "new"
+    }, dropdownItem.lozenge.label)) : undefined)));
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
       size: extensionLocation === 'inline-toolbar' && fg('platform_editor_block_menu_v2_patch_1') ? 'small' : undefined,

package/dist/esm/ui/menu/SelectionExtensionNestedDropdownMenu.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
 import { SelectionExtensionDropdownItem } from './SelectionExtensionDropdownItem';
 var ChildItems = function ChildItems(_ref) {
@@ -47,7 +48,9 @@ export var SelectionExtensionNestedDropdownMenu = function SelectionExtensionNes
       label: ""
     }),
     onClick: handleClick,
-    dropdownTestId: "editor-selection-extension-menu"
+    dropdownTestId: "editor-selection-extension-menu",
+    shouldTitleWrap: fg('platform_editor_block_menu_v2_patch_2') ? false : undefined,
+    tooltipContent: fg('platform_editor_block_menu_v2_patch_2') ? nestedDropdownMenu.label : undefined
   }, /*#__PURE__*/React.createElement(ChildItems, {
     nestedDropdownMenu: nestedDropdownMenu
   }));

package/dist/esm/ui/toolbar-components/MenuItem.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import Lozenge from '@atlaskit/lozenge';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { selectionExtensionPluginKey } from '../../pm-plugins/main';
 import { getSelectionAdfInfoNew, getSelectionTextInfo } from '../../pm-plugins/utils';
@@ -49,7 +48,7 @@ export var MenuItem = function MenuItem(_ref) {
       }),
       onClick: onClickHandle(extension),
       isDisabled: extension.isDisabled
-    }, extension.label, extension.lozenge && fg('platform_editor_selection_extension_lozenge') && /*#__PURE__*/React.createElement(Box, {
+    }, extension.label, extension.lozenge && /*#__PURE__*/React.createElement(Box, {
       as: "span",
       paddingInline: "space.100"
     }, /*#__PURE__*/React.createElement(Lozenge, {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-selection-extension",
-	"version": "10.3.10",
+	"version": "10.3.12",
 	"description": "editor-plugin-selection-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -48,11 +48,11 @@
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/editor-toolbar": "^0.19.0",
-		"@atlaskit/icon": "^30.0.0",
+		"@atlaskit/icon": "^31.0.0",
 		"@atlaskit/lozenge": "^13.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^24.0.0",
+		"@atlaskit/tmp-editor-statsig": "^25.0.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@babel/runtime": "^7.0.0",
 		"lodash": "^4.17.21",
@@ -110,14 +110,14 @@
 		"platform_editor_use_preferences_plugin": {
 			"type": "boolean"
 		},
-		"platform_editor_selection_extension_lozenge": {
-			"type": "boolean"
-		},
 		"platform_editor_selection_extension_improvement": {
 			"type": "boolean"
 		},
 		"platform_editor_block_menu_v2_patch_1": {
 			"type": "boolean"
+		},
+		"platform_editor_block_menu_v2_patch_2": {
+			"type": "boolean"
 		}
 	}
 }