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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,26 @@
1
1
  # @atlaskit/editor-plugin-floating-toolbar
2
2
 
3
+ ## 21.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`9df8889f51f21`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9df8889f51f21) -
8
+ Add an opt-in LinkPickerOptions.popupContainerSurface ('default' | 'none') that lets a custom link
9
+ picker component (e.g. RovoLinkPicker) suppress the editor's floating toolbar popup surface
10
+ (background, box-shadow, border-radius, padding) when it renders its own complete surface.
11
+ Threaded through FloatingToolbarConfig/Toolbar's new containerSurface prop. Defaults to the
12
+ existing wrapper surface; only a caller that explicitly opts in is affected.
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
17
+
18
+ ## 21.1.1
19
+
20
+ ### Patch Changes
21
+
22
+ - Updated dependencies
23
+
3
24
  ## 21.1.0
4
25
 
5
26
  ### Minor Changes
@@ -292,6 +292,7 @@ function ContentComponent(_ref5) {
292
292
  align = _config$align === void 0 ? 'center' : _config$align,
293
293
  _config$className = config.className,
294
294
  className = _config$className === void 0 ? '' : _config$className,
295
+ containerSurface = config.containerSurface,
295
296
  height = config.height,
296
297
  width = config.width,
297
298
  zIndex = config.zIndex,
@@ -468,7 +469,8 @@ function ContentComponent(_ref5) {
468
469
  editorView: editorView
469
470
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
470
471
  ,
471
- className: className
472
+ className: className,
473
+ containerSurface: containerSurface
472
474
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
473
475
  ,
474
476
  focusEditor: function focusEditor() {
@@ -12,8 +12,8 @@ var _react = _interopRequireWildcard(require("react"));
12
12
  var _button = _interopRequireDefault(require("@atlaskit/button/default/button"));
13
13
  var _checkbox = require("@atlaskit/checkbox/checkbox");
14
14
  var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
15
- var _modalDialog = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-dialog"));
16
15
  var _modalBody = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-body"));
16
+ var _modalDialog = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-dialog"));
17
17
  var _modalFooter = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-footer"));
18
18
  var _modalHeader = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-header"));
19
19
  var _modalTitle = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-title"));
@@ -11,13 +11,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
11
11
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
12
12
  var _react = _interopRequireWildcard(require("react"));
13
13
  var _reactLoadable = _interopRequireDefault(require("react-loadable"));
14
+ var _reactLooselyLazy = require("react-loosely-lazy");
14
15
  var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
15
16
  var _extensions = require("@atlaskit/editor-common/extensions");
16
17
  var _nesting = require("@atlaskit/editor-common/nesting");
17
18
  var _ui = require("@atlaskit/editor-common/ui");
18
19
  var _utils = require("@atlaskit/editor-common/utils");
19
20
  var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
20
- var _reactLooselyLazy = require("react-loosely-lazy");
21
21
  var _Dropdown = _interopRequireDefault(require("./Dropdown"));
22
22
  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 _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
23
23
  // oxlint-disable-next-line @atlassian/no-restricted-imports
@@ -8,8 +8,8 @@ exports.SimpleModal = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _button = _interopRequireDefault(require("@atlaskit/button/default/button"));
10
10
  var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
11
- var _modalDialog = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-dialog"));
12
11
  var _modalBody = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-body"));
12
+ var _modalDialog = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-dialog"));
13
13
  var _modalFooter = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-footer"));
14
14
  var _modalHeader = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-header"));
15
15
  var _modalTitle = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-title"));
@@ -445,24 +445,33 @@ var buttonGroupStylesNew = (0, _react2.css)({
445
445
  display: 'flex',
446
446
  gap: "var(--ds-space-075, 6px)"
447
447
  });
448
+ var toolbarContainerBase = (0, _react2.css)({
449
+ display: 'flex',
450
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
451
+ lineHeight: 1,
452
+ boxSizing: 'border-box',
453
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
454
+ '& > div > div': {
455
+ alignItems: 'center'
456
+ }
457
+ });
448
458
 
449
459
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
450
460
  var toolbarContainer = function toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect, firstElementIsSelect) {
451
- return (0, _react2.css)({
461
+ var containerSurface = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'default';
462
+ return (0, _react2.css)(
463
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
464
+ containerSurface === 'none' ? undefined : {
452
465
  backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
453
466
  borderRadius: "var(--ds-radius-small, 3px)",
454
- boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
455
- display: 'flex',
456
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
457
- lineHeight: 1,
458
- boxSizing: 'border-box',
459
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
460
- '& > div > div': {
461
- alignItems: 'center'
462
- }
467
+ boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"
463
468
  },
464
469
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
465
- scrollable ?
470
+ containerSurface === 'none' ?
471
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
472
+ (0, _react2.css)({
473
+ padding: "var(--ds-space-0, 0px)"
474
+ }) : scrollable ?
466
475
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
467
476
  (0, _react2.css)(
468
477
  // 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) {
692
701
  }, {
693
702
  key: "render",
694
703
  value: function render() {
695
- var _this$props$api2;
704
+ var _this$props$api2,
705
+ _this2 = this;
696
706
  var _this$props2 = this.props,
697
707
  items = _this$props2.items,
698
708
  className = _this$props2.className,
@@ -720,7 +730,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
720
730
  }, (0, _react2.jsx)("div", {
721
731
  ref: this.toolbarContainerRef,
722
732
  css: function css() {
723
- return [toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect)];
733
+ return [toolbarContainerBase, toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect, _this2.props.containerSurface)];
724
734
  },
725
735
  "aria-label": intl.formatMessage(_floatingToolbar.messages.floatingToolbarAriaLabel),
726
736
  role: "toolbar",
@@ -1,2 +1,3 @@
1
1
  /* eslint-disable @atlaskit/editor/no-re-export */
2
+
2
3
  export { floatingToolbarPlugin } from '../floatingToolbarPlugin';
@@ -283,6 +283,7 @@ export function ContentComponent({
283
283
  getDomRef = getDomRefFromSelection,
284
284
  align = 'center',
285
285
  className = '',
286
+ containerSurface,
286
287
  height,
287
288
  width,
288
289
  zIndex,
@@ -450,7 +451,8 @@ export function ContentComponent({
450
451
  editorView: editorView
451
452
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
452
453
  ,
453
- className: className
454
+ className: className,
455
+ containerSurface: containerSurface
454
456
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
455
457
  ,
456
458
  focusEditor: () => editorView.focus(),
@@ -3,8 +3,8 @@ import React, { useState } from 'react';
3
3
  import Button from '@atlaskit/button/default/button';
4
4
  import { Checkbox } from '@atlaskit/checkbox/checkbox';
5
5
  import { messages } from '@atlaskit/editor-common/floating-toolbar';
6
- import Modal from '@atlaskit/modal-dialog/modal-dialog';
7
6
  import ModalBody from '@atlaskit/modal-dialog/modal-body';
7
+ import Modal from '@atlaskit/modal-dialog/modal-dialog';
8
8
  import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
9
9
  import ModalHeader from '@atlaskit/modal-dialog/modal-header';
10
10
  import ModalTitle from '@atlaskit/modal-dialog/modal-title';
@@ -1,13 +1,13 @@
1
1
  import React, { useEffect, useState } from 'react';
2
2
  import Loadable from 'react-loadable';
3
+ // oxlint-disable-next-line @atlassian/no-restricted-imports
4
+ import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
3
5
  import ButtonGroup from '@atlaskit/button/button-group';
4
6
  import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common/extensions';
5
7
  import { isNestedTablesSupported, isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
6
8
  import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
7
9
  import { nodeToJSON } from '@atlaskit/editor-common/utils';
8
10
  import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
9
- // oxlint-disable-next-line @atlassian/no-restricted-imports
10
- import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
11
11
  import Dropdown from './Dropdown';
12
12
  const noop = () => null;
13
13
  const isDefaultExport = mod => {
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
2
  import Button from '@atlaskit/button/default/button';
3
3
  import { messages } from '@atlaskit/editor-common/floating-toolbar';
4
- import Modal from '@atlaskit/modal-dialog/modal-dialog';
5
4
  import ModalBody from '@atlaskit/modal-dialog/modal-body';
5
+ import Modal from '@atlaskit/modal-dialog/modal-dialog';
6
6
  import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
7
7
  import ModalHeader from '@atlaskit/modal-dialog/modal-header';
8
8
  import ModalTitle from '@atlaskit/modal-dialog/modal-title';
@@ -5,6 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
5
5
  * @jsxRuntime classic
6
6
  * @jsx jsx
7
7
  */
8
+
8
9
  import React, { Component } from 'react';
9
10
 
10
11
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -412,12 +413,7 @@ const buttonGroupStylesNew = css({
412
413
  display: 'flex',
413
414
  gap: "var(--ds-space-075, 6px)"
414
415
  });
415
-
416
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
417
- const toolbarContainer = (areAnyNewToolbarFlagsEnabled, scrollable, hasSelect, firstElementIsSelect) => css({
418
- backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
419
- borderRadius: "var(--ds-radius-small, 3px)",
420
- boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
416
+ const toolbarContainerBase = css({
421
417
  display: 'flex',
422
418
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
423
419
  lineHeight: 1,
@@ -426,9 +422,25 @@ const toolbarContainer = (areAnyNewToolbarFlagsEnabled, scrollable, hasSelect, f
426
422
  '& > div > div': {
427
423
  alignItems: 'center'
428
424
  }
425
+ });
426
+
427
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
428
+ const toolbarContainer = (areAnyNewToolbarFlagsEnabled, scrollable, hasSelect, firstElementIsSelect,
429
+ // See `FloatingToolbarConfig.containerSurface`: 'none' is for a single custom item that
430
+ // already renders its own complete surface, so this wrapper's own surface is omitted.
431
+ containerSurface = 'default') => css(
432
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
433
+ containerSurface === 'none' ? undefined : {
434
+ backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
435
+ borderRadius: "var(--ds-radius-small, 3px)",
436
+ boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"
429
437
  },
430
438
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
431
- scrollable ?
439
+ containerSurface === 'none' ?
440
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
441
+ css({
442
+ padding: "var(--ds-space-0, 0px)"
443
+ }) : scrollable ?
432
444
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
433
445
  css(
434
446
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -673,7 +685,7 @@ class Toolbar extends Component {
673
685
  intl: intl
674
686
  }, jsx("div", {
675
687
  ref: this.toolbarContainerRef,
676
- css: () => [toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect)],
688
+ css: () => [toolbarContainerBase, toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect, this.props.containerSurface)],
677
689
  "aria-label": intl.formatMessage(messages.floatingToolbarAriaLabel),
678
690
  role: "toolbar",
679
691
  "data-testid": "editor-floating-toolbar"
@@ -1,2 +1,3 @@
1
1
  /* eslint-disable @atlaskit/editor/no-re-export */
2
+
2
3
  export { floatingToolbarPlugin } from '../floatingToolbarPlugin';
@@ -282,6 +282,7 @@ export function ContentComponent(_ref5) {
282
282
  align = _config$align === void 0 ? 'center' : _config$align,
283
283
  _config$className = config.className,
284
284
  className = _config$className === void 0 ? '' : _config$className,
285
+ containerSurface = config.containerSurface,
285
286
  height = config.height,
286
287
  width = config.width,
287
288
  zIndex = config.zIndex,
@@ -458,7 +459,8 @@ export function ContentComponent(_ref5) {
458
459
  editorView: editorView
459
460
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
460
461
  ,
461
- className: className
462
+ className: className,
463
+ containerSurface: containerSurface
462
464
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
463
465
  ,
464
466
  focusEditor: function focusEditor() {
@@ -4,8 +4,8 @@ import React, { useState } from 'react';
4
4
  import Button from '@atlaskit/button/default/button';
5
5
  import { Checkbox } from '@atlaskit/checkbox/checkbox';
6
6
  import { messages } from '@atlaskit/editor-common/floating-toolbar';
7
- import Modal from '@atlaskit/modal-dialog/modal-dialog';
8
7
  import ModalBody from '@atlaskit/modal-dialog/modal-body';
8
+ import Modal from '@atlaskit/modal-dialog/modal-dialog';
9
9
  import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
10
10
  import ModalHeader from '@atlaskit/modal-dialog/modal-header';
11
11
  import ModalTitle from '@atlaskit/modal-dialog/modal-title';
@@ -3,14 +3,14 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
3
3
  import _regeneratorRuntime from "@babel/runtime/regenerator";
4
4
  import React, { useEffect, useState } from 'react';
5
5
  import Loadable from 'react-loadable';
6
+ // oxlint-disable-next-line @atlassian/no-restricted-imports
7
+ import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
6
8
  import ButtonGroup from '@atlaskit/button/button-group';
7
9
  import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common/extensions';
8
10
  import { isNestedTablesSupported, isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
9
11
  import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
10
12
  import { nodeToJSON } from '@atlaskit/editor-common/utils';
11
13
  import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
12
- // oxlint-disable-next-line @atlassian/no-restricted-imports
13
- import { lazyForPaint, LazySuspense } from 'react-loosely-lazy';
14
14
  import Dropdown from './Dropdown';
15
15
  var noop = function noop() {
16
16
  return null;
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
2
  import Button from '@atlaskit/button/default/button';
3
3
  import { messages } from '@atlaskit/editor-common/floating-toolbar';
4
- import Modal from '@atlaskit/modal-dialog/modal-dialog';
5
4
  import ModalBody from '@atlaskit/modal-dialog/modal-body';
5
+ import Modal from '@atlaskit/modal-dialog/modal-dialog';
6
6
  import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
7
7
  import ModalHeader from '@atlaskit/modal-dialog/modal-header';
8
8
  import ModalTitle from '@atlaskit/modal-dialog/modal-title';
@@ -14,6 +14,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
14
14
  * @jsxRuntime classic
15
15
  * @jsx jsx
16
16
  */
17
+
17
18
  import React, { Component } from 'react';
18
19
 
19
20
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -439,24 +440,33 @@ var buttonGroupStylesNew = css({
439
440
  display: 'flex',
440
441
  gap: "var(--ds-space-075, 6px)"
441
442
  });
443
+ var toolbarContainerBase = css({
444
+ display: 'flex',
445
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
446
+ lineHeight: 1,
447
+ boxSizing: 'border-box',
448
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
449
+ '& > div > div': {
450
+ alignItems: 'center'
451
+ }
452
+ });
442
453
 
443
454
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
444
455
  var toolbarContainer = function toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect, firstElementIsSelect) {
445
- return css({
456
+ var containerSurface = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 'default';
457
+ return css(
458
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
459
+ containerSurface === 'none' ? undefined : {
446
460
  backgroundColor: "var(--ds-surface-overlay, #FFFFFF)",
447
461
  borderRadius: "var(--ds-radius-small, 3px)",
448
- boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
449
- display: 'flex',
450
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
451
- lineHeight: 1,
452
- boxSizing: 'border-box',
453
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
454
- '& > div > div': {
455
- alignItems: 'center'
456
- }
462
+ boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"
457
463
  },
458
464
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
459
- scrollable ?
465
+ containerSurface === 'none' ?
466
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
467
+ css({
468
+ padding: "var(--ds-space-0, 0px)"
469
+ }) : scrollable ?
460
470
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
461
471
  css(
462
472
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -686,7 +696,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
686
696
  }, {
687
697
  key: "render",
688
698
  value: function render() {
689
- var _this$props$api2;
699
+ var _this$props$api2,
700
+ _this2 = this;
690
701
  var _this$props2 = this.props,
691
702
  items = _this$props2.items,
692
703
  className = _this$props2.className,
@@ -714,7 +725,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
714
725
  }, jsx("div", {
715
726
  ref: this.toolbarContainerRef,
716
727
  css: function css() {
717
- return [toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect)];
728
+ return [toolbarContainerBase, toolbarContainer(areAnyNewToolbarFlagsEnabled, scrollable, hasSelect !== undefined, firstElementIsSelect, _this2.props.containerSurface)];
718
729
  },
719
730
  "aria-label": intl.formatMessage(messages.floatingToolbarAriaLabel),
720
731
  role: "toolbar",
@@ -15,6 +15,8 @@ import type { FloatingToolbarPlugin } from '../floatingToolbarPluginType';
15
15
  export interface Props {
16
16
  api: ExtractInjectionAPI<FloatingToolbarPlugin> | undefined;
17
17
  className?: string;
18
+ /** See `FloatingToolbarConfig.containerSurface`. Defaults to `'default'`. */
19
+ containerSurface?: 'default' | 'none';
18
20
  dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
19
21
  dispatchCommand: (command?: Function) => void;
20
22
  editorView?: EditorView;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-floating-toolbar",
3
- "version": "21.1.0",
3
+ "version": "21.2.0",
4
4
  "description": "Floating toolbar plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -22,7 +22,7 @@
22
22
  "atlaskit:src": "src/index.ts",
23
23
  "dependencies": {
24
24
  "@atlaskit/adf-utils": "^20.9.0",
25
- "@atlaskit/button": "^25.3.0",
25
+ "@atlaskit/button": "^25.4.0",
26
26
  "@atlaskit/checkbox": "^19.2.0",
27
27
  "@atlaskit/editor-palette": "^3.5.0",
28
28
  "@atlaskit/editor-plugin-analytics": "^19.0.0",
@@ -44,7 +44,7 @@
44
44
  "@atlaskit/platform-feature-flags": "^2.2.0",
45
45
  "@atlaskit/primitives": "^22.5.0",
46
46
  "@atlaskit/select": "^22.11.0",
47
- "@atlaskit/tmp-editor-statsig": "^200.0.0",
47
+ "@atlaskit/tmp-editor-statsig": "^201.0.0",
48
48
  "@atlaskit/tokens": "^18.2.0",
49
49
  "@atlaskit/tooltip": "^24.3.0",
50
50
  "@babel/runtime": "^7.0.0",
@@ -56,7 +56,7 @@
56
56
  "react-loosely-lazy": "^1.0.0"
57
57
  },
58
58
  "peerDependencies": {
59
- "@atlaskit/editor-common": "^123.0.0",
59
+ "@atlaskit/editor-common": "^123.4.0",
60
60
  "react": "^18.2.0 || ^19.2.0",
61
61
  "react-dom": "^18.2.0 || ^19.2.0",
62
62
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"