@atlaskit/editor-plugin-floating-toolbar 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 1.4.0
+
+### Minor Changes
+
+- [#91653](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91653) [`57a3511f76c1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/57a3511f76c1) - ECA11Y-203: Added cursor back to the cell, after changing cell background
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.3.1
+
+### Patch Changes
+
+- [#92007](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92007) [`85525725cb0d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/85525725cb0d) - Migrated to the new button component
+
 ## 1.3.0
 
 ### Minor Changes

package/dist/cjs/plugin.js

@@ -207,7 +207,8 @@ function ContentComponent(_ref5) {
   }
   var config = configWithNodeInfo.config,
     node = configWithNodeInfo.node;
-  var items = config.items;
+  var items = config.items,
+    groupLabel = config.groupLabel;
   var title = config.title,
     _config$getDomRef = config.getDomRef,
     getDomRef = _config$getDomRef === void 0 ? getDomRefFromSelection : _config$getDomRef,
@@ -301,6 +302,7 @@ function ContentComponent(_ref5) {
       return /*#__PURE__*/_react.default.createElement(_ToolbarLoader.ToolbarLoader, {
         target: targetRef,
         items: toolbarItems,
+        groupLabel: groupLabel,
         node: node,
         dispatchCommand: dispatchCommand,
         editorView: editorView,

package/dist/cjs/ui/Toolbar.js

@@ -15,7 +15,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
@@ -36,13 +35,10 @@ var _Input = _interopRequireDefault(require("./Input"));
 var _ScrollButtons = require("./ScrollButtons");
 var _Select = _interopRequireDefault(require("./Select"));
 var _Separator = _interopRequireDefault(require("./Separator"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */
-/** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */ /** @jsx jsx */
 function groupItems(items) {
   var groupItems = items.reduce(function (accumulator, item, i) {
     var finalOutput = accumulator.finalOutput,
@@ -74,6 +70,7 @@ function groupItems(items) {
 }
 var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
   var items = _ref.items,
+    groupLabel = _ref.groupLabel,
     dispatchCommand = _ref.dispatchCommand,
     popupsMountPoint = _ref.popupsMountPoint,
     popupsBoundariesElement = _ref.popupsBoundariesElement,
@@ -224,7 +221,8 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
             //  and paletteColorTooltipMessages in item options.
             ,
             hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor,
-            paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages
+            paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages,
+            returnEscToButton: item.returnEscToButton
           });
         }
         if (item.selectType === 'emoji') {
@@ -271,7 +269,8 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
         return (0, _react2.jsx)("div", {
           key: index,
           css: buttonGroupStyles,
-          role: "radiogroup"
+          role: "radiogroup",
+          "aria-label": groupLabel !== null && groupLabel !== void 0 ? groupLabel : undefined
         }, element.map(function (item, idx) {
           return renderItem(item, idx);
         }));
@@ -301,12 +300,50 @@ var buttonGroupStyles = (0, _react2.css)({
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstElementIsSelect) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  display: flex;\n  line-height: 1;\n  box-sizing: border-box;\n\n  & > div > div {\n    align-items: center;\n  }\n  ", "\n"])), "var(--ds-surface-overlay, white)", "var(--ds-border-radius, 3px)", "var(--ds-shadow-overlay, ".concat("0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)", ")"), scrollable ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        ", "\n        overflow: hidden;\n      "])), hasSelect ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n              height: 40px;\n            "]))) : (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n              height: 32px;\n            "])))) : (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n        padding: ", " ", ";\n        ", "\n      "])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", firstElementIsSelect && (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n          padding-left: ", ";\n        "])), "var(--ds-space-050, 4px)")));
+  return (0, _react2.css)({
+    backgroundColor: "var(--ds-surface-overlay, white)",
+    borderRadius: "var(--ds-border-radius, 3px)",
+    boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)", ")"),
+    display: 'flex',
+    lineHeight: 1,
+    boxSizing: 'border-box',
+    '& > div > div': {
+      alignItems: 'center'
+    }
+  }, scrollable ? (0, _react2.css)(hasSelect ? (0, _react2.css)({
+    height: '40px'
+  }) : (0, _react2.css)({
+    height: '32px'
+  }), {
+    overflow: 'hidden'
+  }) : (0, _react2.css)({
+    padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)")
+  }, firstElementIsSelect && (0, _react2.css)({
+    paddingLeft: "var(--ds-space-050, 4px)"
+  })));
 };
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var toolbarOverflow = function toolbarOverflow(scrollable, scrollDisabled, firstElementIsSelect) {
-  return (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), scrollable ? (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n        ", "\n        -webkit-overflow-scrolling: touch;\n        padding: ", " 0 ", ";\n        > div {\n          > div:first-child {\n            ", "\n          }\n          > div:last-child {\n            margin-right: ", ";\n          }\n        }\n      "])), scrollDisabled ? (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n              overflow: hidden;\n            "]))) : (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n              overflow-x: auto;\n              overflow-y: hidden;\n            "]))), "var(--ds-space-050, 4px)", "var(--ds-space-600, 48px)", firstElementIsSelect ? (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n                  margin-left: ", ";\n                "])), "var(--ds-space-050, 4px)") : (0, _react2.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n                  margin-left: ", ";\n                "])), "var(--ds-space-100, 8px)"), "var(--ds-space-100, 8px)") : (0, _react2.css)({
+  return (0, _react2.css)(scrollable ? (0, _react2.css)(scrollDisabled ? (0, _react2.css)({
+    overflow: 'hidden'
+  }) : (0, _react2.css)({
+    overflowX: 'auto',
+    overflowY: 'hidden'
+  }), {
+    WebkitOverflowScrolling: 'touch',
+    padding: "var(--ds-space-050, 4px)".concat(" 0 ", "var(--ds-space-600, 48px)"),
+    '> div': {
+      '> div:first-child': firstElementIsSelect ? (0, _react2.css)({
+        marginLeft: "var(--ds-space-050, 4px)"
+      }) : (0, _react2.css)({
+        marginLeft: "var(--ds-space-100, 8px)"
+      }),
+      '> div:last-child': {
+        marginRight: "var(--ds-space-100, 8px)"
+      }
+    }
+  }) : (0, _react2.css)({
     display: 'flex'
   }));
 };

