@atlaskit/editor-core 176.0.2 → 177.0.0

package/dist/esm/plugins/floating-toolbar/ui/CheckboxModal.js

@@ -0,0 +1,75 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import Button from '@atlaskit/button/standard-button';
+import { Checkbox } from '@atlaskit/checkbox';
+import Modal, { ModalBody, ModalTitle, ModalHeader, ModalFooter } from '@atlaskit/modal-dialog';
+import messages from './messages';
+export var CheckboxModal = function CheckboxModal(props) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isChecked = _useState2[0],
+      setCheckbox = _useState2[1];
+
+  var onConfirm = props.onConfirm,
+      onClose = props.onClose,
+      options = props.options,
+      formatMessage = props.intl.formatMessage,
+      testId = props.testId;
+  var heading = (options === null || options === void 0 ? void 0 : options.title) || formatMessage(messages.confirmModalDefaultHeading);
+  var okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(messages.confirmModalOK);
+  var cancelButtonLabel = (options === null || options === void 0 ? void 0 : options.cancelButtonLabel) || formatMessage(messages.confirmModalCancel);
+  var checkboxlabel = options === null || options === void 0 ? void 0 : options.checkboxLabel;
+
+  var ListComponent = function ListComponent(_ref) {
+    var nodes = _ref.nodes;
+
+    if (!nodes) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement("ul", null, nodes.map(function (node) {
+      return /*#__PURE__*/React.createElement(ListItem, _extends({}, node, {
+        key: node.id
+      }));
+    }));
+  };
+
+  var ListItem = function ListItem(props) {
+    var id = props.id,
+        name = props.name,
+        amount = props.amount;
+    return /*#__PURE__*/React.createElement("li", {
+      id: id
+    }, formatMessage(messages.confirmModalListUnit, {
+      name: name,
+      amount: amount
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(Modal, {
+    onClose: onClose,
+    testId: testId
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
+    appearance: "warning"
+  }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, options === null || options === void 0 ? void 0 : options.message), (options === null || options === void 0 ? void 0 : options.getChildrenInfo) && /*#__PURE__*/React.createElement(ListComponent, {
+    nodes: options === null || options === void 0 ? void 0 : options.getChildrenInfo()
+  }), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Checkbox, {
+    isChecked: isChecked,
+    onChange: function onChange() {
+      return setCheckbox(!isChecked);
+    },
+    label: checkboxlabel,
+    testId: testId ? "".concat(testId, "-checkbox") : undefined
+  }))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "default",
+    onClick: onClose,
+    testId: testId ? "".concat(testId, "-cancel-button") : undefined
+  }, cancelButtonLabel), /*#__PURE__*/React.createElement(Button, {
+    appearance: "warning",
+    onClick: function onClick() {
+      return onConfirm(isChecked);
+    },
+    testId: testId ? "".concat(testId, "-confirm-button") : undefined
+  }, okButtonLabel)));
+};

package/dist/esm/plugins/floating-toolbar/ui/ConfirmationModal.js

@@ -1,32 +1,18 @@
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
-import Button from '@atlaskit/button/standard-button';
-import Modal, { ModalTransition, ModalBody, ModalTitle, ModalHeader, ModalFooter } from '@atlaskit/modal-dialog';
-import messages from './messages';
+import { SimpleModal } from './SimpleModal';
+import { CheckboxModal } from './CheckboxModal';
+import { ModalTransition } from '@atlaskit/modal-dialog';
 
 var ConfirmationModalImpl = function ConfirmationModalImpl(props) {
-  var onConfirm = props.onConfirm,
-      onClose = props.onClose,
-      options = props.options,
-      formatMessage = props.intl.formatMessage,
-      testId = props.testId;
-  var heading = (options === null || options === void 0 ? void 0 : options.title) || formatMessage(messages.confirmModalDefaultHeading);
-  var okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(messages.confirmModalOK);
-  var cancelButtonLabel = (options === null || options === void 0 ? void 0 : options.cancelButtonLabel) || formatMessage(messages.confirmModalCancel);
-  return /*#__PURE__*/React.createElement(ModalTransition, null, options && /*#__PURE__*/React.createElement(Modal, {
-    onClose: onClose,
-    testId: testId
-  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
-    appearance: "warning"
-  }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, options.message)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
-    appearance: "default",
-    onClick: onClose,
-    testId: testId ? "".concat(testId, "-cancel-button") : undefined
-  }, cancelButtonLabel), /*#__PURE__*/React.createElement(Button, {
-    appearance: "warning",
-    onClick: onConfirm,
-    testId: testId ? "".concat(testId, "-confirm-button") : undefined
-  }, okButtonLabel))));
+  var options = props.options;
+
+  var renderModel = function renderModel() {
+    var isReferentialityDialog = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    return isReferentialityDialog ? /*#__PURE__*/React.createElement(CheckboxModal, props) : /*#__PURE__*/React.createElement(SimpleModal, props);
+  };
+
+  return options ? /*#__PURE__*/React.createElement(ModalTransition, null, renderModel(options === null || options === void 0 ? void 0 : options.isReferentialityDialog)) : null;
 };
 
 export var ConfirmationModal = injectIntl(ConfirmationModalImpl);

