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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/ui/Toolbar.js +23 -20
  3. package/dist/es2019/ui/Toolbar.js +23 -17
  4. package/dist/esm/ui/Toolbar.js +23 -20
  5. package/package.json +9 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/editor-plugin-floating-toolbar
2
2
 
3
+ ## 12.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 12.2.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [`6644994a61d9c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6644994a61d9c) -
14
+ Add editor-positioned dropdown support for custom floating toolbar items
15
+
16
+ ### Patch Changes
17
+
18
+ - Updated dependencies
19
+
3
20
  ## 12.1.3
4
21
 
5
22
  ### Patch Changes
package/dist/cjs/ui/Toolbar.js CHANGED
@@ -202,7 +202,13 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
202
202
  });
203
203
  case 'custom':
204
204
  {
205
- return item.render(editorView, idx, dispatchAnalyticsEvent);
205
+ return item.render(editorView, idx, dispatchAnalyticsEvent, {
206
+ popupsBoundariesElement: popupsBoundariesElement,
207
+ popupsMountPoint: popupsMountPoint,
208
+ popupsScrollableElement: popupsScrollableElement,
209
+ scrollable: scrollable,
210
+ setDisableParentScroll: scrollable ? setDisableScroll : undefined
211
+ });
206
212
  }
207
213
  case 'overflow-dropdown':
208
214
  // 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) {
428
434
  }
429
435
  // only rerender toolbar items if the node is different
430
436
  // otherwise it causes an issue where multiple popups stays open
431
- 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);
437
+ 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);
432
438
  });
433
439
  var buttonGroupStyles = (0, _react2.css)({
434
440
  display: 'flex',
@@ -577,6 +583,20 @@ var Toolbar = /*#__PURE__*/function (_Component) {
577
583
  var _this;
578
584
  (0, _classCallCheck2.default)(this, Toolbar);
579
585
  _this = _callSuper(this, Toolbar, [props]);
586
+ (0, _defineProperty2.default)(_this, "setDisableScroll", function (disabled) {
587
+ // wait before setting disabled state incase users jumping from one popup to another
588
+ if (disabled) {
589
+ requestAnimationFrame(function () {
590
+ _this.setState({
591
+ scrollDisabled: disabled
592
+ });
593
+ });
594
+ } else {
595
+ _this.setState({
596
+ scrollDisabled: disabled
597
+ });
598
+ }
599
+ });
580
600
  (0, _defineProperty2.default)(_this, "shouldHandleArrowKeys", function () {
581
601
  var _this$props$items;
582
602
  //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) {
649
669
  (_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);
650
670
  }
651
671
  }
652
- }, {
653
- key: "setDisableScroll",
654
- value: function setDisableScroll(disabled) {
655
- var _this2 = this;
656
- // wait before setting disabled state incase users jumping from one popup to another
657
- if (disabled) {
658
- requestAnimationFrame(function () {
659
- _this2.setState({
660
- scrollDisabled: disabled
661
- });
662
- });
663
- } else {
664
- this.setState({
665
- scrollDisabled: disabled
666
- });
667
- }
668
- }
669
672
  }, {
670
673
  key: "componentDidMount",
671
674
  value: function componentDidMount() {
@@ -758,7 +761,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
758
761
  // Ignored via go/ees005
759
762
  // eslint-disable-next-line react/jsx-props-no-spreading
760
763
  , (0, _extends2.default)({}, this.props, {
761
- setDisableScroll: this.setDisableScroll.bind(this),
764
+ setDisableScroll: this.setDisableScroll,
762
765
  mountRef: this.mountRef,
763
766
  mounted: this.state.mounted
764
767
  }))), scrollable && (areAnyNewToolbarFlagsEnabled ? (0, _react2.jsx)(_ScrollButton.ScrollButton, {
package/dist/es2019/ui/Toolbar.js CHANGED
@@ -178,7 +178,13 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
178
178
  });
179
179
  case 'custom':
180
180
  {
181
- return item.render(editorView, idx, dispatchAnalyticsEvent);
181
+ return item.render(editorView, idx, dispatchAnalyticsEvent, {
182
+ popupsBoundariesElement,
183
+ popupsMountPoint,
184
+ popupsScrollableElement,
185
+ scrollable,
186
+ setDisableParentScroll: scrollable ? setDisableScroll : undefined
187
+ });
182
188
  }
183
189
  case 'overflow-dropdown':
184
190
  // if an option has a confirmDialog, we need to replace its onClick handler
@@ -395,7 +401,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
395
401
  }
396
402
  // only rerender toolbar items if the node is different
397
403
  // otherwise it causes an issue where multiple popups stays open
398
- return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !areSameItems(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
404
+ 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);
399
405
  });
400
406
  const buttonGroupStyles = css({
401
407
  display: 'flex',
@@ -539,6 +545,20 @@ css({
539
545
  class Toolbar extends Component {
540
546
  constructor(props) {
541
547
  super(props);
548
+ _defineProperty(this, "setDisableScroll", disabled => {
549
+ // wait before setting disabled state incase users jumping from one popup to another
550
+ if (disabled) {
551
+ requestAnimationFrame(() => {
552
+ this.setState({
553
+ scrollDisabled: disabled
554
+ });
555
+ });
556
+ } else {
557
+ this.setState({
558
+ scrollDisabled: disabled
559
+ });
560
+ }
561
+ });
542
562
  _defineProperty(this, "shouldHandleArrowKeys", () => {
543
563
  var _this$props$items;
544
564
  //To prevent the keydown handling of arrow keys for custom toolbar items with 'disableArrowNavigation' prop enabled,
@@ -606,20 +626,6 @@ class Toolbar extends Component {
606
626
  (_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);
607
627
  }
608
628
  }
609
- setDisableScroll(disabled) {
610
- // wait before setting disabled state incase users jumping from one popup to another
611
- if (disabled) {
612
- requestAnimationFrame(() => {
613
- this.setState({
614
- scrollDisabled: disabled
615
- });
616
- });
617
- } else {
618
- this.setState({
619
- scrollDisabled: disabled
620
- });
621
- }
622
- }
623
629
  componentDidMount() {
624
630
  this.setState({
625
631
  mounted: true
@@ -707,7 +713,7 @@ class Toolbar extends Component {
707
713
  // Ignored via go/ees005
708
714
  // eslint-disable-next-line react/jsx-props-no-spreading
709
715
  , _extends({}, this.props, {
710
- setDisableScroll: this.setDisableScroll.bind(this),
716
+ setDisableScroll: this.setDisableScroll,
711
717
  mountRef: this.mountRef,
712
718
  mounted: this.state.mounted
713
719
  }))), scrollable && (areAnyNewToolbarFlagsEnabled ? jsx(ScrollButton, {
package/dist/esm/ui/Toolbar.js CHANGED
@@ -196,7 +196,13 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
196
196
  });
197
197
  case 'custom':
198
198
  {
199
- return item.render(editorView, idx, dispatchAnalyticsEvent);
199
+ return item.render(editorView, idx, dispatchAnalyticsEvent, {
200
+ popupsBoundariesElement: popupsBoundariesElement,
201
+ popupsMountPoint: popupsMountPoint,
202
+ popupsScrollableElement: popupsScrollableElement,
203
+ scrollable: scrollable,
204
+ setDisableParentScroll: scrollable ? setDisableScroll : undefined
205
+ });
200
206
  }
201
207
  case 'overflow-dropdown':
202
208
  // if an option has a confirmDialog, we need to replace its onClick handler
@@ -422,7 +428,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
422
428
  }
423
429
  // only rerender toolbar items if the node is different
424
430
  // otherwise it causes an issue where multiple popups stays open
425
- return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !areSameItems(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
431
+ 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);
426
432
  });
427
433
  var buttonGroupStyles = css({
428
434
  display: 'flex',
@@ -571,6 +577,20 @@ var Toolbar = /*#__PURE__*/function (_Component) {
571
577
  var _this;
572
578
  _classCallCheck(this, Toolbar);
573
579
  _this = _callSuper(this, Toolbar, [props]);
580
+ _defineProperty(_this, "setDisableScroll", function (disabled) {
581
+ // wait before setting disabled state incase users jumping from one popup to another
582
+ if (disabled) {
583
+ requestAnimationFrame(function () {
584
+ _this.setState({
585
+ scrollDisabled: disabled
586
+ });
587
+ });
588
+ } else {
589
+ _this.setState({
590
+ scrollDisabled: disabled
591
+ });
592
+ }
593
+ });
574
594
  _defineProperty(_this, "shouldHandleArrowKeys", function () {
575
595
  var _this$props$items;
576
596
  //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) {
643
663
  (_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);
644
664
  }
645
665
  }
646
- }, {
647
- key: "setDisableScroll",
648
- value: function setDisableScroll(disabled) {
649
- var _this2 = this;
650
- // wait before setting disabled state incase users jumping from one popup to another
651
- if (disabled) {
652
- requestAnimationFrame(function () {
653
- _this2.setState({
654
- scrollDisabled: disabled
655
- });
656
- });
657
- } else {
658
- this.setState({
659
- scrollDisabled: disabled
660
- });
661
- }
662
- }
663
666
  }, {
664
667
  key: "componentDidMount",
665
668
  value: function componentDidMount() {
@@ -752,7 +755,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
752
755
  // Ignored via go/ees005
753
756
  // eslint-disable-next-line react/jsx-props-no-spreading
754
757
  , _extends({}, this.props, {
755
- setDisableScroll: this.setDisableScroll.bind(this),
758
+ setDisableScroll: this.setDisableScroll,
756
759
  mountRef: this.mountRef,
757
760
  mounted: this.state.mounted
758
761
  }))), scrollable && (areAnyNewToolbarFlagsEnabled ? jsx(ScrollButton, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-floating-toolbar",
3
- "version": "12.1.3",
3
+ "version": "12.2.1",
4
4
  "description": "Floating toolbar plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -21,7 +21,7 @@
21
21
  ],
22
22
  "atlaskit:src": "src/index.ts",
23
23
  "dependencies": {
24
- "@atlaskit/adf-utils": "^19.30.0",
24
+ "@atlaskit/adf-utils": "^19.31.0",
25
25
  "@atlaskit/button": "^23.11.0",
26
26
  "@atlaskit/checkbox": "^17.3.0",
27
27
  "@atlaskit/editor-palette": "^2.2.0",
@@ -37,15 +37,15 @@
37
37
  "@atlaskit/editor-plugin-user-intent": "^8.2.0",
38
38
  "@atlaskit/editor-prosemirror": "^7.3.0",
39
39
  "@atlaskit/emoji": "^70.10.0",
40
- "@atlaskit/icon": "^35.0.0",
40
+ "@atlaskit/icon": "^35.1.0",
41
41
  "@atlaskit/menu": "^8.5.0",
42
- "@atlaskit/modal-dialog": "^15.1.0",
42
+ "@atlaskit/modal-dialog": "^15.2.0",
43
43
  "@atlaskit/platform-feature-flags": "^1.1.0",
44
44
  "@atlaskit/primitives": "^19.0.0",
45
45
  "@atlaskit/select": "^21.12.0",
46
- "@atlaskit/tmp-editor-statsig": "^82.0.0",
46
+ "@atlaskit/tmp-editor-statsig": "^83.0.0",
47
47
  "@atlaskit/tokens": "^13.0.0",
48
- "@atlaskit/tooltip": "^22.2.0",
48
+ "@atlaskit/tooltip": "^22.3.0",
49
49
  "@babel/runtime": "^7.0.0",
50
50
  "@emotion/react": "^11.7.1",
51
51
  "bind-event-listener": "^3.0.0",
@@ -54,7 +54,7 @@
54
54
  "react-loadable": "^5.1.0"
55
55
  },
56
56
  "peerDependencies": {
57
- "@atlaskit/editor-common": "^114.36.0",
57
+ "@atlaskit/editor-common": "^114.46.0",
58
58
  "react": "^18.2.0",
59
59
  "react-dom": "^18.2.0",
60
60
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -64,6 +64,8 @@
64
64
  "@testing-library/react": "^16.3.0",
65
65
  "@testing-library/user-event": "^14.4.3",
66
66
  "enzyme": "^3.10.0",
67
+ "react": "^18.2.0",
68
+ "react-dom": "^18.2.0",
67
69
  "react-intl": "^6.6.2",
68
70
  "wait-for-expect": "^1.2.0"
69
71
  },