@atlaskit/editor-plugin-floating-toolbar 21.1.1 → 21.2.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 21.2.0
+
+### Minor Changes
+
+- [`9df8889f51f21`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9df8889f51f21) -
+  Add an opt-in LinkPickerOptions.popupContainerSurface ('default' | 'none') that lets a custom link
+  picker component (e.g. RovoLinkPicker) suppress the editor's floating toolbar popup surface
+  (background, box-shadow, border-radius, padding) when it renders its own complete surface.
+  Threaded through FloatingToolbarConfig/Toolbar's new containerSurface prop. Defaults to the
+  existing wrapper surface; only a caller that explicitly opts in is affected.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 21.1.1
 
 ### Patch Changes

package/dist/cjs/floatingToolbarPlugin.js

@@ -292,6 +292,7 @@ function ContentComponent(_ref5) {
     align = _config$align === void 0 ? 'center' : _config$align,
     _config$className = config.className,
     className = _config$className === void 0 ? '' : _config$className,
+    containerSurface = config.containerSurface,
     height = config.height,
     width = config.width,
     zIndex = config.zIndex,
@@ -468,7 +469,8 @@ function ContentComponent(_ref5) {
         editorView: editorView
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
-        className: className
+        className: className,
+        containerSurface: containerSurface
         // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
         ,
         focusEditor: function focusEditor() {

package/dist/cjs/ui/Toolbar.js

@@ -445,24 +445,33 @@ var buttonGroupStylesNew = (0, _react2.css)({
   display: 'flex',
   gap: "var(--ds-space-075, 6px)"
 });
+var toolbarContainerBase = (0, _react2.css)({
+  display: 'flex',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: 1,
+  boxSizing: 'border-box',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& > div > div': {
+    alignItems: 'center'
+  }
+});
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var toolbarContainer = function toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect, firstElementIsSelect) {
-  return (0, _react2.css)({
+  var containerSurface = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'default';
+  return (0, _react2.css)(
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  containerSurface === 'none' ? undefined : {
     backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
     borderRadius: "var(--ds-radius-small, 3px)",
-    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
-    display: 'flex',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: 1,
-    boxSizing: 'border-box',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& > div > div': {
-      alignItems: 'center'
-    }
+    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  scrollable ?
+  containerSurface === 'none' ?
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  (0, _react2.css)({
+    padding: "var(--ds-space-0, 0px)"
+  }) : scrollable ?
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   (0, _react2.css)(
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -692,7 +701,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props$api2;
+      var _this$props$api2,
+        _this2 = this;
       var _this$props2 = this.props,
         items = _this$props2.items,
         className = _this$props2.className,
@@ -720,7 +730,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       }, (0, _react2.jsx)("div", {
         ref: this.toolbarContainerRef,
         css: function css() {
-          return [toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect)];
+          return [toolbarContainerBase, toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect, _this2.props.containerSurface)];
         },
         "aria-label": intl.formatMessage(_floatingToolbar.messages.floatingToolbarAriaLabel),
         role: "toolbar",

package/dist/es2019/floatingToolbarPlugin.js

@@ -283,6 +283,7 @@ export function ContentComponent({
     getDomRef = getDomRefFromSelection,
     align = 'center',
     className = '',
+    containerSurface,
     height,
     width,
     zIndex,
@@ -450,7 +451,8 @@ export function ContentComponent({
         editorView: editorView
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
-        className: className
+        className: className,
+        containerSurface: containerSurface
         // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
         ,
         focusEditor: () => editorView.focus(),

package/dist/es2019/ui/Toolbar.js

@@ -413,12 +413,7 @@ const buttonGroupStylesNew = css({
   display: 'flex',
   gap: "var(--ds-space-075, 6px)"
 });
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-const toolbarContainer = (areAnyNewToolbarFlagsEnabled, scrollable, hasSelect, firstElementIsSelect) => css({
-  backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
-  borderRadius: "var(--ds-radius-small, 3px)",
-  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
+const toolbarContainerBase = css({
   display: 'flex',
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 1,
@@ -427,9 +422,25 @@ const toolbarContainer = (areAnyNewToolbarFlagsEnabled, scrollable, hasSelect, f
   '& > div > div': {
     alignItems: 'center'
   }
+});
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+const toolbarContainer = (areAnyNewToolbarFlagsEnabled, scrollable, hasSelect, firstElementIsSelect,
+// See `FloatingToolbarConfig.containerSurface`: 'none' is for a single custom item that
+// already renders its own complete surface, so this wrapper's own surface is omitted.
+containerSurface = 'default') => css(
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+containerSurface === 'none' ? undefined : {
+  backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
+  borderRadius: "var(--ds-radius-small, 3px)",
+  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"
 },
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-scrollable ?
+containerSurface === 'none' ?
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+css({
+  padding: "var(--ds-space-0, 0px)"
+}) : scrollable ?
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
 css(
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -674,7 +685,7 @@ class Toolbar extends Component {
       intl: intl
     }, jsx("div", {
       ref: this.toolbarContainerRef,
-      css: () => [toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect)],
+      css: () => [toolbarContainerBase, toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect, this.props.containerSurface)],
       "aria-label": intl.formatMessage(messages.floatingToolbarAriaLabel),
       role: "toolbar",
       "data-testid": "editor-floating-toolbar"

package/dist/esm/floatingToolbarPlugin.js

@@ -282,6 +282,7 @@ export function ContentComponent(_ref5) {
     align = _config$align === void 0 ? 'center' : _config$align,
     _config$className = config.className,
     className = _config$className === void 0 ? '' : _config$className,
+    containerSurface = config.containerSurface,
     height = config.height,
     width = config.width,
     zIndex = config.zIndex,
@@ -458,7 +459,8 @@ export function ContentComponent(_ref5) {
         editorView: editorView
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
-        className: className
+        className: className,
+        containerSurface: containerSurface
         // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
         ,
         focusEditor: function focusEditor() {

package/dist/esm/ui/Toolbar.js

@@ -440,24 +440,33 @@ var buttonGroupStylesNew = css({
   display: 'flex',
   gap: "var(--ds-space-075, 6px)"
 });
+var toolbarContainerBase = css({
+  display: 'flex',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: 1,
+  boxSizing: 'border-box',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& > div > div': {
+    alignItems: 'center'
+  }
+});
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var toolbarContainer = function toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect, firstElementIsSelect) {
-  return css({
+  var containerSurface = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'default';
+  return css(
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  containerSurface === 'none' ? undefined : {
     backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
     borderRadius: "var(--ds-radius-small, 3px)",
-    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
-    display: 'flex',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: 1,
-    boxSizing: 'border-box',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& > div > div': {
-      alignItems: 'center'
-    }
+    boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  scrollable ?
+  containerSurface === 'none' ?
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  css({
+    padding: "var(--ds-space-0, 0px)"
+  }) : scrollable ?
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   css(
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -687,7 +696,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props$api2;
+      var _this$props$api2,
+        _this2 = this;
       var _this$props2 = this.props,
         items = _this$props2.items,
         className = _this$props2.className,
@@ -715,7 +725,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       }, jsx("div", {
         ref: this.toolbarContainerRef,
         css: function css() {
-          return [toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect)];
+          return [toolbarContainerBase, toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect, _this2.props.containerSurface)];
         },
         "aria-label": intl.formatMessage(messages.floatingToolbarAriaLabel),
         role: "toolbar",

package/dist/types/ui/Toolbar.d.ts

@@ -15,6 +15,8 @@ import type { FloatingToolbarPlugin } from '../floatingToolbarPluginType';
 export interface Props {
     api: ExtractInjectionAPI<FloatingToolbarPlugin> | undefined;
     className?: string;
+    /** See `FloatingToolbarConfig.containerSurface`. Defaults to `'default'`. */
+    containerSurface?: 'default' | 'none';
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
     dispatchCommand: (command?: Function) => void;
     editorView?: EditorView;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "21.1.1",
+	"version": "21.2.0",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -22,7 +22,7 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/adf-utils": "^20.9.0",
-		"@atlaskit/button": "^25.3.0",
+		"@atlaskit/button": "^25.4.0",
 		"@atlaskit/checkbox": "^19.2.0",
 		"@atlaskit/editor-palette": "^3.5.0",
 		"@atlaskit/editor-plugin-analytics": "^19.0.0",
@@ -56,7 +56,7 @@
 		"react-loosely-lazy": "^1.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^123.2.0",
+		"@atlaskit/editor-common": "^123.4.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"