@atlaskit/editor-plugin-status 0.2.12 → 0.2.13

package/.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  rules: {
+    '@typescript-eslint/no-duplicate-imports': 'error',
+    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/ban-types': [
+      'error',
+      {
+        types: {
+          'React.FC':
+            'Please use types directly on props instead, and explicitly define children if required',
+          'React.FunctionalComponent':
+            'Please use types directly on props instead, and explicitly define children if required',
+        },
+        extendDefaults: false,
+      },
+    ],
+  },
+};

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-status
 
+## 0.2.13
+
+### Patch Changes
+
+- [#67814](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67814) [`b9ae9606c2e0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b9ae9606c2e0) - Migrate status and alignment plugins to use useSharedPluginState rather than WithPluginState
+
 ## 0.2.12
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -10,13 +10,11 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
-var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
-var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _actions = require("./actions");
 var _keymap = require("./pm-plugins/keymap");
 var _plugin = _interopRequireDefault(require("./pm-plugins/plugin"));
 var _pluginKey = require("./pm-plugins/plugin-key");
-var _statusPicker = _interopRequireDefault(require("./ui/statusPicker"));
+var _ContentComponent = require("./ui/ContentComponent");
 var baseStatusPlugin = function baseStatusPlugin(_ref) {
   var _api$analytics;
   var options = _ref.config,
@@ -47,56 +45,30 @@ var baseStatusPlugin = function baseStatusPlugin(_ref) {
     commands: {
       removeStatus: _actions.removeStatus
     },
+    getSharedState: function getSharedState(state) {
+      if (!state) {
+        return undefined;
+      }
+      var pluginState = _pluginKey.pluginKey.getState(state);
+      return pluginState ? {
+        isNew: pluginState.isNew,
+        showStatusPickerAt: pluginState.showStatusPickerAt,
+        focusStatusInput: pluginState.focusStatusInput
+      } : undefined;
+    },
     contentComponent: function contentComponent(_ref2) {
       var editorView = _ref2.editorView,
         popupsMountPoint = _ref2.popupsMountPoint,
         popupsBoundariesElement = _ref2.popupsBoundariesElement,
         popupsScrollableElement = _ref2.popupsScrollableElement;
       var domAtPos = editorView.domAtPos.bind(editorView);
-      return /*#__PURE__*/_react.default.createElement(_withPluginState.WithPluginState, {
-        plugins: {
-          statusState: _pluginKey.pluginKey
-        },
-        render: function render(_ref3) {
-          var _ref3$statusState = _ref3.statusState,
-            statusState = _ref3$statusState === void 0 ? {} : _ref3$statusState;
-          var showStatusPickerAt = statusState.showStatusPickerAt;
-          if (typeof showStatusPickerAt !== 'number') {
-            return null;
-          }
-          var target = (0, _utils.findDomRefAtPos)(showStatusPickerAt, domAtPos);
-          var statusNode = editorView.state.doc.nodeAt(showStatusPickerAt);
-          if (!statusNode || statusNode.type.name !== 'status') {
-            return null;
-          }
-          var _statusNode$attrs = statusNode.attrs,
-            text = _statusNode$attrs.text,
-            color = _statusNode$attrs.color,
-            localId = _statusNode$attrs.localId;
-          return /*#__PURE__*/_react.default.createElement(_statusPicker.default, {
-            isNew: statusState.isNew,
-            focusStatusInput: statusState.focusStatusInput,
-            target: target,
-            defaultText: text,
-            defaultColor: color,
-            defaultLocalId: localId,
-            mountTo: popupsMountPoint,
-            boundariesElement: popupsBoundariesElement,
-            scrollableElement: popupsScrollableElement,
-            onSelect: function onSelect(status) {
-              (0, _actions.updateStatus)(status)(editorView.state, editorView.dispatch);
-            },
-            onTextChanged: function onTextChanged(status) {
-              (0, _actions.updateStatus)(status)(editorView.state, editorView.dispatch);
-            },
-            closeStatusPicker: function closeStatusPicker(closingPayload) {
-              (0, _actions.commitStatusPicker)(closingPayload)(editorView);
-            },
-            onEnter: function onEnter() {
-              (0, _actions.commitStatusPicker)()(editorView);
-            }
-          });
-        }
+      return /*#__PURE__*/_react.default.createElement(_ContentComponent.ContentComponent, {
+        domAtPos: domAtPos,
+        api: api,
+        editorView: editorView,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement
       });
     }
   };
@@ -106,8 +78,8 @@ var decorateWithPluginOptions = function decorateWithPluginOptions(plugin, optio
     return plugin;
   }
   plugin.pluginsOptions = {
-    quickInsert: function quickInsert(_ref4) {
-      var formatMessage = _ref4.formatMessage;
+    quickInsert: function quickInsert(_ref3) {
+      var formatMessage = _ref3.formatMessage;
       return [{
         id: 'status',
         title: formatMessage(_messages.toolbarInsertBlockMessages.status),
@@ -136,9 +108,9 @@ var decorateWithPluginOptions = function decorateWithPluginOptions(plugin, optio
   };
   return plugin;
 };
-var statusPlugin = exports.statusPlugin = function statusPlugin(_ref5) {
-  var options = _ref5.config,
-    api = _ref5.api;
+var statusPlugin = exports.statusPlugin = function statusPlugin(_ref4) {
+  var options = _ref4.config,
+    api = _ref4.api;
   return decorateWithPluginOptions(baseStatusPlugin({
     config: options,
     api: api

package/dist/cjs/ui/ContentComponent.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContentComponent = ContentComponent;
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _actions = require("../actions");
+var _statusPicker = _interopRequireDefault(require("./statusPicker"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ContentComponent(_ref) {
+  var api = _ref.api,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    editorView = _ref.editorView,
+    domAtPos = _ref.domAtPos;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['status']),
+    statusState = _useSharedPluginState.statusState;
+  var _ref2 = statusState !== null && statusState !== void 0 ? statusState : {},
+    showStatusPickerAt = _ref2.showStatusPickerAt;
+  var target = (0, _react.useMemo)(function () {
+    return showStatusPickerAt ? (0, _utils.findDomRefAtPos)(showStatusPickerAt, domAtPos) : null;
+  }, [showStatusPickerAt, domAtPos]);
+  var statusNode = (0, _react.useMemo)(function () {
+    return showStatusPickerAt ? editorView.state.doc.nodeAt(showStatusPickerAt) : undefined;
+  }, [showStatusPickerAt, editorView]);
+  var onSelect = (0, _react.useCallback)(function (status) {
+    (0, _actions.updateStatus)(status)(editorView.state, editorView.dispatch);
+  }, [editorView]);
+  var onTextChanged = (0, _react.useCallback)(function (status) {
+    (0, _actions.updateStatus)(status)(editorView.state, editorView.dispatch);
+  }, [editorView]);
+  var closeStatusPicker = (0, _react.useCallback)(function (closingPayload) {
+    (0, _actions.commitStatusPicker)(closingPayload)(editorView);
+  }, [editorView]);
+  var onEnter = (0, _react.useCallback)(function () {
+    (0, _actions.commitStatusPicker)()(editorView);
+  }, [editorView]);
+  if (typeof showStatusPickerAt !== 'number') {
+    return null;
+  }
+  if (!statusNode || statusNode.type.name !== 'status') {
+    return null;
+  }
+  var _statusNode$attrs = statusNode.attrs,
+    text = _statusNode$attrs.text,
+    color = _statusNode$attrs.color,
+    localId = _statusNode$attrs.localId;
+  return /*#__PURE__*/_react.default.createElement(_statusPicker.default, {
+    isNew: statusState === null || statusState === void 0 ? void 0 : statusState.isNew,
+    focusStatusInput: statusState === null || statusState === void 0 ? void 0 : statusState.focusStatusInput,
+    target: target,
+    defaultText: text,
+    defaultColor: color,
+    defaultLocalId: localId,
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    onSelect: onSelect,
+    onTextChanged: onTextChanged,
+    closeStatusPicker: closeStatusPicker,
+    onEnter: onEnter
+  });
+}

package/dist/cjs/ui/statusPicker.js

@@ -247,7 +247,7 @@ var StatusPickerWithoutAnalytcs = exports.StatusPickerWithoutAnalytcs = /*#__PUR
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState, _snapshot) {
+    value: function componentDidUpdate(prevProps, prevState) {
       var element = this.props.target;
       if (prevProps.target !== element) {
         var newState = this.extractStateFromProps(this.props);

package/dist/es2019/plugin.js

@@ -3,13 +3,11 @@ import { status } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconStatus } from '@atlaskit/editor-common/quick-insert';
-import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
-import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-import { commitStatusPicker, createStatus, removeStatus, updateStatus, updateStatusWithAnalytics } from './actions';
+import { commitStatusPicker, createStatus, removeStatus, updateStatusWithAnalytics } from './actions';
 import { keymapPlugin } from './pm-plugins/keymap';
 import createStatusPlugin from './pm-plugins/plugin';
 import { pluginKey } from './pm-plugins/plugin-key';
-import StatusPicker from './ui/statusPicker';
+import { ContentComponent } from './ui/ContentComponent';
 const baseStatusPlugin = ({
   config: options,
   api
@@ -39,6 +37,17 @@ const baseStatusPlugin = ({
     commands: {
       removeStatus
     },
+    getSharedState(state) {
+      if (!state) {
+        return undefined;
+      }
+      const pluginState = pluginKey.getState(state);
+      return pluginState ? {
+        isNew: pluginState.isNew,
+        showStatusPickerAt: pluginState.showStatusPickerAt,
+        focusStatusInput: pluginState.focusStatusInput
+      } : undefined;
+    },
     contentComponent({
       editorView,
       popupsMountPoint,
@@ -46,53 +55,13 @@ const baseStatusPlugin = ({
       popupsScrollableElement
     }) {
       const domAtPos = editorView.domAtPos.bind(editorView);
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        plugins: {
-          statusState: pluginKey
-        },
-        render: ({
-          statusState = {}
-        }) => {
-          const {
-            showStatusPickerAt
-          } = statusState;
-          if (typeof showStatusPickerAt !== 'number') {
-            return null;
-          }
-          const target = findDomRefAtPos(showStatusPickerAt, domAtPos);
-          const statusNode = editorView.state.doc.nodeAt(showStatusPickerAt);
-          if (!statusNode || statusNode.type.name !== 'status') {
-            return null;
-          }
-          const {
-            text,
-            color,
-            localId
-          } = statusNode.attrs;
-          return /*#__PURE__*/React.createElement(StatusPicker, {
-            isNew: statusState.isNew,
-            focusStatusInput: statusState.focusStatusInput,
-            target: target,
-            defaultText: text,
-            defaultColor: color,
-            defaultLocalId: localId,
-            mountTo: popupsMountPoint,
-            boundariesElement: popupsBoundariesElement,
-            scrollableElement: popupsScrollableElement,
-            onSelect: status => {
-              updateStatus(status)(editorView.state, editorView.dispatch);
-            },
-            onTextChanged: status => {
-              updateStatus(status)(editorView.state, editorView.dispatch);
-            },
-            closeStatusPicker: closingPayload => {
-              commitStatusPicker(closingPayload)(editorView);
-            },
-            onEnter: () => {
-              commitStatusPicker()(editorView);
-            }
-          });
-        }
+      return /*#__PURE__*/React.createElement(ContentComponent, {
+        domAtPos: domAtPos,
+        api: api,
+        editorView: editorView,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement
       });
     }
   };

package/dist/es2019/ui/ContentComponent.js

@@ -0,0 +1,60 @@
+import React, { useCallback, useMemo } from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { commitStatusPicker, updateStatus } from '../actions';
+import StatusPicker from './statusPicker';
+export function ContentComponent({
+  api,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement,
+  editorView,
+  domAtPos
+}) {
+  const {
+    statusState
+  } = useSharedPluginState(api, ['status']);
+  const {
+    showStatusPickerAt
+  } = statusState !== null && statusState !== void 0 ? statusState : {};
+  const target = useMemo(() => showStatusPickerAt ? findDomRefAtPos(showStatusPickerAt, domAtPos) : null, [showStatusPickerAt, domAtPos]);
+  const statusNode = useMemo(() => showStatusPickerAt ? editorView.state.doc.nodeAt(showStatusPickerAt) : undefined, [showStatusPickerAt, editorView]);
+  const onSelect = useCallback(status => {
+    updateStatus(status)(editorView.state, editorView.dispatch);
+  }, [editorView]);
+  const onTextChanged = useCallback(status => {
+    updateStatus(status)(editorView.state, editorView.dispatch);
+  }, [editorView]);
+  const closeStatusPicker = useCallback(closingPayload => {
+    commitStatusPicker(closingPayload)(editorView);
+  }, [editorView]);
+  const onEnter = useCallback(() => {
+    commitStatusPicker()(editorView);
+  }, [editorView]);
+  if (typeof showStatusPickerAt !== 'number') {
+    return null;
+  }
+  if (!statusNode || statusNode.type.name !== 'status') {
+    return null;
+  }
+  const {
+    text,
+    color,
+    localId
+  } = statusNode.attrs;
+  return /*#__PURE__*/React.createElement(StatusPicker, {
+    isNew: statusState === null || statusState === void 0 ? void 0 : statusState.isNew,
+    focusStatusInput: statusState === null || statusState === void 0 ? void 0 : statusState.focusStatusInput,
+    target: target,
+    defaultText: text,
+    defaultColor: color,
+    defaultLocalId: localId,
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    onSelect: onSelect,
+    onTextChanged: onTextChanged,
+    closeStatusPicker: closeStatusPicker,
+    onEnter: onEnter
+  });
+}

package/dist/es2019/ui/statusPicker.js

@@ -221,7 +221,7 @@ export class StatusPickerWithoutAnalytcs extends React.Component {
     this.fireStatusPopupClosedAnalytics(this.state);
     this.startTime = 0;
   }
-  componentDidUpdate(prevProps, prevState, _snapshot) {
+  componentDidUpdate(prevProps, prevState) {
     const element = this.props.target;
     if (prevProps.target !== element) {
       const newState = this.extractStateFromProps(this.props);

package/dist/esm/plugin.js

@@ -3,13 +3,11 @@ import { status } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconStatus } from '@atlaskit/editor-common/quick-insert';
-import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
-import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-import { commitStatusPicker, createStatus, removeStatus, updateStatus, updateStatusWithAnalytics } from './actions';
+import { commitStatusPicker, createStatus, removeStatus, updateStatusWithAnalytics } from './actions';
 import { keymapPlugin } from './pm-plugins/keymap';
 import createStatusPlugin from './pm-plugins/plugin';
 import { pluginKey } from './pm-plugins/plugin-key';
-import StatusPicker from './ui/statusPicker';
+import { ContentComponent } from './ui/ContentComponent';
 var baseStatusPlugin = function baseStatusPlugin(_ref) {
   var _api$analytics;
   var options = _ref.config,
@@ -40,56 +38,30 @@ var baseStatusPlugin = function baseStatusPlugin(_ref) {
     commands: {
       removeStatus: removeStatus
     },
+    getSharedState: function getSharedState(state) {
+      if (!state) {
+        return undefined;
+      }
+      var pluginState = pluginKey.getState(state);
+      return pluginState ? {
+        isNew: pluginState.isNew,
+        showStatusPickerAt: pluginState.showStatusPickerAt,
+        focusStatusInput: pluginState.focusStatusInput
+      } : undefined;
+    },
     contentComponent: function contentComponent(_ref2) {
       var editorView = _ref2.editorView,
         popupsMountPoint = _ref2.popupsMountPoint,
         popupsBoundariesElement = _ref2.popupsBoundariesElement,
         popupsScrollableElement = _ref2.popupsScrollableElement;
       var domAtPos = editorView.domAtPos.bind(editorView);
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        plugins: {
-          statusState: pluginKey
-        },
-        render: function render(_ref3) {
-          var _ref3$statusState = _ref3.statusState,
-            statusState = _ref3$statusState === void 0 ? {} : _ref3$statusState;
-          var showStatusPickerAt = statusState.showStatusPickerAt;
-          if (typeof showStatusPickerAt !== 'number') {
-            return null;
-          }
-          var target = findDomRefAtPos(showStatusPickerAt, domAtPos);
-          var statusNode = editorView.state.doc.nodeAt(showStatusPickerAt);
-          if (!statusNode || statusNode.type.name !== 'status') {
-            return null;
-          }
-          var _statusNode$attrs = statusNode.attrs,
-            text = _statusNode$attrs.text,
-            color = _statusNode$attrs.color,
-            localId = _statusNode$attrs.localId;
-          return /*#__PURE__*/React.createElement(StatusPicker, {
-            isNew: statusState.isNew,
-            focusStatusInput: statusState.focusStatusInput,
-            target: target,
-            defaultText: text,
-            defaultColor: color,
-            defaultLocalId: localId,
-            mountTo: popupsMountPoint,
-            boundariesElement: popupsBoundariesElement,
-            scrollableElement: popupsScrollableElement,
-            onSelect: function onSelect(status) {
-              updateStatus(status)(editorView.state, editorView.dispatch);
-            },
-            onTextChanged: function onTextChanged(status) {
-              updateStatus(status)(editorView.state, editorView.dispatch);
-            },
-            closeStatusPicker: function closeStatusPicker(closingPayload) {
-              commitStatusPicker(closingPayload)(editorView);
-            },
-            onEnter: function onEnter() {
-              commitStatusPicker()(editorView);
-            }
-          });
-        }
+      return /*#__PURE__*/React.createElement(ContentComponent, {
+        domAtPos: domAtPos,
+        api: api,
+        editorView: editorView,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement
       });
     }
   };
@@ -99,8 +71,8 @@ var decorateWithPluginOptions = function decorateWithPluginOptions(plugin, optio
     return plugin;
   }
   plugin.pluginsOptions = {
-    quickInsert: function quickInsert(_ref4) {
-      var formatMessage = _ref4.formatMessage;
+    quickInsert: function quickInsert(_ref3) {
+      var formatMessage = _ref3.formatMessage;
       return [{
         id: 'status',
         title: formatMessage(messages.status),
@@ -129,9 +101,9 @@ var decorateWithPluginOptions = function decorateWithPluginOptions(plugin, optio
   };
   return plugin;
 };
-export var statusPlugin = function statusPlugin(_ref5) {
-  var options = _ref5.config,
-    api = _ref5.api;
+export var statusPlugin = function statusPlugin(_ref4) {
+  var options = _ref4.config,
+    api = _ref4.api;
   return decorateWithPluginOptions(baseStatusPlugin({
     config: options,
     api: api

package/dist/esm/ui/ContentComponent.js

@@ -0,0 +1,60 @@
+import React, { useCallback, useMemo } from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { commitStatusPicker, updateStatus } from '../actions';
+import StatusPicker from './statusPicker';
+export function ContentComponent(_ref) {
+  var api = _ref.api,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    editorView = _ref.editorView,
+    domAtPos = _ref.domAtPos;
+  var _useSharedPluginState = useSharedPluginState(api, ['status']),
+    statusState = _useSharedPluginState.statusState;
+  var _ref2 = statusState !== null && statusState !== void 0 ? statusState : {},
+    showStatusPickerAt = _ref2.showStatusPickerAt;
+  var target = useMemo(function () {
+    return showStatusPickerAt ? findDomRefAtPos(showStatusPickerAt, domAtPos) : null;
+  }, [showStatusPickerAt, domAtPos]);
+  var statusNode = useMemo(function () {
+    return showStatusPickerAt ? editorView.state.doc.nodeAt(showStatusPickerAt) : undefined;
+  }, [showStatusPickerAt, editorView]);
+  var onSelect = useCallback(function (status) {
+    updateStatus(status)(editorView.state, editorView.dispatch);
+  }, [editorView]);
+  var onTextChanged = useCallback(function (status) {
+    updateStatus(status)(editorView.state, editorView.dispatch);
+  }, [editorView]);
+  var closeStatusPicker = useCallback(function (closingPayload) {
+    commitStatusPicker(closingPayload)(editorView);
+  }, [editorView]);
+  var onEnter = useCallback(function () {
+    commitStatusPicker()(editorView);
+  }, [editorView]);
+  if (typeof showStatusPickerAt !== 'number') {
+    return null;
+  }
+  if (!statusNode || statusNode.type.name !== 'status') {
+    return null;
+  }
+  var _statusNode$attrs = statusNode.attrs,
+    text = _statusNode$attrs.text,
+    color = _statusNode$attrs.color,
+    localId = _statusNode$attrs.localId;
+  return /*#__PURE__*/React.createElement(StatusPicker, {
+    isNew: statusState === null || statusState === void 0 ? void 0 : statusState.isNew,
+    focusStatusInput: statusState === null || statusState === void 0 ? void 0 : statusState.focusStatusInput,
+    target: target,
+    defaultText: text,
+    defaultColor: color,
+    defaultLocalId: localId,
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    onSelect: onSelect,
+    onTextChanged: onTextChanged,
+    closeStatusPicker: closeStatusPicker,
+    onEnter: onEnter
+  });
+}

package/dist/esm/ui/statusPicker.js

@@ -242,7 +242,7 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState, _snapshot) {
+    value: function componentDidUpdate(prevProps, prevState) {
       var element = this.props.target;
       if (prevProps.target !== element) {
         var newState = this.extractStateFromProps(this.props);

package/dist/types/plugin.d.ts

@@ -2,7 +2,7 @@ import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/t
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { UpdateStatus } from './actions';
 import { commitStatusPicker, removeStatus } from './actions';
-import type { StatusPluginOptions } from './types';
+import type { StatusPluginOptions, StatusState } from './types';
 export type StatusPlugin = NextEditorPlugin<'status', {
     dependencies: [OptionalPlugin<AnalyticsPlugin>];
     pluginConfiguration: StatusPluginOptions | undefined;
@@ -13,5 +13,6 @@ export type StatusPlugin = NextEditorPlugin<'status', {
     commands: {
         removeStatus: typeof removeStatus;
     };
+    sharedState: StatusState | undefined;
 }>;
 export declare const statusPlugin: StatusPlugin;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { DomAtPos } from '@atlaskit/editor-prosemirror/utils';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { StatusPlugin } from '../plugin';
+interface ContentComponentProps {
+    api: ExtractInjectionAPI<StatusPlugin> | undefined;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    editorView: EditorView;
+    domAtPos: DomAtPos;
+}
+export declare function ContentComponent({ api, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, editorView, domAtPos, }: ContentComponentProps): JSX.Element | null;
+export {};

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

@@ -46,7 +46,7 @@ export declare class StatusPickerWithoutAnalytcs extends React.Component<Props,
     private reset;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>, _snapshot?: any): void;
+    componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>): void;
     private extractStateFromProps;
     handleClickOutside: (event: Event) => void;
     private handleEscapeKeydown;

package/dist/types-ts4.5/plugin.d.ts

@@ -2,7 +2,7 @@ import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/t
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { UpdateStatus } from './actions';
 import { commitStatusPicker, removeStatus } from './actions';
-import type { StatusPluginOptions } from './types';
+import type { StatusPluginOptions, StatusState } from './types';
 export type StatusPlugin = NextEditorPlugin<'status', {
     dependencies: [
         OptionalPlugin<AnalyticsPlugin>
@@ -15,5 +15,6 @@ export type StatusPlugin = NextEditorPlugin<'status', {
     commands: {
         removeStatus: typeof removeStatus;
     };
+    sharedState: StatusState | undefined;
 }>;
 export declare const statusPlugin: StatusPlugin;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { DomAtPos } from '@atlaskit/editor-prosemirror/utils';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { StatusPlugin } from '../plugin';
+interface ContentComponentProps {
+    api: ExtractInjectionAPI<StatusPlugin> | undefined;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    editorView: EditorView;
+    domAtPos: DomAtPos;
+}
+export declare function ContentComponent({ api, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, editorView, domAtPos, }: ContentComponentProps): JSX.Element | null;
+export {};

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

@@ -46,7 +46,7 @@ export declare class StatusPickerWithoutAnalytcs extends React.Component<Props,
     private reset;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>, _snapshot?: any): void;
+    componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>): void;
     private extractStateFromProps;
     handleClickOutside: (event: Event) => void;
     private handleEscapeKeydown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-status",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "description": "Status plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -14,7 +14,7 @@
     "releaseModel": "continuous",
     "runReact18": false
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
@@ -35,13 +35,13 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.3.0",
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/editor-common": "^76.35.0",
+    "@atlaskit/editor-common": "^76.41.0",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/status": "^1.4.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.33.0",
+    "@atlaskit/tokens": "^1.34.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },