@atlaskit/editor-plugin-floating-toolbar 3.3.4 → 3.3.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 3.3.5
+
+### Patch Changes
+
+- [#134885](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134885)
+  [`0d61709802162`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d61709802162) -
+  [ux] [ED-27312] Implement new scroll left/right buttons for scrollable floating toolbars
+
 ## 3.3.4
 
 ### Patch Changes

package/dist/cjs/ui/ScrollButton.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollButton = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _bindEventListener = require("bind-event-listener");
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _new = require("@atlaskit/button/new");
+var _floatingToolbar = require("@atlaskit/editor-common/floating-toolbar");
+var _chevronLeftChevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-left--chevron-left-large"));
+var _chevronRightChevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-right--chevron-right-large"));
+var _primitives = require("@atlaskit/primitives");
+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; }
+var rightSideStyles = (0, _primitives.xcss)({
+  borderLeft: "solid ".concat("var(--ds-border, #091E4224)", " 1px"),
+  right: 'space.0',
+  borderTopRightRadius: '3px',
+  borderBottomRightRadius: '3px'
+});
+var leftSideStyles = (0, _primitives.xcss)({
+  borderRight: "solid ".concat("var(--ds-border, #091E4224)", " 1px"),
+  left: 'space.0',
+  borderTopLeftRadius: '3px',
+  borderBottomLeftRadius: '3px'
+});
+var buttonCommonStyles = (0, _primitives.xcss)({
+  backgroundColor: 'elevation.surface.overlay',
+  zIndex: '1',
+  position: 'absolute'
+});
+var ScrollButton = exports.ScrollButton = function ScrollButton(_ref) {
+  var intl = _ref.intl,
+    scrollContainerRef = _ref.scrollContainerRef,
+    node = _ref.node,
+    disabled = _ref.disabled,
+    side = _ref.side;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    needScroll = _useState2[0],
+    setNeedScroll = _useState2[1];
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    canScrollToSide = _useState4[0],
+    setCanScrollToSide = _useState4[1];
+  var setCanScrollDebounced = (0, _rafSchd.default)(function () {
+    // Refs are null before mounting and after unmount
+    if (!scrollContainerRef.current) {
+      return;
+    }
+    var _scrollContainerRef$c = scrollContainerRef.current,
+      scrollLeft = _scrollContainerRef$c.scrollLeft,
+      scrollWidth = _scrollContainerRef$c.scrollWidth,
+      offsetWidth = _scrollContainerRef$c.offsetWidth;
+    setCanScrollToSide(
+    // -1 to account for pixel rounding error
+    side === 'left' ? scrollLeft > 0 : scrollLeft < scrollWidth - offsetWidth - 1);
+  });
+  var onScroll = function onScroll() {
+    setCanScrollDebounced();
+  };
+  var onClick = function onClick() {
+    var _scrollContainerRef$c2, _scrollContainerRef$c3, _scrollContainerRef$c4;
+    var _ref2 = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.getBoundingClientRect()) || {},
+      _ref2$width = _ref2.width,
+      scrollContainerWidth = _ref2$width === void 0 ? 0 : _ref2$width;
+    var scrollLeft = ((_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollLeft) || 0;
+    var scrollTo = side === 'left' ? scrollLeft - scrollContainerWidth : scrollLeft + scrollContainerWidth;
+    (_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 || _scrollContainerRef$c4.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
+  };
+  var resizeObserver = new ResizeObserver(function (t) {
+    var _scrollContainerRef$c5, _scrollContainerRef$c6;
+    var widthNeededToShowAllItems = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.scrollWidth) || 0;
+    var parentNode = (_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.parentNode;
+    var availableSpace = -1;
+    if (parentNode instanceof HTMLElement) {
+      availableSpace = parentNode.offsetWidth;
+    }
+    if (availableSpace === -1) {
+      return;
+    }
+    if (availableSpace >= widthNeededToShowAllItems) {
+      setNeedScroll(false);
+    } else {
+      setNeedScroll(true);
+      onScroll();
+    }
+  });
+  (0, _react.useEffect)(function () {
+    onScroll();
+    var scrollContainerRefCurrent = scrollContainerRef.current;
+    var unbind;
+    if (scrollContainerRefCurrent) {
+      // Adding/removing scroll button depending on scroll position
+      unbind = (0, _bindEventListener.bind)(scrollContainerRefCurrent, {
+        type: 'scroll',
+        listener: onScroll
+      });
+
+      // watch for toolbar resize and show/hide scroll buttons if needed
+      resizeObserver.observe(scrollContainerRefCurrent);
+    }
+    return function () {
+      if (scrollContainerRefCurrent) {
+        var _unbind;
+        (_unbind = unbind) === null || _unbind === void 0 || _unbind();
+        resizeObserver.unobserve(scrollContainerRefCurrent);
+      }
+      setCanScrollDebounced.cancel();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(function () {
+    var scrollContainerRefCurrent = scrollContainerRef.current;
+    if (scrollContainerRefCurrent) {
+      var _scrollContainerRefCu;
+      // reset scroll position when switching from one node with toolbar to another
+      // scroll to made optional as it may not be rendered in testing env
+      (_scrollContainerRefCu = scrollContainerRefCurrent.scrollTo) === null || _scrollContainerRefCu === void 0 || _scrollContainerRefCu.call(scrollContainerRefCurrent, {
+        left: 0
+      });
+    }
+  }, [node.type, scrollContainerRef]);
+  var Icon = side === 'left' ? _chevronLeftChevronLeftLarge.default : _chevronRightChevronRightLarge.default;
+  return needScroll && (side === 'left' && canScrollToSide || side === 'right' && canScrollToSide) && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    padding: "space.050",
+    xcss: [side === 'left' ? leftSideStyles : rightSideStyles, buttonCommonStyles]
+  }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    appearance: "subtle",
+    label: intl.formatMessage(side === 'left' ? _floatingToolbar.messages.floatingToolbarScrollLeft : _floatingToolbar.messages.floatingToolbarScrollRight),
+    onClick: onClick,
+    isDisabled: disabled,
+    icon: Icon,
+    isTooltipDisabled: false,
+    tooltip: {
+      position: 'top'
+    }
+  }));
+};

