@atlaskit/editor-plugin-floating-toolbar 12.1.3 → 12.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 12.2.0
+
+### Minor Changes
+
+- [`6644994a61d9c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6644994a61d9c) -
+  Add editor-positioned dropdown support for custom floating toolbar items
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.1.3
 
 ### Patch Changes

package/dist/cjs/ui/Toolbar.js

@@ -202,7 +202,13 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
         });
       case 'custom':
         {
-          return item.render(editorView, idx, dispatchAnalyticsEvent);
+          return item.render(editorView, idx, dispatchAnalyticsEvent, {
+            popupsBoundariesElement: popupsBoundariesElement,
+            popupsMountPoint: popupsMountPoint,
+            popupsScrollableElement: popupsScrollableElement,
+            scrollable: scrollable,
+            setDisableParentScroll: scrollable ? setDisableScroll : undefined
+          });
         }
       case 'overflow-dropdown':
         // if an option has a confirmDialog, we need to replace its onClick handler
@@ -428,7 +434,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
   }
   // only rerender toolbar items if the node is different
   // otherwise it causes an issue where multiple popups stays open
-  return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !(0, _floatingToolbar.areSameItems)(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
+  return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || prevProps.popupsBoundariesElement !== nextProps.popupsBoundariesElement || prevProps.popupsMountPoint !== nextProps.popupsMountPoint || prevProps.popupsScrollableElement !== nextProps.popupsScrollableElement || prevProps.scrollable !== nextProps.scrollable || prevProps.setDisableScroll !== nextProps.setDisableScroll || !(0, _floatingToolbar.areSameItems)(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
 });
 var buttonGroupStyles = (0, _react2.css)({
   display: 'flex',
@@ -577,6 +583,20 @@ var Toolbar = /*#__PURE__*/function (_Component) {
     var _this;
     (0, _classCallCheck2.default)(this, Toolbar);
     _this = _callSuper(this, Toolbar, [props]);
+    (0, _defineProperty2.default)(_this, "setDisableScroll", function (disabled) {
+      // wait before setting disabled state incase users jumping from one popup to another
+      if (disabled) {
+        requestAnimationFrame(function () {
+          _this.setState({
+            scrollDisabled: disabled
+          });
+        });
+      } else {
+        _this.setState({
+          scrollDisabled: disabled
+        });
+      }
+    });
     (0, _defineProperty2.default)(_this, "shouldHandleArrowKeys", function () {
       var _this$props$items;
       //To prevent the keydown handling of arrow keys for custom toolbar items with 'disableArrowNavigation' prop enabled,
@@ -649,23 +669,6 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         (_this$props$api = this.props.api) === null || _this$props$api === void 0 || (_this$props$api = _this$props$api.decorations) === null || _this$props$api === void 0 || _this$props$api.actions.removeDecoration(state, dispatch);
       }
     }
-  }, {
-    key: "setDisableScroll",
-    value: function setDisableScroll(disabled) {
-      var _this2 = this;
-      // wait before setting disabled state incase users jumping from one popup to another
-      if (disabled) {
-        requestAnimationFrame(function () {
-          _this2.setState({
-            scrollDisabled: disabled
-          });
-        });
-      } else {
-        this.setState({
-          scrollDisabled: disabled
-        });
-      }
-    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -758,7 +761,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
       , (0, _extends2.default)({}, this.props, {
-        setDisableScroll: this.setDisableScroll.bind(this),
+        setDisableScroll: this.setDisableScroll,
         mountRef: this.mountRef,
         mounted: this.state.mounted
       }))), scrollable && (areAnyNewToolbarFlagsEnabled ? (0, _react2.jsx)(_ScrollButton.ScrollButton, {

package/dist/es2019/ui/Toolbar.js

@@ -178,7 +178,13 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
         });
       case 'custom':
         {
-          return item.render(editorView, idx, dispatchAnalyticsEvent);
+          return item.render(editorView, idx, dispatchAnalyticsEvent, {
+            popupsBoundariesElement,
+            popupsMountPoint,
+            popupsScrollableElement,
+            scrollable,
+            setDisableParentScroll: scrollable ? setDisableScroll : undefined
+          });
         }
       case 'overflow-dropdown':
         // if an option has a confirmDialog, we need to replace its onClick handler
@@ -395,7 +401,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
   }
   // only rerender toolbar items if the node is different
   // otherwise it causes an issue where multiple popups stays open
-  return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !areSameItems(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
+  return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || prevProps.popupsBoundariesElement !== nextProps.popupsBoundariesElement || prevProps.popupsMountPoint !== nextProps.popupsMountPoint || prevProps.popupsScrollableElement !== nextProps.popupsScrollableElement || prevProps.scrollable !== nextProps.scrollable || prevProps.setDisableScroll !== nextProps.setDisableScroll || !areSameItems(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
 });
 const buttonGroupStyles = css({
   display: 'flex',
@@ -539,6 +545,20 @@ css({
 class Toolbar extends Component {
   constructor(props) {
     super(props);
+    _defineProperty(this, "setDisableScroll", disabled => {
+      // wait before setting disabled state incase users jumping from one popup to another
+      if (disabled) {
+        requestAnimationFrame(() => {
+          this.setState({
+            scrollDisabled: disabled
+          });
+        });
+      } else {
+        this.setState({
+          scrollDisabled: disabled
+        });
+      }
+    });
     _defineProperty(this, "shouldHandleArrowKeys", () => {
       var _this$props$items;
       //To prevent the keydown handling of arrow keys for custom toolbar items with 'disableArrowNavigation' prop enabled,
@@ -606,20 +626,6 @@ class Toolbar extends Component {
       (_this$props$api = this.props.api) === null || _this$props$api === void 0 ? void 0 : (_this$props$api$decor = _this$props$api.decorations) === null || _this$props$api$decor === void 0 ? void 0 : _this$props$api$decor.actions.removeDecoration(state, dispatch);
     }
   }
-  setDisableScroll(disabled) {
-    // wait before setting disabled state incase users jumping from one popup to another
-    if (disabled) {
-      requestAnimationFrame(() => {
-        this.setState({
-          scrollDisabled: disabled
-        });
-      });
-    } else {
-      this.setState({
-        scrollDisabled: disabled
-      });
-    }
-  }
   componentDidMount() {
     this.setState({
       mounted: true
@@ -707,7 +713,7 @@ class Toolbar extends Component {
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
     , _extends({}, this.props, {
-      setDisableScroll: this.setDisableScroll.bind(this),
+      setDisableScroll: this.setDisableScroll,
       mountRef: this.mountRef,
       mounted: this.state.mounted
     }))), scrollable && (areAnyNewToolbarFlagsEnabled ? jsx(ScrollButton, {

package/dist/esm/ui/Toolbar.js

@@ -196,7 +196,13 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
         });
       case 'custom':
         {
-          return item.render(editorView, idx, dispatchAnalyticsEvent);
+          return item.render(editorView, idx, dispatchAnalyticsEvent, {
+            popupsBoundariesElement: popupsBoundariesElement,
+            popupsMountPoint: popupsMountPoint,
+            popupsScrollableElement: popupsScrollableElement,
+            scrollable: scrollable,
+            setDisableParentScroll: scrollable ? setDisableScroll : undefined
+          });
         }
       case 'overflow-dropdown':
         // if an option has a confirmDialog, we need to replace its onClick handler
@@ -422,7 +428,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
   }
   // only rerender toolbar items if the node is different
   // otherwise it causes an issue where multiple popups stays open
-  return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !areSameItems(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
+  return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || prevProps.popupsBoundariesElement !== nextProps.popupsBoundariesElement || prevProps.popupsMountPoint !== nextProps.popupsMountPoint || prevProps.popupsScrollableElement !== nextProps.popupsScrollableElement || prevProps.scrollable !== nextProps.scrollable || prevProps.setDisableScroll !== nextProps.setDisableScroll || !areSameItems(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
 });
 var buttonGroupStyles = css({
   display: 'flex',
@@ -571,6 +577,20 @@ var Toolbar = /*#__PURE__*/function (_Component) {
     var _this;
     _classCallCheck(this, Toolbar);
     _this = _callSuper(this, Toolbar, [props]);
+    _defineProperty(_this, "setDisableScroll", function (disabled) {
+      // wait before setting disabled state incase users jumping from one popup to another
+      if (disabled) {
+        requestAnimationFrame(function () {
+          _this.setState({
+            scrollDisabled: disabled
+          });
+        });
+      } else {
+        _this.setState({
+          scrollDisabled: disabled
+        });
+      }
+    });
     _defineProperty(_this, "shouldHandleArrowKeys", function () {
       var _this$props$items;
       //To prevent the keydown handling of arrow keys for custom toolbar items with 'disableArrowNavigation' prop enabled,
@@ -643,23 +663,6 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         (_this$props$api = this.props.api) === null || _this$props$api === void 0 || (_this$props$api = _this$props$api.decorations) === null || _this$props$api === void 0 || _this$props$api.actions.removeDecoration(state, dispatch);
       }
     }
-  }, {
-    key: "setDisableScroll",
-    value: function setDisableScroll(disabled) {
-      var _this2 = this;
-      // wait before setting disabled state incase users jumping from one popup to another
-      if (disabled) {
-        requestAnimationFrame(function () {
-          _this2.setState({
-            scrollDisabled: disabled
-          });
-        });
-      } else {
-        this.setState({
-          scrollDisabled: disabled
-        });
-      }
-    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -752,7 +755,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
       , _extends({}, this.props, {
-        setDisableScroll: this.setDisableScroll.bind(this),
+        setDisableScroll: this.setDisableScroll,
         mountRef: this.mountRef,
         mounted: this.state.mounted
       }))), scrollable && (areAnyNewToolbarFlagsEnabled ? jsx(ScrollButton, {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "12.1.3",
+	"version": "12.2.0",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -43,7 +43,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/select": "^21.12.0",
-		"@atlaskit/tmp-editor-statsig": "^82.0.0",
+		"@atlaskit/tmp-editor-statsig": "^82.4.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^22.2.0",
 		"@babel/runtime": "^7.0.0",
@@ -54,7 +54,7 @@
 		"react-loadable": "^5.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.36.0",
+		"@atlaskit/editor-common": "^114.42.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -64,6 +64,8 @@
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
 		"enzyme": "^3.10.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"react-intl": "^6.6.2",
 		"wait-for-expect": "^1.2.0"
 	},