package/dist/esm/plugins/floating-toolbar/ui/Dropdown.js

@@ -57,12 +57,14 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "renderArrayOptions", function (options) {
       var _this$props = _this.props,
           showSelected = _this$props.showSelected,
-          dispatchCommand = _this$props.dispatchCommand;
+          dispatchCommand = _this$props.dispatchCommand,
+          editorView = _this$props.editorView;
       return jsx(DropdownMenu, {
         hide: _this.hide,
         dispatchCommand: dispatchCommand,
         items: options,
-        showSelected: showSelected
+        showSelected: showSelected,
+        editorView: editorView
       });
     });
 
@@ -87,6 +89,14 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       (_document$querySelect = document.querySelector("[data-testid=".concat(_this.props.buttonTestId, "]"))) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.focus();
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onOpenChanged", function (openChangedEvent) {
+      if (!openChangedEvent.isOpen && openChangedEvent.event instanceof KeyboardEvent) {
+        var _openChangedEvent$eve;
+
+        ((_openChangedEvent$eve = openChangedEvent.event) === null || _openChangedEvent$eve === void 0 ? void 0 : _openChangedEvent$eve.key) === 'Escape' ? _this.hideonEsc() : _this.hide();
+      }
+    });
+
     return _this;
   }
 
@@ -106,7 +116,8 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           disabled = _this$props2.disabled,
           tooltip = _this$props2.tooltip,
           buttonTestId = _this$props2.buttonTestId,