package/dist/cjs/ui/ScrollButtons.js

@@ -36,6 +36,7 @@ var toolbarScrollButtons = (0, _react2.css)({
 });
 var LeftIcon = _chevronLeftChevronLeftLarge.default;
 var RightIcon = _chevronRightChevronRightLarge.default;
+// Remove this component (replaced by ScrollButton) as part of platform_editor_controls clean up
 var ScrollButtons = exports.ScrollButtons = function ScrollButtons(_ref) {
   var intl = _ref.intl,
     scrollContainerRef = _ref.scrollContainerRef,

package/dist/cjs/ui/Toolbar.js

@@ -33,6 +33,7 @@ var _Dropdown = _interopRequireDefault(require("./Dropdown"));
 var _EmojiPickerButton = require("./EmojiPickerButton");
 var _ExtensionsPlaceholder = require("./ExtensionsPlaceholder");
 var _Input = require("./Input");
+var _ScrollButton = require("./ScrollButton");
 var _ScrollButtons = require("./ScrollButtons");
 var _Select = _interopRequireDefault(require("./Select"));
 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); }
@@ -646,6 +647,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         intl = _this$props2.intl,
         scrollable = _this$props2.scrollable,
         mediaAssistiveMessage = _this$props2.mediaAssistiveMessage;
+      var isEditorControlsEnabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
+      var isEditorControlsPatch2Enabled = isEditorControlsEnabled && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2');
       if (!items || !items.length) {
         return null;
       }
@@ -677,10 +680,16 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
         className: className,
