@atlaskit/editor-plugin-status 2.5.4 → 2.5.5

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-status
 
+## 2.5.5
+
+### Patch Changes
+
+- [#155668](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155668)
+  [`f948f63ced742`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f948f63ced742) -
+  We are testing replacing findDOMNode with an explicit ref behind a feature flag. If this fix is
+  successful it will be available in a later release.
+- Updated dependencies
+
 ## 2.5.4
 
 ### Patch Changes

package/dist/cjs/ui/statusPicker.js

@@ -18,6 +18,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _picker = require("@atlaskit/status/picker");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
@@ -277,19 +278,58 @@ var StatusPickerWithoutAnalytcs = exports.StatusPickerWithoutAnalytcs = /*#__PUR
       };
     }
   }, {
-    key: "render",
-    value: function render() {
+    key: "setRef",
+    value: function setRef(setOutsideClickTargetRef) {
+      var _this2 = this;
+      return function (ref) {
+        setOutsideClickTargetRef(ref);
+        _this2.popupBodyWrapper.current = ref;
+      };
+    }
+  }, {
+    key: "renderWithSetOutsideClickTargetRef",
+    value: function renderWithSetOutsideClickTargetRef(setOutsideClickTargetRef) {
       var _this$props = this.props,
         isNew = _this$props.isNew,
-        target = _this$props.target,
-        mountTo = _this$props.mountTo,
-        boundariesElement = _this$props.boundariesElement,
-        scrollableElement = _this$props.scrollableElement,
-        focusStatusInput = _this$props.focusStatusInput,
-        editorView = _this$props.editorView;
+        focusStatusInput = _this$props.focusStatusInput;
       var _this$state3 = this.state,
         color = _this$state3.color,
         text = _this$state3.text;
+      return (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        (0, _react2.jsx)("div", {
+          css: pickerContainerStyles,
+          tabIndex: -1,
+          ref: this.setRef(setOutsideClickTargetRef),
+          onClick: this.handlePopupClick,
+          onKeyDown: this.onKeyDown
+        }, (0, _react2.jsx)(_picker.StatusPicker
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        , {
+          autoFocus: isNew || focusStatusInput,
+          selectedColor: color,
+          text: text,
+          onColorClick: this.onColorClick,
+          onColorHover: this.onColorHover,
+          onTextChanged: this.onTextChanged,
+          onEnter: this.onEnter
+        }))
+      );
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        isNew = _this$props2.isNew,
+        target = _this$props2.target,
+        mountTo = _this$props2.mountTo,
+        boundariesElement = _this$props2.boundariesElement,
+        scrollableElement = _this$props2.scrollableElement,
+        focusStatusInput = _this$props2.focusStatusInput,
+        editorView = _this$props2.editorView;
+      var _this$state4 = this.state,
+        color = _this$state4.color,
+        text = _this$state4.text;
       if (!(editorView !== null && editorView !== void 0 && editorView.editable)) {
         return null;
       }
@@ -304,13 +344,16 @@ var StatusPickerWithoutAnalytcs = exports.StatusPickerWithoutAnalytcs = /*#__PUR
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,
         closeOnTab: false
-      }, (0, _react2.jsx)("div", {
+      }, (0, _platformFeatureFlags.fg)('platform_editor_replace_finddomnode_in_common') ? (0, _react2.jsx)(_uiReact.OutsideClickTargetRefContext.Consumer, null, this.renderWithSetOutsideClickTargetRef.bind(this)) :
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      (0, _react2.jsx)("div", {
         css: pickerContainerStyles,
         tabIndex: -1,
-        ref: this.popupBodyWrapper,
         onClick: this.handlePopupClick,
         onKeyDown: this.onKeyDown
-      }, (0, _react2.jsx)(_picker.StatusPicker, {
+      }, (0, _react2.jsx)(_picker.StatusPicker
+      // eslint-disable-next-line jsx-a11y/no-autofocus
+      , {
         autoFocus: isNew || focusStatusInput,
         selectedColor: color,
         text: text,

package/dist/es2019/ui/statusPicker.js

@@ -10,8 +10,9 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { StatusPicker as AkStatusPicker } from '@atlaskit/status/picker';
 import { N0 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
@@ -252,6 +253,42 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
       isNew
     };
   }
+  setRef(setOutsideClickTargetRef) {
+    return ref => {
+      setOutsideClickTargetRef(ref);
+      this.popupBodyWrapper.current = ref;
+    };
+  }
+  renderWithSetOutsideClickTargetRef(setOutsideClickTargetRef) {
+    const {
+      isNew,
+      focusStatusInput
+    } = this.props;
+    const {
+      color,
+      text
+    } = this.state;
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      jsx("div", {
+        css: pickerContainerStyles,
+        tabIndex: -1,
+        ref: this.setRef(setOutsideClickTargetRef),
+        onClick: this.handlePopupClick,
+        onKeyDown: this.onKeyDown
+      }, jsx(AkStatusPicker
+      // eslint-disable-next-line jsx-a11y/no-autofocus
+      , {
+        autoFocus: isNew || focusStatusInput,
+        selectedColor: color,
+        text: text,
+        onColorClick: this.onColorClick,
+        onColorHover: this.onColorHover,
+        onTextChanged: this.onTextChanged,
+        onEnter: this.onEnter
+      }))
+    );
+  }
   render() {
     const {
       isNew,
@@ -280,13 +317,16 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
       boundariesElement: boundariesElement,
       scrollableElement: scrollableElement,
       closeOnTab: false
-    }, jsx("div", {
+    }, fg('platform_editor_replace_finddomnode_in_common') ? jsx(OutsideClickTargetRefContext.Consumer, null, this.renderWithSetOutsideClickTargetRef.bind(this)) :
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    jsx("div", {
       css: pickerContainerStyles,
       tabIndex: -1,
-      ref: this.popupBodyWrapper,
       onClick: this.handlePopupClick,
       onKeyDown: this.onKeyDown
-    }, jsx(AkStatusPicker, {
+    }, jsx(AkStatusPicker
+    // eslint-disable-next-line jsx-a11y/no-autofocus
+    , {
       autoFocus: isNew || focusStatusInput,
       selectedColor: color,
       text: text,

package/dist/esm/ui/statusPicker.js

@@ -18,8 +18,9 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { StatusPicker as AkStatusPicker } from '@atlaskit/status/picker';
 import { N0 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
@@ -274,19 +275,58 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
       };
     }
   }, {
-    key: "render",
-    value: function render() {
+    key: "setRef",
+    value: function setRef(setOutsideClickTargetRef) {
+      var _this2 = this;
+      return function (ref) {
+        setOutsideClickTargetRef(ref);
+        _this2.popupBodyWrapper.current = ref;
+      };
+    }
+  }, {
+    key: "renderWithSetOutsideClickTargetRef",
+    value: function renderWithSetOutsideClickTargetRef(setOutsideClickTargetRef) {
       var _this$props = this.props,
         isNew = _this$props.isNew,
-        target = _this$props.target,
-        mountTo = _this$props.mountTo,
-        boundariesElement = _this$props.boundariesElement,
-        scrollableElement = _this$props.scrollableElement,
-        focusStatusInput = _this$props.focusStatusInput,
-        editorView = _this$props.editorView;
+        focusStatusInput = _this$props.focusStatusInput;
       var _this$state3 = this.state,
         color = _this$state3.color,
         text = _this$state3.text;
+      return (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        jsx("div", {
+          css: pickerContainerStyles,
+          tabIndex: -1,
+          ref: this.setRef(setOutsideClickTargetRef),
+          onClick: this.handlePopupClick,
+          onKeyDown: this.onKeyDown
+        }, jsx(AkStatusPicker
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        , {
+          autoFocus: isNew || focusStatusInput,
+          selectedColor: color,
+          text: text,
+          onColorClick: this.onColorClick,
+          onColorHover: this.onColorHover,
+          onTextChanged: this.onTextChanged,
+          onEnter: this.onEnter
+        }))
+      );
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        isNew = _this$props2.isNew,
+        target = _this$props2.target,
+        mountTo = _this$props2.mountTo,
+        boundariesElement = _this$props2.boundariesElement,
+        scrollableElement = _this$props2.scrollableElement,
+        focusStatusInput = _this$props2.focusStatusInput,
+        editorView = _this$props2.editorView;
+      var _this$state4 = this.state,
+        color = _this$state4.color,
+        text = _this$state4.text;
       if (!(editorView !== null && editorView !== void 0 && editorView.editable)) {
         return null;
       }
@@ -301,13 +341,16 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,
         closeOnTab: false
-      }, jsx("div", {
+      }, fg('platform_editor_replace_finddomnode_in_common') ? jsx(OutsideClickTargetRefContext.Consumer, null, this.renderWithSetOutsideClickTargetRef.bind(this)) :
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      jsx("div", {
         css: pickerContainerStyles,
         tabIndex: -1,
-        ref: this.popupBodyWrapper,
         onClick: this.handlePopupClick,
         onKeyDown: this.onKeyDown
-      }, jsx(AkStatusPicker, {
+      }, jsx(AkStatusPicker
+      // eslint-disable-next-line jsx-a11y/no-autofocus
+      , {
         autoFocus: isNew || focusStatusInput,
         selectedColor: color,
         text: text,

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

@@ -55,6 +55,8 @@ export declare class StatusPickerWithoutAnalytcs extends React.Component<Props,
     private handleTabPress;
     private handleArrow;
     private onKeyDown;
+    private setRef;
+    private renderWithSetOutsideClickTargetRef;
     render(): jsx.JSX.Element | null;
     private onColorHover;
     private onColorClick;

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

@@ -55,6 +55,8 @@ export declare class StatusPickerWithoutAnalytcs extends React.Component<Props,
     private handleTabPress;
     private handleArrow;
     private onKeyDown;
+    private setRef;
+    private renderWithSetOutsideClickTargetRef;
     render(): jsx.JSX.Element | null;
     private onColorHover;
     private onColorClick;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-status",
-	"version": "2.5.4",
+	"version": "2.5.5",
 	"description": "Status plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,10 +33,10 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^42.3.1",
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/editor-common": "^94.2.0",
+		"@atlaskit/editor-common": "^94.5.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
-		"@atlaskit/editor-shared-styles": "^3.0.0",
+		"@atlaskit/editor-shared-styles": "^3.1.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/status": "^1.5.0",
 		"@atlaskit/theme": "^14.0.0",
@@ -93,6 +93,9 @@
 	"platform-feature-flags": {
 		"editor_inline_comments_paste_insert_nodes": {
 			"type": "boolean"
+		},
+		"platform_editor_replace_finddomnode_in_common": {
+			"type": "boolean"
 		}
 	}
 }