-          dropdownWidth = _this$props2.dropdownWidth;
+          dropdownWidth = _this$props2.dropdownWidth,
+          editorView = _this$props2.editorView;
       var trigger;
 
       if (icon) {
@@ -152,9 +163,11 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         isOpen: isOpen,
         handleClickOutside: this.hide,
         handleEscapeKeydown: this.hideonEsc,
+        onOpenChange: this.onOpenChanged,
         fitWidth: fitWidth + fitTolerance,
         fitHeight: fitHeight + fitTolerance,
-        trigger: trigger
+        trigger: trigger,
+        editorView: editorView
       }, Array.isArray(options) ? this.renderArrayOptions(options) : options.render({
         hide: this.hide,
         dispatchCommand: dispatchCommand

package/dist/esm/plugins/floating-toolbar/ui/DropdownMenu.js

@@ -3,6 +3,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject, _templateObject2;
@@ -12,6 +13,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 /** @jsx jsx */
+import { useState, useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
 import { gridSize } from '@atlaskit/theme/constants';
@@ -31,6 +33,95 @@ var menuContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateL
 export var itemSpacing = gridSize() / 2;
 var DropdownButtonItem = ButtonItem;
 
+var DropdownMenuItem = function DropdownMenuItem(_ref) {
+  var item = _ref.item,
+      hide = _ref.hide,
+      dispatchCommand = _ref.dispatchCommand,
+      editorView = _ref.editorView,
+      iconBefore = _ref.iconBefore;
+
+  var _useState = useState(item.tooltip || ''),
+      _useState2 = _slicedToArray(_useState, 2),
+      tooltipContent = _useState2[0],
+      setTooltipContent = _useState2[1];
+
+  var handleTooltipMouseOut = useCallback(function () {
+    setTooltipContent('');
+  }, []);
+  var handleItemMouseDown = useCallback(function (e) {
+    e.preventDefault();
+  }, []);
+  var handleItemMouseOver = useCallback(function (e) {
+    setTooltipContent(item.tooltip || '');
+
+    if (item.onMouseOver) {
+      e.preventDefault();
+      dispatchCommand(item.onMouseOver);
+    }
+  }, [item.tooltip, item.onMouseOver, dispatchCommand]);
+  var handleItemMouseEnter = useCallback(function (e) {
+    if (item.onMouseEnter) {
+      e.preventDefault();
+      dispatchCommand(item.onMouseEnter);
+    }
+  }, [item.onMouseEnter, dispatchCommand]);
+  var handleItemMouseLeave = useCallback(function (e) {
+    if (item.onMouseLeave) {
+      e.preventDefault();
+      dispatchCommand(item.onMouseLeave);
+    }
+  }, [item.onMouseLeave, dispatchCommand]);
+  var handleItemOnFocus = useCallback(function (e) {
+    if (item.onFocus) {
+      e.preventDefault();
+      dispatchCommand(item.onFocus);
+    }
+  }, [item.onFocus, dispatchCommand]);
+  var handleItemOnBlur = useCallback(function (e) {
+    if (item.onBlur) {
+      e.preventDefault();
+      dispatchCommand(item.onBlur);
+    }
+  }, [item.onBlur, dispatchCommand]);
+  var handleItemClick = useCallback(function () {
+    /**
+     * The order of dispatching the event and hide() is important, because
+     * the ClickAreaBlock will be relying on the element to calculate the
+     * click coordinate.
+     * For more details, please visit the comment in this PR https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5328/edm-1321-set-selection-near-smart-link?link_source=email#chg-packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
+     */
+    dispatchCommand(item.onClick);
+    hide();
+
+    if (!(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
+      editorView === null || editorView === void 0 ? void 0 : editorView.focus();
+    }
+  }, [dispatchCommand, item.onClick, hide, editorView]);
+  var itemContent = jsx(DropdownButtonItem, {
+    iconBefore: iconBefore,
+    iconAfter: item.elemAfter,
+    onClick: handleItemClick,
+    "data-testid": item.testId,
+    isDisabled: item.disabled,
+    onMouseDown: handleItemMouseDown,
+    onMouseOver: handleItemMouseOver,
+    onMouseEnter: handleItemMouseEnter,
+    onMouseLeave: handleItemMouseLeave,
+    onFocus: handleItemOnFocus,
+    onBlur: handleItemOnBlur
+  }, item.title);
+
+  if (tooltipContent) {
+    return jsx(Tooltip, {
+      content: tooltipContent
+    }, jsx("div", {
+      onMouseOut: handleTooltipMouseOut
+    }, itemContent));
+  }
+
+  return itemContent;
+};
+
 var Dropdown = /*#__PURE__*/function (_Component) {
   _inherits(Dropdown, _Component);
 
@@ -51,59 +142,21 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           hide = _this$props.hide,
           dispatchCommand = _this$props.dispatchCommand,
           items = _this$props.items,
-          intl = _this$props.intl;
+          intl = _this$props.intl,
+          editorView = _this$props.editorView;
       return jsx("div", {
         css: menuContainer
       }, items.filter(function (item) {
         return !item.hidden;
       }).map(function (item, idx) {
-        var itemContent = jsx(DropdownButtonItem, {
+        return jsx(DropdownMenuItem, {
           key: idx,
-          iconBefore: _this.renderSelected(item, intl),
-          iconAfter: item.elemAfter,
-          onClick: function onClick() {
-            /**
-             * The order of dispatching the event and hide() is important, because
-             * the ClickAreaBlock will be relying on the element to calculate the
-             * click coordinate.
-             * For more details, please visit the comment in this PR https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/5328/edm-1321-set-selection-near-smart-link?link_source=email#chg-packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
-             */
-            dispatchCommand(item.onClick);
-            hide();
-          },
-          "data-testid": item.testId,
-          isDisabled: item.disabled,
-          onMouseDown: function onMouseDown(e) {
-            e.preventDefault();
-          },
-          onMouseOver: function onMouseOver(e) {
-            if (item.onMouseOver) {
-              e.preventDefault();
-              dispatchCommand(item.onMouseOver);
-            }
-          },
-          onMouseEnter: function onMouseEnter(e) {
-            if (item.onMouseEnter) {
-              e.preventDefault();
-              dispatchCommand(item.onMouseEnter);
-            }
-          },
-          onMouseLeave: function onMouseLeave(e) {
-            if (item.onMouseLeave) {
-              e.preventDefault();
-              dispatchCommand(item.onMouseLeave);
-            }
-          }
-        }, item.title);
-
-        if (item.tooltip) {
-          return jsx(Tooltip, {
-            key: idx,
-            content: item.tooltip
-          }, itemContent);
-        }
-
-        return itemContent;
+          item: item,
+          hide: hide,
+          dispatchCommand: dispatchCommand,
+          editorView: editorView,
+          iconBefore: _this.renderSelected(item, intl)
+        });
       }));
     }
   }, {

package/dist/esm/plugins/floating-toolbar/ui/EmojiPickerButton.js

@@ -19,6 +19,7 @@ var emojiPickerButtonWrapper = css(_templateObject || (_templateObject = _tagged
 // https://product-fabric.atlassian.net/browse/CETI-148
 
 var emojiPickerWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: -12px;\n  margin-top: -4px;\n"])));
+var EmojiPickerWithListener = withOuterListeners(EmojiPicker);
 export var EmojiPickerButton = function EmojiPickerButton(props) {
   var buttonRef = React.useRef(null);
 
@@ -27,7 +28,6 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
       isPopupOpen = _React$useState2[0],
       setIsPopupOpen = _React$useState2[1];
 
-  var EmojiPickerWithListener = withOuterListeners(EmojiPicker);
   React.useEffect(function () {
     if (props.setDisableParentScroll) {
       props.setDisableParentScroll(isPopupOpen);

package/dist/esm/plugins/floating-toolbar/ui/ScrollButtons.js

@@ -3,12 +3,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 /** @jsx jsx */
 import React, { useEffect, useState, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -25,8 +19,6 @@ var toolbarScrollButtons = css(_templateObject || (_templateObject = _taggedTemp
 var LeftIcon = ChevronLeftLargeIcon;
 var RightIcon = ChevronRightLargeIcon;
 export default (function (_ref) {
-  var _scrollContainerRef$c, _scrollContainerRef$c2;
-
   var intl = _ref.intl,
       scrollContainerRef = _ref.scrollContainerRef,
       node = _ref.node,
@@ -48,7 +40,6 @@ export default (function (_ref) {
       canScrollRight = _useState6[0],
       setCanScrollRight = _useState6[1];
 
-  var items = Array.from(((_scrollContainerRef$c = scrollContainerRef.current) === null || _scrollContainerRef$c === void 0 ? void 0 : (_scrollContainerRef$c2 = _scrollContainerRef$c.firstChild) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.childNodes) || {});
   var scheduledSetCanScroll = rafSchedule(function () {
     var _ref2 = scrollContainerRef.current,
         scrollLeft = _ref2.scrollLeft,
@@ -63,115 +54,44 @@ export default (function (_ref) {
   };
 
   var scrollLeft = function scrollLeft() {
-    // find the first item partially visible
-    var _iterator = _createForOfIteratorHelper(items.reverse().entries()),
-        _step;
-
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var _scrollContainerRef$c3;
-
-        var _step$value = _slicedToArray(_step.value, 2),
-            itemIndex = _step$value[0],
-            item = _step$value[1];
-
-        var _item$getBoundingClie = item.getBoundingClientRect(),
-            itemLeft = _item$getBoundingClie.left,
-            itemWidth = _item$getBoundingClie.width;
-
-        var _ref3 = ((_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.getBoundingClientRect()) || {},
-            _ref3$left = _ref3.left,
-            scrollContainerLeft = _ref3$left === void 0 ? 0 : _ref3$left,
-            _ref3$width = _ref3.width,
-            scrollContainerWidth = _ref3$width === void 0 ? 0 : _ref3$width; // if item is partially visible on the left, scroll to it so it became the last item visible
-
-
-        if (itemLeft <= scrollContainerLeft) {
-          var _scrollContainerRef$c4, _scrollContainerRef$c5;
-
-          var gap = scrollContainerWidth - itemWidth;
-          var scrollTo = item.offsetLeft - gap; // if scrollTo is same as current scrollLeft
-
-          if (Math.floor(scrollTo) === Math.floor((scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : (_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.scrollLeft) || 0)) {
-            // if this is the first item, scroll to the beginning, otherwise find next item to scroll to
-            if (itemIndex === items.length - 1) {
-              scrollTo = 0;
-            } else {
-              continue;
-            }
-          }
-
-          scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : (_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.scrollTo({
-            top: 0,
-            left: scrollTo,
-            behavior: 'smooth'
-          });
-          break;
-        }
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-  };
-
-  var scrollRight = function scrollRight() {
-    // find the last item partially visible
-    var _iterator2 = _createForOfIteratorHelper(items),
-        _step2;
+    var _scrollContainerRef$c, _scrollContainerRef$c2, _scrollContainerRef$c3;
 
-    try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        var _scrollContainerRef$c6;
+    var _ref3 = ((_scrollContainerRef$c = scrollContainerRef.current) === null || _scrollContainerRef$c === void 0 ? void 0 : _scrollContainerRef$c.getBoundingClientRect()) || {},
+        _ref3$width = _ref3.width,
+        scrollContainerWidth = _ref3$width === void 0 ? 0 : _ref3$width;
 
-        var item = _step2.value;
+    var scrollLeft = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.scrollLeft) || 0; // scroll to current position - scroll container width
 
-        var _item$getBoundingClie2 = item.getBoundingClientRect(),
-            itemLeft = _item$getBoundingClie2.left,
-            itemWidth = _item$getBoundingClie2.width;
-
-        var _ref4 = ((_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.getBoundingClientRect()) || {},
-            _ref4$left = _ref4.left,
-            scrollContainerLeft = _ref4$left === void 0 ? 0 : _ref4$left,
-            _ref4$width = _ref4.width,
-            scrollContainerWidth = _ref4$width === void 0 ? 0 : _ref4$width; // if item is partially visible on the right
-
-
-        if (itemLeft + itemWidth >= scrollContainerLeft + scrollContainerWidth) {
-          var _scrollContainerRef$c7, _scrollContainerRef$c8, _scrollContainerRef$c9;
-
-          var scrollTo = item.offsetLeft; // if the item is longer than the entire container width, just scroll past it
+    var scrollTo = scrollLeft - scrollContainerWidth;
+    (_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
+  };
 
-          if (itemWidth >= scrollContainerWidth && (((_scrollContainerRef$c7 = scrollContainerRef.current) === null || _scrollContainerRef$c7 === void 0 ? void 0 : _scrollContainerRef$c7.scrollLeft) || 0) >= itemLeft - 1) {
-            scrollTo = item.offsetLeft + item.offsetWidth;
-          } // if scrollTo is same as current scrollLeft, find next item to scroll to
+  var scrollRight = function scrollRight() {
+    var _scrollContainerRef$c4, _scrollContainerRef$c5, _scrollContainerRef$c6;
 
+    var _ref4 = ((_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.getBoundingClientRect()) || {},
+        _ref4$width = _ref4.width,
+        scrollContainerWidth = _ref4$width === void 0 ? 0 : _ref4$width;
 
-          if (Math.floor(scrollTo) === Math.floor((scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : (_scrollContainerRef$c8 = scrollContainerRef.current) === null || _scrollContainerRef$c8 === void 0 ? void 0 : _scrollContainerRef$c8.scrollLeft) || 0)) {
-            continue;
-          }
+    var scrollLeft = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.scrollLeft) || 0; // scroll to current position + scroll container width
 
-          (_scrollContainerRef$c9 = scrollContainerRef.current) === null || _scrollContainerRef$c9 === void 0 ? void 0 : _scrollContainerRef$c9.scrollTo({
-            top: 0,
-            left: scrollTo,
-            behavior: 'smooth'
-          });
-          break;
-        }
-      }
-    } catch (err) {
-      _iterator2.e(err);
-    } finally {
-      _iterator2.f();
-    }
+    var scrollTo = scrollLeft + scrollContainerWidth;
+    (_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
   };
 
   var resizeObserver = new ResizeObserver(function (t) {
-    var _scrollContainerRef$c10, _scrollContainerRef$c11, _scrollContainerRef$c12;
+    var _scrollContainerRef$c7, _scrollContainerRef$c8, _scrollContainerRef$c9;
 
-    var widthNeededToShowAllItems = ((_scrollContainerRef$c10 = scrollContainerRef.current) === null || _scrollContainerRef$c10 === void 0 ? void 0 : _scrollContainerRef$c10.scrollWidth) || 0;
-    var availableSpace = (_scrollContainerRef$c11 = scrollContainerRef.current) === null || _scrollContainerRef$c11 === void 0 ? void 0 : (_scrollContainerRef$c12 = _scrollContainerRef$c11.parentNode) === null || _scrollContainerRef$c12 === void 0 ? void 0 : _scrollContainerRef$c12.offsetWidth;
+    var widthNeededToShowAllItems = ((_scrollContainerRef$c7 = scrollContainerRef.current) === null || _scrollContainerRef$c7 === void 0 ? void 0 : _scrollContainerRef$c7.scrollWidth) || 0;
+    var availableSpace = (_scrollContainerRef$c8 = scrollContainerRef.current) === null || _scrollContainerRef$c8 === void 0 ? void 0 : (_scrollContainerRef$c9 = _scrollContainerRef$c8.parentNode) === null || _scrollContainerRef$c9 === void 0 ? void 0 : _scrollContainerRef$c9.offsetWidth;
 
     if (availableSpace >= widthNeededToShowAllItems) {
       setNeedScroll(false);
@@ -204,7 +124,8 @@ export default (function (_ref) {
   }, [node, scrollContainerRef]);
   return needScroll ? jsx("div", {
     ref: buttonsContainerRef,
-    css: toolbarScrollButtons
+    css: toolbarScrollButtons,
+    className: "scroll-buttons"
   }, jsx(Button, {
     title: intl.formatMessage(messages.floatingToolbarScrollLeft),
     icon: jsx(LeftIcon, {

package/dist/esm/plugins/floating-toolbar/ui/SimpleModal.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import Button from '@atlaskit/button/standard-button';
+import Modal, { ModalBody, ModalTitle, ModalHeader, ModalFooter } from '@atlaskit/modal-dialog';
+import messages from './messages';
+export var SimpleModal = function SimpleModal(props) {
+  var onConfirm = props.onConfirm,
+      onClose = props.onClose,
+      options = props.options,
+      formatMessage = props.intl.formatMessage,
+      testId = props.testId;
+  var heading = (options === null || options === void 0 ? void 0 : options.title) || formatMessage(messages.confirmModalDefaultHeading);
+  var okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(messages.confirmModalOK);
+  var cancelButtonLabel = (options === null || options === void 0 ? void 0 : options.cancelButtonLabel) || formatMessage(messages.confirmModalCancel);
+  return /*#__PURE__*/React.createElement(Modal, {
+    onClose: onClose,
+    testId: testId
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
+    appearance: "warning"
+  }, heading)), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, options === null || options === void 0 ? void 0 : options.message)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "default",
+    onClick: onClose,
+    testId: testId ? "".concat(testId, "-cancel-button") : undefined
+  }, cancelButtonLabel), /*#__PURE__*/React.createElement(Button, {
+    appearance: "warning",
+    onClick: function onClick() {
+      return onConfirm();
+    },
+    testId: testId ? "".concat(testId, "-confirm-button") : undefined
+  }, okButtonLabel)));
+};