-        onMouseDown: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? this.captureMouseEvent : undefined
+        onMouseDown: isEditorControlsEnabled ? this.captureMouseEvent : undefined
       }, (0, _react2.jsx)(_ui.Announcer, {
         text: mediaAssistiveMessage ? "".concat(mediaAssistiveMessage, ", ").concat(intl.formatMessage(_floatingToolbar.messages.floatingToolbarAnnouncer)) : intl.formatMessage(_floatingToolbar.messages.floatingToolbarAnnouncer),
         delay: 250
+      }), scrollable && isEditorControlsPatch2Enabled && (0, _react2.jsx)(_ScrollButton.ScrollButton, {
+        intl: intl,
+        scrollContainerRef: this.scrollContainerRef,
+        node: node,
+        disabled: this.state.scrollDisabled,
+        side: "left"
       }), (0, _react2.jsx)("div", {
         "data-testid": "floating-toolbar-items",
         ref: this.scrollContainerRef
@@ -700,12 +709,18 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         setDisableScroll: this.setDisableScroll.bind(this),
         mountRef: this.mountRef,
         mounted: this.state.mounted
-      }))), scrollable && (0, _react2.jsx)(_ScrollButtons.ScrollButtons, {
+      }))), scrollable && (isEditorControlsPatch2Enabled ? (0, _react2.jsx)(_ScrollButton.ScrollButton, {
+        intl: intl,
+        scrollContainerRef: this.scrollContainerRef,
+        node: node,
+        disabled: this.state.scrollDisabled,
+        side: "right"
+      }) : (0, _react2.jsx)(_ScrollButtons.ScrollButtons, {
         intl: intl,
         scrollContainerRef: this.scrollContainerRef,
         node: node,
         disabled: this.state.scrollDisabled
-      })), (0, _react2.jsx)("div", {
+      }))), (0, _react2.jsx)("div", {
         ref: this.mountRef
       })));
     }

package/dist/es2019/ui/ScrollButton.js