package/dist/es2019/plugin.js

@@ -200,7 +200,8 @@ function ContentComponent({
     node
   } = configWithNodeInfo;
   let {
-    items
+    items,
+    groupLabel
   } = config;
   const {
     title,
@@ -288,6 +289,7 @@ function ContentComponent({
       return /*#__PURE__*/React.createElement(ToolbarLoader, {
         target: targetRef,
         items: toolbarItems,
+        groupLabel: groupLabel,
         node: node,
         dispatchCommand: dispatchCommand,
         editorView: editorView,

package/dist/es2019/ui/Toolbar.js

@@ -55,6 +55,7 @@ export function groupItems(items) {
 }
 const ToolbarItems = /*#__PURE__*/React.memo(({
   items,
+  groupLabel,
   dispatchCommand,
   popupsMountPoint,
   popupsBoundariesElement,
@@ -192,7 +193,8 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
             //  and paletteColorTooltipMessages in item options.
             ,
             hexToPaletteColor: hexToEditorBackgroundPaletteColor,
-            paletteColorTooltipMessages: backgroundPaletteTooltipMessages
+            paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
+            returnEscToButton: item.returnEscToButton
           });
         }
         if (item.selectType === 'emoji') {
@@ -235,7 +237,8 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
         return jsx("div", {
           key: index,
           css: buttonGroupStyles,
-          role: "radiogroup"
+          role: "radiogroup",
+          "aria-label": groupLabel !== null && groupLabel !== void 0 ? groupLabel : undefined
         }, element.map((item, idx) => {
           return renderItem(item, idx);
         }));
@@ -262,59 +265,50 @@ const buttonGroupStyles = css({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-const toolbarContainer = (scrollable, hasSelect, firstElementIsSelect) => css`
-  background-color: ${"var(--ds-surface-overlay, white)"};
-  border-radius: ${"var(--ds-border-radius, 3px)"};
-  box-shadow: ${`var(--ds-shadow-overlay, ${`0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)`})`};
-  display: flex;
-  line-height: 1;
-  box-sizing: border-box;
-
-  & > div > div {
-    align-items: center;
+const toolbarContainer = (scrollable, hasSelect, firstElementIsSelect) => css({
+  backgroundColor: "var(--ds-surface-overlay, white)",
+  borderRadius: "var(--ds-border-radius, 3px)",
+  boxShadow: `var(--ds-shadow-overlay, ${`0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)`})`,
+  display: 'flex',
+  lineHeight: 1,
+  boxSizing: 'border-box',
+  '& > div > div': {
+    alignItems: 'center'
   }
-  ${scrollable ? css`
-        ${hasSelect ? css`
-              height: 40px;
-            ` : css`
-              height: 32px;
-            `}
-        overflow: hidden;
-      ` : css`
-        padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"};
-        ${firstElementIsSelect && css`
-          padding-left: ${"var(--ds-space-050, 4px)"};
-        `}
-      `}
-`;
+}, scrollable ? css(hasSelect ? css({
+  height: '40px'
+}) : css({
+  height: '32px'
+}), {
+  overflow: 'hidden'
+}) : css({
+  padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`
+}, firstElementIsSelect && css({
+  paddingLeft: "var(--ds-space-050, 4px)"
+})));
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-const toolbarOverflow = (scrollable, scrollDisabled, firstElementIsSelect) => css`
-  ${scrollable ? css`
-        ${scrollDisabled ? css`
-              overflow: hidden;
-            ` : css`
-              overflow-x: auto;
-              overflow-y: hidden;
-            `}
-        -webkit-overflow-scrolling: touch;
-        padding: ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-600, 48px)"};
-        > div {
-          > div:first-child {
-            ${firstElementIsSelect ? css`
-                  margin-left: ${"var(--ds-space-050, 4px)"};
-                ` : css`
-                  margin-left: ${"var(--ds-space-100, 8px)"};
-                `}
-          }
-          > div:last-child {
-            margin-right: ${"var(--ds-space-100, 8px)"};
-          }
-        }
-      ` : css({
+const toolbarOverflow = (scrollable, scrollDisabled, firstElementIsSelect) => css(scrollable ? css(scrollDisabled ? css({
+  overflow: 'hidden'
+}) : css({
+  overflowX: 'auto',
+  overflowY: 'hidden'
+}), {
+  WebkitOverflowScrolling: 'touch',
+  padding: `${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-600, 48px)"}`,
+  '> div': {
+    '> div:first-child': firstElementIsSelect ? css({
+      marginLeft: "var(--ds-space-050, 4px)"
+    }) : css({
+      marginLeft: "var(--ds-space-100, 8px)"
+    }),
+    '> div:last-child': {
+      marginRight: "var(--ds-space-100, 8px)"
+    }
+  }
+}) : css({
   display: 'flex'
-})}
-`;
+}));
 // eslint-disable-next-line @repo/internal/react/no-class-components
 class Toolbar extends Component {
   constructor(props) {

package/dist/esm/plugin.js

@@ -198,7 +198,8 @@ function ContentComponent(_ref5) {
   }
   var config = configWithNodeInfo.config,
     node = configWithNodeInfo.node;
-  var items = config.items;
+  var items = config.items,
+    groupLabel = config.groupLabel;
   var title = config.title,
     _config$getDomRef = config.getDomRef,
     getDomRef = _config$getDomRef === void 0 ? getDomRefFromSelection : _config$getDomRef,
@@ -292,6 +293,7 @@ function ContentComponent(_ref5) {
       return /*#__PURE__*/React.createElement(ToolbarLoader, {
         target: targetRef,
         items: toolbarItems,
+        groupLabel: groupLabel,
         node: node,
         dispatchCommand: dispatchCommand,
         editorView: editorView,

package/dist/esm/ui/Toolbar.js

@@ -6,8 +6,6 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */
@@ -63,6 +61,7 @@ export function groupItems(items) {
 }
 var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
   var items = _ref.items,
+    groupLabel = _ref.groupLabel,
     dispatchCommand = _ref.dispatchCommand,
     popupsMountPoint = _ref.popupsMountPoint,
     popupsBoundariesElement = _ref.popupsBoundariesElement,
@@ -213,7 +212,8 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
             //  and paletteColorTooltipMessages in item options.
             ,
             hexToPaletteColor: hexToEditorBackgroundPaletteColor,
-            paletteColorTooltipMessages: backgroundPaletteTooltipMessages
+            paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
+            returnEscToButton: item.returnEscToButton
           });
         }
         if (item.selectType === 'emoji') {
@@ -260,7 +260,8 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
         return jsx("div", {
           key: index,
           css: buttonGroupStyles,
-          role: "radiogroup"
+          role: "radiogroup",
+          "aria-label": groupLabel !== null && groupLabel !== void 0 ? groupLabel : undefined
         }, element.map(function (item, idx) {
           return renderItem(item, idx);
         }));
@@ -290,12 +291,50 @@ var buttonGroupStyles = css({
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstElementIsSelect) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  display: flex;\n  line-height: 1;\n  box-sizing: border-box;\n\n  & > div > div {\n    align-items: center;\n  }\n  ", "\n"])), "var(--ds-surface-overlay, white)", "var(--ds-border-radius, 3px)", "var(--ds-shadow-overlay, ".concat("0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)", ")"), scrollable ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        ", "\n        overflow: hidden;\n      "])), hasSelect ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              height: 40px;\n            "]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n              height: 32px;\n            "])))) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        padding: ", " ", ";\n        ", "\n      "])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", firstElementIsSelect && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          padding-left: ", ";\n        "])), "var(--ds-space-050, 4px)")));
+  return css({
+    backgroundColor: "var(--ds-surface-overlay, white)",
+    borderRadius: "var(--ds-border-radius, 3px)",
+    boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)", ")"),
+    display: 'flex',
+    lineHeight: 1,
+    boxSizing: 'border-box',
+    '& > div > div': {
+      alignItems: 'center'
+    }
+  }, scrollable ? css(hasSelect ? css({
+    height: '40px'
+  }) : css({
+    height: '32px'
+  }), {
+    overflow: 'hidden'
+  }) : css({
+    padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)")
+  }, firstElementIsSelect && css({
+    paddingLeft: "var(--ds-space-050, 4px)"
+  })));
 };
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var toolbarOverflow = function toolbarOverflow(scrollable, scrollDisabled, firstElementIsSelect) {
-  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n"])), scrollable ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        ", "\n        -webkit-overflow-scrolling: touch;\n        padding: ", " 0 ", ";\n        > div {\n          > div:first-child {\n            ", "\n          }\n          > div:last-child {\n            margin-right: ", ";\n          }\n        }\n      "])), scrollDisabled ? css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n              overflow: hidden;\n            "]))) : css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n              overflow-x: auto;\n              overflow-y: hidden;\n            "]))), "var(--ds-space-050, 4px)", "var(--ds-space-600, 48px)", firstElementIsSelect ? css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n                  margin-left: ", ";\n                "])), "var(--ds-space-050, 4px)") : css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n                  margin-left: ", ";\n                "])), "var(--ds-space-100, 8px)"), "var(--ds-space-100, 8px)") : css({
+  return css(scrollable ? css(scrollDisabled ? css({
+    overflow: 'hidden'
+  }) : css({
+    overflowX: 'auto',
+    overflowY: 'hidden'
+  }), {
+    WebkitOverflowScrolling: 'touch',
+    padding: "var(--ds-space-050, 4px)".concat(" 0 ", "var(--ds-space-600, 48px)"),
+    '> div': {
+      '> div:first-child': firstElementIsSelect ? css({
+        marginLeft: "var(--ds-space-050, 4px)"
+      }) : css({
+        marginLeft: "var(--ds-space-100, 8px)"
+      }),
+      '> div:last-child': {
+        marginRight: "var(--ds-space-100, 8px)"
+      }
+    }
+  }) : css({
     display: 'flex'
   }));
 };

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

@@ -20,6 +20,7 @@ export interface Props {
     popupsScrollableElement?: HTMLElement;
     providerFactory?: ProviderFactory;
     className?: string;
+    groupLabel?: string;
     focusEditor?: () => void;
     editorView?: EditorView;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;

package/dist/types-ts4.5/ui/Toolbar.d.ts

@@ -20,6 +20,7 @@ export interface Props {
     popupsScrollableElement?: HTMLElement;
     providerFactory?: ProviderFactory;
     className?: string;
+    groupLabel?: string;
     focusEditor?: () => void;
     editorView?: EditorView;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-floating-toolbar",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Floating toolbar plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -27,7 +27,7 @@
     "@atlaskit/adf-utils": "^19.0.0",
     "@atlaskit/button": "^17.14.0",
     "@atlaskit/checkbox": "^13.1.0",
-    "@atlaskit/editor-common": "^78.31.0",
+    "@atlaskit/editor-common": "^78.33.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-plugin-context-panel": "^1.1.0",
     "@atlaskit/editor-plugin-copy-button": "^1.1.0",
@@ -35,7 +35,7 @@
     "@atlaskit/editor-plugin-editor-disabled": "^1.1.0",
     "@atlaskit/editor-plugin-editor-viewmode": "^1.1.0",
     "@atlaskit/editor-plugin-extension": "^1.3.0",
-    "@atlaskit/editor-plugin-table": "^7.8.0",
+    "@atlaskit/editor-plugin-table": "^7.9.0",
     "@atlaskit/editor-prosemirror": "4.0.0",
     "@atlaskit/emoji": "^67.6.0",
     "@atlaskit/icon": "^22.1.0",