@atlaskit/editor-plugin-floating-toolbar 3.1.0 → 3.1.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 3.1.2
+
+### Patch Changes
+
+- [#122243](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/122243)
+  [`cd1572955dd3b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cd1572955dd3b) -
+  FD-80149: cleans up platform_editor_react18_phase2_v2 in floating toolbar
+- Updated dependencies
+
+## 3.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.1.0
 
 ### Minor Changes

package/dist/cjs/ui/Input.js

@@ -5,83 +5,21 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InputOld = exports.InputNew = void 0;
+exports.Input = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
 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 && {}.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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
+/**
  * @jsxRuntime classic
  * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-// eslint-disable-next-line @repo/internal/react/no-class-components
-var InputOld = exports.InputOld = /*#__PURE__*/function (_Component) {
-  function InputOld(props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, InputOld);
-    _this = _callSuper(this, InputOld, [props]);
-    (0, _defineProperty2.default)(_this, "handleChange", function (e) {
-      _this.setState({
-        text: e.target.value
-      });
-    });
-    (0, _defineProperty2.default)(_this, "handleSubmit", function (e) {
-      e.preventDefault();
-      if (_this.props.onSubmit) {
-        _this.props.onSubmit(_this.state.text);
-      }
-    });
-    (0, _defineProperty2.default)(_this, "handleBlur", function (e) {
-      e.preventDefault();
-      if (_this.props.onBlur) {
-        _this.props.onBlur(_this.state.text);
-      }
-    });
-    _this.state = {
-      text: props.defaultValue || ''
-    };
-    return _this;
-  }
+ */
 
-  // Ignored via go/ees005
-  // eslint-disable-next-line react/no-unsafe
-  (0, _inherits2.default)(InputOld, _Component);
-  return (0, _createClass2.default)(InputOld, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (this.state.text !== nextProps.defaultValue) {
-        this.setState({
-          text: nextProps.defaultValue || ''
-        });
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var placeholder = this.props.placeholder;
-      return (0, _react2.jsx)("form", {
-        onSubmit: this.handleSubmit
-      }, (0, _react2.jsx)("input", {
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        css: _ui.panelTextInput,
-        value: this.state.text,
-        onChange: this.handleChange,
-        placeholder: placeholder,
-        onBlur: this.handleBlur
-      }));
-    }
-  }]);
-}(_react.Component);
-var InputNew = exports.InputNew = function InputNew(props) {
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var Input = exports.Input = function Input(props) {
   var defaultValue = props.defaultValue,
     onBlur = props.onBlur,
     onSubmit = props.onSubmit,

package/dist/cjs/ui/Toolbar.js

@@ -164,22 +164,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           spotlightConfig: item.spotlightConfig
         }, item.showTitle && item.title);
       case 'input':
-        if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2_v2')) {
-          return (0, _react2.jsx)(_Input.InputNew, {
-            key: idx,
-            mountPoint: popupsMountPoint,
-            boundariesElement: popupsBoundariesElement,
-            defaultValue: item.defaultValue,
-            placeholder: item.placeholder,
-            onSubmit: function onSubmit(value) {
-              return dispatchCommand(item.onSubmit(value));
-            },
-            onBlur: function onBlur(value) {
-              return dispatchCommand(item.onBlur(value));
-            }
-          });
-        }
-        return (0, _react2.jsx)(_Input.InputOld, {
+        return (0, _react2.jsx)(_Input.Input, {
           key: idx,
           mountPoint: popupsMountPoint,
           boundariesElement: popupsBoundariesElement,
@@ -352,16 +337,19 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
   var groupedItems = groupItems(items.filter(function (item) {
     return !item.hidden;
   }));
-  return (0, _react2.jsx)(_buttonGroup.default, null, groupedItems.map(function (element, index) {
+  return (0, _react2.jsx)(_buttonGroup.default, {
+    testId: "editor-floating-toolbar-items"
+  }, groupedItems.map(function (element, index) {
     var isGroup = Array.isArray(element);
     if (isGroup) {
       return (0, _react2.jsx)("div", {
         // Ignored via go/ees005
         // eslint-disable-next-line react/no-array-index-key
         key: index,
-        css: buttonGroupStyles,
+        css: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? buttonGroupStylesNew : buttonGroupStyles,
         role: "radiogroup",
-        "aria-label": groupLabel !== null && groupLabel !== void 0 ? groupLabel : undefined
+        "aria-label": groupLabel !== null && groupLabel !== void 0 ? groupLabel : undefined,
+        "data-testid": "editor-floating-toolbar-grouped-buttons"
       }, element.map(function (element) {
         var indexInAllItems = items.findIndex(function (item) {
           return item === element;
@@ -387,6 +375,10 @@ var buttonGroupStyles = (0, _react2.css)({
   display: 'flex',
   gap: "var(--ds-space-050, 4px)"
 });
+var buttonGroupStylesNew = (0, _react2.css)({
+  display: 'flex',
+  gap: "var(--ds-space-075, 6px)"
+});
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstElementIsSelect) {
@@ -485,13 +477,18 @@ var toolbarOverflow = function toolbarOverflow(_ref2) {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
   (0, _react2.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    padding: paddingFeatureFlag ? "var(--ds-space-0, 0)".concat(" 0 ", "var(--ds-space-050, 4px)") : "var(--ds-space-0, 0)".concat(" 0 ", "var(--ds-space-600, 48px)"),
+    padding: "var(--ds-space-0, 0)".concat(" 4px ", "var(--ds-space-600, 48px)", " 4px"),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '> div': {
       minHeight: "var(--ds-space-500, 40px)",
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-      '> div:has(+ [data-editor-popup="true"]:last-of-type)': {
-        marginRight: "var(--ds-space-100, 8px)"
+      gap: "var(--ds-space-075, 6px)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      '> div:first-child': {
+        marginLeft: 0
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      '> div:last-child': {
+        marginRight: 0
       }
     }
   }) : undefined) :

package/dist/es2019/ui/Input.js

@@ -1,65 +1,13 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { Component, useState } from 'react';
+import React, { useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { panelTextInput } from '@atlaskit/editor-common/ui';
-// eslint-disable-next-line @repo/internal/react/no-class-components
-export class InputOld extends Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "handleChange", e => {
-      this.setState({
-        text: e.target.value
-      });
-    });
-    _defineProperty(this, "handleSubmit", e => {
-      e.preventDefault();
-      if (this.props.onSubmit) {
-        this.props.onSubmit(this.state.text);
-      }
-    });
-    _defineProperty(this, "handleBlur", e => {
-      e.preventDefault();
-      if (this.props.onBlur) {
-        this.props.onBlur(this.state.text);
-      }
-    });
-    this.state = {
-      text: props.defaultValue || ''
-    };
-  }
-
-  // Ignored via go/ees005
-  // eslint-disable-next-line react/no-unsafe
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.state.text !== nextProps.defaultValue) {
-      this.setState({
-        text: nextProps.defaultValue || ''
-      });
-    }
-  }
-  render() {
-    const {
-      placeholder
-    } = this.props;
-    return jsx("form", {
-      onSubmit: this.handleSubmit
-    }, jsx("input", {
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      css: panelTextInput,
-      value: this.state.text,
-      onChange: this.handleChange,
-      placeholder: placeholder,
-      onBlur: this.handleBlur
-    }));
-  }
-}
-export const InputNew = props => {
+export const Input = props => {
   const {
     defaultValue,
     onBlur,

package/dist/es2019/ui/Toolbar.js

@@ -25,7 +25,7 @@ import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
 import Dropdown from './Dropdown';
 import { EmojiPickerButton } from './EmojiPickerButton';
 import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
-import { InputNew, InputOld } from './Input';
+import { Input } from './Input';
 import { ScrollButtons } from './ScrollButtons';
 import Select from './Select';
 export function groupItems(items) {
@@ -145,18 +145,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
           spotlightConfig: item.spotlightConfig
         }, item.showTitle && item.title);
       case 'input':
-        if (fg('platform_editor_react18_phase2_v2')) {
-          return jsx(InputNew, {
-            key: idx,
-            mountPoint: popupsMountPoint,
-            boundariesElement: popupsBoundariesElement,
-            defaultValue: item.defaultValue,
-            placeholder: item.placeholder,
-            onSubmit: value => dispatchCommand(item.onSubmit(value)),
-            onBlur: value => dispatchCommand(item.onBlur(value))
-          });
-        }
-        return jsx(InputOld, {
+        return jsx(Input, {
           key: idx,
           mountPoint: popupsMountPoint,
           boundariesElement: popupsBoundariesElement,
@@ -319,16 +308,19 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
     }
   };
   const groupedItems = groupItems(items.filter(item => !item.hidden));
-  return jsx(ButtonGroup, null, groupedItems.map((element, index) => {
+  return jsx(ButtonGroup, {
+    testId: "editor-floating-toolbar-items"
+  }, groupedItems.map((element, index) => {
     const isGroup = Array.isArray(element);
     if (isGroup) {
       return jsx("div", {
         // Ignored via go/ees005
         // eslint-disable-next-line react/no-array-index-key
         key: index,
-        css: buttonGroupStyles,
+        css: editorExperiment('platform_editor_controls', 'variant1') ? buttonGroupStylesNew : buttonGroupStyles,
         role: "radiogroup",
-        "aria-label": groupLabel !== null && groupLabel !== void 0 ? groupLabel : undefined
+        "aria-label": groupLabel !== null && groupLabel !== void 0 ? groupLabel : undefined,
+        "data-testid": "editor-floating-toolbar-grouped-buttons"
       }, element.map(element => {
         const indexInAllItems = items.findIndex(item => item === element);
         return renderItem(element, indexInAllItems);
@@ -350,6 +342,10 @@ const buttonGroupStyles = css({
   display: 'flex',
   gap: "var(--ds-space-050, 4px)"
 });
+const buttonGroupStylesNew = css({
+  display: 'flex',
+  gap: "var(--ds-space-075, 6px)"
+});
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 const toolbarContainer = (scrollable, hasSelect, firstElementIsSelect) => css({
@@ -446,13 +442,18 @@ editorExperiment('platform_editor_controls', 'variant1') ?
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
 css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  padding: paddingFeatureFlag ? `${"var(--ds-space-0, 0)"} 0 ${"var(--ds-space-050, 4px)"}` : `${"var(--ds-space-0, 0)"} 0 ${"var(--ds-space-600, 48px)"}`,
+  padding: `${"var(--ds-space-0, 0)"} 4px ${"var(--ds-space-600, 48px)"} 4px`,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '> div': {
     minHeight: "var(--ds-space-500, 40px)",
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> div:has(+ [data-editor-popup="true"]:last-of-type)': {
-      marginRight: "var(--ds-space-100, 8px)"
+    gap: "var(--ds-space-075, 6px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '> div:first-child': {
+      marginLeft: 0
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '> div:last-child': {
+      marginRight: 0
     }
   }
 }) : undefined) :

package/dist/esm/ui/Input.js

@@ -1,80 +1,14 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { Component, useState } from 'react';
+import React, { useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { panelTextInput } from '@atlaskit/editor-common/ui';
-// eslint-disable-next-line @repo/internal/react/no-class-components
-export var InputOld = /*#__PURE__*/function (_Component) {
-  function InputOld(props) {
-    var _this;
-    _classCallCheck(this, InputOld);
-    _this = _callSuper(this, InputOld, [props]);
-    _defineProperty(_this, "handleChange", function (e) {
-      _this.setState({
-        text: e.target.value
-      });
-    });
-    _defineProperty(_this, "handleSubmit", function (e) {
-      e.preventDefault();
-      if (_this.props.onSubmit) {
-        _this.props.onSubmit(_this.state.text);
-      }
-    });
-    _defineProperty(_this, "handleBlur", function (e) {
-      e.preventDefault();
-      if (_this.props.onBlur) {
-        _this.props.onBlur(_this.state.text);
-      }
-    });
-    _this.state = {
-      text: props.defaultValue || ''
-    };
-    return _this;
-  }
-
-  // Ignored via go/ees005
-  // eslint-disable-next-line react/no-unsafe
-  _inherits(InputOld, _Component);
-  return _createClass(InputOld, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (this.state.text !== nextProps.defaultValue) {
-        this.setState({
-          text: nextProps.defaultValue || ''
-        });
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var placeholder = this.props.placeholder;
-      return jsx("form", {
-        onSubmit: this.handleSubmit
-      }, jsx("input", {
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-        css: panelTextInput,
-        value: this.state.text,
-        onChange: this.handleChange,
-        placeholder: placeholder,
-        onBlur: this.handleBlur
-      }));
-    }
-  }]);
-}(Component);
-export var InputNew = function InputNew(props) {
+export var Input = function Input(props) {
   var defaultValue = props.defaultValue,
     onBlur = props.onBlur,
     onSubmit = props.onSubmit,

package/dist/esm/ui/Toolbar.js

@@ -32,7 +32,7 @@ import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
 import Dropdown from './Dropdown';
 import { EmojiPickerButton } from './EmojiPickerButton';
 import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
-import { InputNew, InputOld } from './Input';
+import { Input } from './Input';
 import { ScrollButtons } from './ScrollButtons';
 import Select from './Select';
 export function groupItems(items) {
@@ -157,22 +157,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
           spotlightConfig: item.spotlightConfig
         }, item.showTitle && item.title);
       case 'input':
-        if (fg('platform_editor_react18_phase2_v2')) {
-          return jsx(InputNew, {
-            key: idx,
-            mountPoint: popupsMountPoint,
-            boundariesElement: popupsBoundariesElement,
-            defaultValue: item.defaultValue,
-            placeholder: item.placeholder,
-            onSubmit: function onSubmit(value) {
-              return dispatchCommand(item.onSubmit(value));
-            },
-            onBlur: function onBlur(value) {
-              return dispatchCommand(item.onBlur(value));
-            }
-          });
-        }
-        return jsx(InputOld, {
+        return jsx(Input, {
           key: idx,
           mountPoint: popupsMountPoint,
           boundariesElement: popupsBoundariesElement,
@@ -345,16 +330,19 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
   var groupedItems = groupItems(items.filter(function (item) {
     return !item.hidden;
   }));
-  return jsx(ButtonGroup, null, groupedItems.map(function (element, index) {
+  return jsx(ButtonGroup, {
+    testId: "editor-floating-toolbar-items"
+  }, groupedItems.map(function (element, index) {
     var isGroup = Array.isArray(element);
     if (isGroup) {
       return jsx("div", {
         // Ignored via go/ees005
         // eslint-disable-next-line react/no-array-index-key
         key: index,
-        css: buttonGroupStyles,
+        css: editorExperiment('platform_editor_controls', 'variant1') ? buttonGroupStylesNew : buttonGroupStyles,
         role: "radiogroup",
-        "aria-label": groupLabel !== null && groupLabel !== void 0 ? groupLabel : undefined
+        "aria-label": groupLabel !== null && groupLabel !== void 0 ? groupLabel : undefined,
+        "data-testid": "editor-floating-toolbar-grouped-buttons"
       }, element.map(function (element) {
         var indexInAllItems = items.findIndex(function (item) {
           return item === element;
@@ -380,6 +368,10 @@ var buttonGroupStyles = css({
   display: 'flex',
   gap: "var(--ds-space-050, 4px)"
 });
+var buttonGroupStylesNew = css({
+  display: 'flex',
+  gap: "var(--ds-space-075, 6px)"
+});
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstElementIsSelect) {
@@ -478,13 +470,18 @@ var toolbarOverflow = function toolbarOverflow(_ref2) {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
   css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    padding: paddingFeatureFlag ? "var(--ds-space-0, 0)".concat(" 0 ", "var(--ds-space-050, 4px)") : "var(--ds-space-0, 0)".concat(" 0 ", "var(--ds-space-600, 48px)"),
+    padding: "var(--ds-space-0, 0)".concat(" 4px ", "var(--ds-space-600, 48px)", " 4px"),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
     '> div': {
       minHeight: "var(--ds-space-500, 40px)",
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-      '> div:has(+ [data-editor-popup="true"]:last-of-type)': {
-        marginRight: "var(--ds-space-100, 8px)"
+      gap: "var(--ds-space-075, 6px)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      '> div:first-child': {
+        marginLeft: 0
+      },
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+      '> div:last-child': {
+        marginRight: 0
       }
     }
   }) : undefined) :

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

@@ -1,8 +1,3 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
 export interface Props {
     mountPoint?: HTMLElement;
@@ -15,12 +10,4 @@ export interface Props {
 export interface State {
     text: string;
 }
-export declare class InputOld extends Component<Props, State> {
-    constructor(props: Props);
-    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    handleSubmit: (e: React.FormEvent) => void;
-    handleBlur: (e: React.FocusEvent<Object>) => void;
-    render(): jsx.JSX.Element;
-}
-export declare const InputNew: (props: Props) => jsx.JSX.Element;
+export declare const Input: (props: Props) => jsx.JSX.Element;

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

@@ -1,8 +1,3 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
 export interface Props {
     mountPoint?: HTMLElement;
@@ -15,12 +10,4 @@ export interface Props {
 export interface State {
     text: string;
 }
-export declare class InputOld extends Component<Props, State> {
-    constructor(props: Props);
-    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
-    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    handleSubmit: (e: React.FormEvent) => void;
-    handleBlur: (e: React.FocusEvent<Object>) => void;
-    render(): jsx.JSX.Element;
-}
-export declare const InputNew: (props: Props) => jsx.JSX.Element;
+export declare const Input: (props: Props) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "3.1.0",
+	"version": "3.1.2",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,9 +28,9 @@
 		"@atlaskit/adf-utils": "^19.19.0",
 		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/checkbox": "^17.0.0",
-		"@atlaskit/editor-common": "^100.5.0",
+		"@atlaskit/editor-common": "^101.1.0",
 		"@atlaskit/editor-palette": "2.0.0",
-		"@atlaskit/editor-plugin-block-controls": "^3.2.0",
+		"@atlaskit/editor-plugin-block-controls": "^3.3.0",
 		"@atlaskit/editor-plugin-context-panel": "^3.0.0",
 		"@atlaskit/editor-plugin-copy-button": "^2.0.0",
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",
@@ -113,9 +113,6 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform_editor_react18_phase2_v2": {
-			"type": "boolean"
-		},
 		"platform_editor_floating_toolbar_padding_fix": {
 			"type": "boolean"
 		},