@@ -0,0 +1,133 @@
+import React, { useEffect, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import rafSchedule from 'raf-schd';
+import { IconButton } from '@atlaskit/button/new';
+import { messages } from '@atlaskit/editor-common/floating-toolbar';
+import ChevronLeftLargeIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
+import ChevronRightLargeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
+import { Box, xcss } from '@atlaskit/primitives';
+const rightSideStyles = xcss({
+  borderLeft: `solid ${"var(--ds-border, #091E4224)"} 1px`,
+  right: 'space.0',
+  borderTopRightRadius: '3px',
+  borderBottomRightRadius: '3px'
+});
+const leftSideStyles = xcss({
+  borderRight: `solid ${"var(--ds-border, #091E4224)"} 1px`,
+  left: 'space.0',
+  borderTopLeftRadius: '3px',
+  borderBottomLeftRadius: '3px'
+});
+const buttonCommonStyles = xcss({
+  backgroundColor: 'elevation.surface.overlay',
+  zIndex: '1',
+  position: 'absolute'
+});
+export const ScrollButton = ({
+  intl,
+  scrollContainerRef,
+  node,
+  disabled,
+  side
+}) => {
+  const [needScroll, setNeedScroll] = useState(false);
+  const [canScrollToSide, setCanScrollToSide] = useState(true);
+  const setCanScrollDebounced = rafSchedule(() => {
+    // Refs are null before mounting and after unmount
+    if (!scrollContainerRef.current) {
+      return;
+    }
+    const {
+      scrollLeft,
+      scrollWidth,
+      offsetWidth
+    } = scrollContainerRef.current;
+    setCanScrollToSide(
+    // -1 to account for pixel rounding error
+    side === 'left' ? scrollLeft > 0 : scrollLeft < scrollWidth - offsetWidth - 1);
+  });
+  const onScroll = () => {
+    setCanScrollDebounced();
+  };
+  const onClick = () => {
+    var _scrollContainerRef$c, _scrollContainerRef$c2, _scrollContainerRef$c3;
+    const {
+      width: scrollContainerWidth = 0
+    } = ((_scrollContainerRef$c = scrollContainerRef.current) === null || _scrollContainerRef$c === void 0 ? void 0 : _scrollContainerRef$c.getBoundingClientRect()) || {};
+    const scrollLeft = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.scrollLeft) || 0;
+    const scrollTo = side === 'left' ? scrollLeft - scrollContainerWidth : scrollLeft + scrollContainerWidth;
+    (_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
+  };
+  const resizeObserver = new ResizeObserver(t => {
+    var _scrollContainerRef$c4, _scrollContainerRef$c5;
+    const widthNeededToShowAllItems = ((_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.scrollWidth) || 0;
+    const parentNode = (_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.parentNode;
+    let availableSpace = -1;
+    if (parentNode instanceof HTMLElement) {
+      availableSpace = parentNode.offsetWidth;
+    }
+    if (availableSpace === -1) {
+      return;
+    }
+    if (availableSpace >= widthNeededToShowAllItems) {
+      setNeedScroll(false);
+    } else {
+      setNeedScroll(true);
+      onScroll();
+    }
+  });
+  useEffect(() => {
+    onScroll();
+    const scrollContainerRefCurrent = scrollContainerRef.current;
+    let unbind;
+    if (scrollContainerRefCurrent) {
+      // Adding/removing scroll button depending on scroll position
+      unbind = bind(scrollContainerRefCurrent, {
+        type: 'scroll',
+        listener: onScroll
+      });
+
+      // watch for toolbar resize and show/hide scroll buttons if needed
+      resizeObserver.observe(scrollContainerRefCurrent);
+    }
+    return () => {
+      if (scrollContainerRefCurrent) {
+        var _unbind;
+        (_unbind = unbind) === null || _unbind === void 0 ? void 0 : _unbind();
+        resizeObserver.unobserve(scrollContainerRefCurrent);
+      }
+      setCanScrollDebounced.cancel();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    const scrollContainerRefCurrent = scrollContainerRef.current;
+    if (scrollContainerRefCurrent) {
+      var _scrollContainerRefCu;
+      // reset scroll position when switching from one node with toolbar to another
+      // scroll to made optional as it may not be rendered in testing env
+      (_scrollContainerRefCu = scrollContainerRefCurrent.scrollTo) === null || _scrollContainerRefCu === void 0 ? void 0 : _scrollContainerRefCu.call(scrollContainerRefCurrent, {
+        left: 0
+      });
+    }
+  }, [node.type, scrollContainerRef]);
+  const Icon = side === 'left' ? ChevronLeftLargeIcon : ChevronRightLargeIcon;
+  return needScroll && (side === 'left' && canScrollToSide || side === 'right' && canScrollToSide) && /*#__PURE__*/React.createElement(Box, {
+    padding: "space.050",
+    xcss: [side === 'left' ? leftSideStyles : rightSideStyles, buttonCommonStyles]
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "subtle",
+    label: intl.formatMessage(side === 'left' ? messages.floatingToolbarScrollLeft : messages.floatingToolbarScrollRight),
+    onClick: onClick,
+    isDisabled: disabled,
+    icon: Icon,
+    isTooltipDisabled: false,
+    tooltip: {
+      position: 'top'
+    }
+  }));
+};

package/dist/es2019/ui/ScrollButtons.js

@@ -24,6 +24,7 @@ const toolbarScrollButtons = css({
 });
 const LeftIcon = ChevronLeftLargeIcon;
 const RightIcon = ChevronRightLargeIcon;
+// Remove this component (replaced by ScrollButton) as part of platform_editor_controls clean up
 export const ScrollButtons = ({
   intl,
   scrollContainerRef,

package/dist/es2019/ui/Toolbar.js

@@ -26,6 +26,7 @@ import Dropdown from './Dropdown';
 import { EmojiPickerButton } from './EmojiPickerButton';
 import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
 import { Input } from './Input';
+import { ScrollButton } from './ScrollButton';
 import { ScrollButtons } from './ScrollButtons';
 import Select from './Select';
 export function groupItems(items) {
@@ -600,6 +601,8 @@ class Toolbar extends Component {
       scrollable,
       mediaAssistiveMessage
     } = this.props;
+    const isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
+    const isEditorControlsPatch2Enabled = isEditorControlsEnabled && fg('platform_editor_controls_patch_2');
     if (!items || !items.length) {
       return null;
     }
@@ -627,10 +630,16 @@ class Toolbar extends Component {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
       className: className,
-      onMouseDown: editorExperiment('platform_editor_controls', 'variant1') ? this.captureMouseEvent : undefined
+      onMouseDown: isEditorControlsEnabled ? this.captureMouseEvent : undefined
     }, jsx(Announcer, {
       text: mediaAssistiveMessage ? `${mediaAssistiveMessage}, ${intl.formatMessage(messages.floatingToolbarAnnouncer)}` : intl.formatMessage(messages.floatingToolbarAnnouncer),
       delay: 250
+    }), scrollable && isEditorControlsPatch2Enabled && jsx(ScrollButton, {
+      intl: intl,
+      scrollContainerRef: this.scrollContainerRef,
+      node: node,
+      disabled: this.state.scrollDisabled,
+      side: "left"
     }), jsx("div", {
       "data-testid": "floating-toolbar-items",
       ref: this.scrollContainerRef
@@ -650,12 +659,18 @@ class Toolbar extends Component {
       setDisableScroll: this.setDisableScroll.bind(this),
       mountRef: this.mountRef,
       mounted: this.state.mounted
-    }))), scrollable && jsx(ScrollButtons, {
+    }))), scrollable && (isEditorControlsPatch2Enabled ? jsx(ScrollButton, {
+      intl: intl,
+      scrollContainerRef: this.scrollContainerRef,
+      node: node,
+      disabled: this.state.scrollDisabled,
+      side: "right"
+    }) : jsx(ScrollButtons, {
       intl: intl,
       scrollContainerRef: this.scrollContainerRef,
       node: node,
       disabled: this.state.scrollDisabled
-    })), jsx("div", {
+    }))), jsx("div", {
       ref: this.mountRef
     })));
   }

package/dist/esm/ui/ScrollButton.js

@@ -0,0 +1,138 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import { bind } from 'bind-event-listener';
+import rafSchedule from 'raf-schd';
+import { IconButton } from '@atlaskit/button/new';
+import { messages } from '@atlaskit/editor-common/floating-toolbar';
+import ChevronLeftLargeIcon from '@atlaskit/icon/utility/migration/chevron-left--chevron-left-large';
+import ChevronRightLargeIcon from '@atlaskit/icon/utility/migration/chevron-right--chevron-right-large';
+import { Box, xcss } from '@atlaskit/primitives';
+var rightSideStyles = xcss({
+  borderLeft: "solid ".concat("var(--ds-border, #091E4224)", " 1px"),
+  right: 'space.0',
+  borderTopRightRadius: '3px',
+  borderBottomRightRadius: '3px'
+});
+var leftSideStyles = xcss({
+  borderRight: "solid ".concat("var(--ds-border, #091E4224)", " 1px"),
+  left: 'space.0',
+  borderTopLeftRadius: '3px',
+  borderBottomLeftRadius: '3px'
+});
+var buttonCommonStyles = xcss({
+  backgroundColor: 'elevation.surface.overlay',
+  zIndex: '1',
+  position: 'absolute'
+});
+export var ScrollButton = function ScrollButton(_ref) {
+  var intl = _ref.intl,
+    scrollContainerRef = _ref.scrollContainerRef,
+    node = _ref.node,
+    disabled = _ref.disabled,
+    side = _ref.side;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    needScroll = _useState2[0],
+    setNeedScroll = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    canScrollToSide = _useState4[0],
+    setCanScrollToSide = _useState4[1];
+  var setCanScrollDebounced = rafSchedule(function () {
+    // Refs are null before mounting and after unmount
+    if (!scrollContainerRef.current) {
+      return;
+    }
+    var _scrollContainerRef$c = scrollContainerRef.current,
+      scrollLeft = _scrollContainerRef$c.scrollLeft,
+      scrollWidth = _scrollContainerRef$c.scrollWidth,
+      offsetWidth = _scrollContainerRef$c.offsetWidth;
+    setCanScrollToSide(
+    // -1 to account for pixel rounding error
+    side === 'left' ? scrollLeft > 0 : scrollLeft < scrollWidth - offsetWidth - 1);
+  });
+  var onScroll = function onScroll() {
+    setCanScrollDebounced();
+  };
+  var onClick = function onClick() {
+    var _scrollContainerRef$c2, _scrollContainerRef$c3, _scrollContainerRef$c4;
+    var _ref2 = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.getBoundingClientRect()) || {},
+      _ref2$width = _ref2.width,
+      scrollContainerWidth = _ref2$width === void 0 ? 0 : _ref2$width;
+    var scrollLeft = ((_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollLeft) || 0;
+    var scrollTo = side === 'left' ? scrollLeft - scrollContainerWidth : scrollLeft + scrollContainerWidth;
+    (_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 || _scrollContainerRef$c4.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
+  };
+  var resizeObserver = new ResizeObserver(function (t) {
+    var _scrollContainerRef$c5, _scrollContainerRef$c6;
+    var widthNeededToShowAllItems = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.scrollWidth) || 0;
+    var parentNode = (_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.parentNode;
+    var availableSpace = -1;
+    if (parentNode instanceof HTMLElement) {
+      availableSpace = parentNode.offsetWidth;
+    }
+    if (availableSpace === -1) {
+      return;
+    }
+    if (availableSpace >= widthNeededToShowAllItems) {
+      setNeedScroll(false);
+    } else {
+      setNeedScroll(true);
+      onScroll();
+    }
+  });
+  useEffect(function () {
+    onScroll();
+    var scrollContainerRefCurrent = scrollContainerRef.current;
+    var unbind;
+    if (scrollContainerRefCurrent) {
+      // Adding/removing scroll button depending on scroll position
+      unbind = bind(scrollContainerRefCurrent, {
+        type: 'scroll',
+        listener: onScroll
+      });
+
+      // watch for toolbar resize and show/hide scroll buttons if needed
+      resizeObserver.observe(scrollContainerRefCurrent);
+    }
+    return function () {
+      if (scrollContainerRefCurrent) {
+        var _unbind;
+        (_unbind = unbind) === null || _unbind === void 0 || _unbind();
+        resizeObserver.unobserve(scrollContainerRefCurrent);
+      }
+      setCanScrollDebounced.cancel();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(function () {
+    var scrollContainerRefCurrent = scrollContainerRef.current;
+    if (scrollContainerRefCurrent) {
+      var _scrollContainerRefCu;
+      // reset scroll position when switching from one node with toolbar to another
+      // scroll to made optional as it may not be rendered in testing env
+      (_scrollContainerRefCu = scrollContainerRefCurrent.scrollTo) === null || _scrollContainerRefCu === void 0 || _scrollContainerRefCu.call(scrollContainerRefCurrent, {
+        left: 0
+      });
+    }
+  }, [node.type, scrollContainerRef]);
+  var Icon = side === 'left' ? ChevronLeftLargeIcon : ChevronRightLargeIcon;
+  return needScroll && (side === 'left' && canScrollToSide || side === 'right' && canScrollToSide) && /*#__PURE__*/React.createElement(Box, {
+    padding: "space.050",
+    xcss: [side === 'left' ? leftSideStyles : rightSideStyles, buttonCommonStyles]
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "subtle",
+    label: intl.formatMessage(side === 'left' ? messages.floatingToolbarScrollLeft : messages.floatingToolbarScrollRight),
+    onClick: onClick,
+    isDisabled: disabled,
+    icon: Icon,
+    isTooltipDisabled: false,
+    tooltip: {
+      position: 'top'
+    }
+  }));
+};

package/dist/esm/ui/ScrollButtons.js

@@ -25,6 +25,7 @@ var toolbarScrollButtons = css({
 });
 var LeftIcon = ChevronLeftLargeIcon;
 var RightIcon = ChevronRightLargeIcon;
+// Remove this component (replaced by ScrollButton) as part of platform_editor_controls clean up
 export var ScrollButtons = function ScrollButtons(_ref) {
   var intl = _ref.intl,
     scrollContainerRef = _ref.scrollContainerRef,

package/dist/esm/ui/Toolbar.js

@@ -33,6 +33,7 @@ import Dropdown from './Dropdown';
 import { EmojiPickerButton } from './EmojiPickerButton';
 import { ExtensionsPlaceholder } from './ExtensionsPlaceholder';
 import { Input } from './Input';
+import { ScrollButton } from './ScrollButton';
 import { ScrollButtons } from './ScrollButtons';
 import Select from './Select';
 export function groupItems(items) {
@@ -639,6 +640,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         intl = _this$props2.intl,
         scrollable = _this$props2.scrollable,
         mediaAssistiveMessage = _this$props2.mediaAssistiveMessage;
+      var isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
+      var isEditorControlsPatch2Enabled = isEditorControlsEnabled && fg('platform_editor_controls_patch_2');
       if (!items || !items.length) {
         return null;
       }
@@ -670,10 +673,16 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
         className: className,
-        onMouseDown: editorExperiment('platform_editor_controls', 'variant1') ? this.captureMouseEvent : undefined
+        onMouseDown: isEditorControlsEnabled ? this.captureMouseEvent : undefined
       }, jsx(Announcer, {
         text: mediaAssistiveMessage ? "".concat(mediaAssistiveMessage, ", ").concat(intl.formatMessage(messages.floatingToolbarAnnouncer)) : intl.formatMessage(messages.floatingToolbarAnnouncer),
         delay: 250
+      }), scrollable && isEditorControlsPatch2Enabled && jsx(ScrollButton, {
+        intl: intl,
+        scrollContainerRef: this.scrollContainerRef,
+        node: node,
+        disabled: this.state.scrollDisabled,
+        side: "left"
       }), jsx("div", {
         "data-testid": "floating-toolbar-items",
         ref: this.scrollContainerRef
@@ -693,12 +702,18 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         setDisableScroll: this.setDisableScroll.bind(this),
         mountRef: this.mountRef,
         mounted: this.state.mounted
-      }))), scrollable && jsx(ScrollButtons, {
+      }))), scrollable && (isEditorControlsPatch2Enabled ? jsx(ScrollButton, {
+        intl: intl,
+        scrollContainerRef: this.scrollContainerRef,
+        node: node,
+        disabled: this.state.scrollDisabled,
+        side: "right"
+      }) : jsx(ScrollButtons, {
         intl: intl,
         scrollContainerRef: this.scrollContainerRef,
         node: node,
         disabled: this.state.scrollDisabled
-      })), jsx("div", {
+      }))), jsx("div", {
         ref: this.mountRef
       })));
     }

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { IntlShape } from 'react-intl-next';
+import type { Node } from '@atlaskit/editor-prosemirror/model';
+type ScrollButtonProps = {
+    intl: IntlShape;
+    scrollContainerRef: React.RefObject<HTMLDivElement>;
+    node: Node;
+    disabled: boolean;
+    side: 'left' | 'right';
+};
+export declare const ScrollButton: ({ intl, scrollContainerRef, node, disabled, side, }: ScrollButtonProps) => false | React.JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { IntlShape } from 'react-intl-next';
+import type { Node } from '@atlaskit/editor-prosemirror/model';
+type ScrollButtonProps = {
+    intl: IntlShape;
+    scrollContainerRef: React.RefObject<HTMLDivElement>;
+    node: Node;
+    disabled: boolean;
+    side: 'left' | 'right';
+};
+export declare const ScrollButton: ({ intl, scrollContainerRef, node, disabled, side, }: ScrollButtonProps) => false | React.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "3.3.4",
+	"version": "3.3.5",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -53,6 +53,7 @@
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
+		"bind-event-listener": "^3.0.0",
 		"lodash": "^4.17.21",
 		"raf-schd": "^4.0.3",
 		"react-intl-next": "npm:react-intl@^5.18.1",
@@ -130,6 +131,9 @@
 		},
 		"platform_editor_controls_patch_1": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_2": {
+			"type": "boolean"
 		}
 	}
 }