@atlaskit/editor-plugin-status 7.1.3 → 7.1.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-status
 
+## 7.1.4
+
+### Patch Changes
+
+- [`e727490d9f62f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e727490d9f62f) -
+  [ux] EDITOR-2572 Hide floating toolbar when status picker is open
+- Updated dependencies
+
 ## 7.1.3
 
 ### Patch Changes

package/dist/cjs/ui/ContentComponent.js

@@ -69,6 +69,7 @@ function ContentComponent(_ref) {
     onTextChanged: onTextChanged,
     closeStatusPicker: closeStatusPicker,
     onEnter: onEnter,
-    editorView: editorView
+    editorView: editorView,
+    api: api
   });
 }

package/dist/cjs/ui/statusPicker.js

@@ -18,10 +18,12 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _userIntent = require("@atlaskit/editor-common/user-intent");
 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 _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _actions = require("../pm-plugins/actions");
 var _analytics = require("./analytics");
@@ -289,30 +291,41 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderWithSetOutsideClickTargetRef",
     value: function renderWithSetOutsideClickTargetRef(setOutsideClickTargetRef) {
+      var _this3 = this;
       var _this$props = this.props,
         isNew = _this$props.isNew,
-        focusStatusInput = _this$props.focusStatusInput;
+        focusStatusInput = _this$props.focusStatusInput,
+        api = _this$props.api;
       var _this$state3 = this.state,
         color = _this$state3.color,
         text = _this$state3.text;
-      return (
-        // eslint-disable-next-line @atlassian/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, {
-          autoFocus: isNew || focusStatusInput,
-          selectedColor: color,
-          text: text,
-          onColorClick: this.onColorClick,
-          onColorHover: this.onColorHover,
-          onTextChanged: this.onTextChanged,
-          onEnter: this.onEnter
-        }))
-      );
+      var renderPicker = function renderPicker() {
+        return (
+          // eslint-disable-next-line @atlassian/a11y/no-static-element-interactions
+          (0, _react2.jsx)("div", {
+            css: pickerContainerStyles,
+            tabIndex: -1,
+            ref: _this3.setRef(setOutsideClickTargetRef),
+            onClick: _this3.handlePopupClick,
+            onKeyDown: _this3.onKeyDown
+          }, (0, _react2.jsx)(_picker.StatusPicker, {
+            autoFocus: isNew || focusStatusInput,
+            selectedColor: color,
+            text: text,
+            onColorClick: _this3.onColorClick,
+            onColorHover: _this3.onColorHover,
+            onTextChanged: _this3.onTextChanged,
+            onEnter: _this3.onEnter
+          }))
+        );
+      };
+      if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_user_intent', 'isEnabled', true)) {
+        return (0, _react2.jsx)(_userIntent.UserIntentPopupWrapper, {
+          api: api,
+          userIntent: "statusPickerOpen"
+        }, renderPicker());
+      }
+      return renderPicker();
     }
   }, {
     key: "render",

package/dist/es2019/ui/ContentComponent.js

@@ -59,6 +59,7 @@ export function ContentComponent({
     onTextChanged: onTextChanged,
     closeStatusPicker: closeStatusPicker,
     onEnter: onEnter,
-    editorView: editorView
+    editorView: editorView,
+    api: api
   });
 }

package/dist/es2019/ui/statusPicker.js

@@ -13,10 +13,12 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { statusMessages as messages } from '@atlaskit/editor-common/messages';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
 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 { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { DEFAULT_STATUS } from '../pm-plugins/actions';
 import { analyticsState, createStatusAnalyticsAndFire } from './analytics';
@@ -264,30 +266,37 @@ class StatusPickerWithIntl extends React.Component {
   renderWithSetOutsideClickTargetRef(setOutsideClickTargetRef) {
     const {
       isNew,
-      focusStatusInput
+      focusStatusInput,
+      api
     } = this.props;
     const {
       color,
       text
     } = this.state;
-    return (
-      // eslint-disable-next-line @atlassian/a11y/no-static-element-interactions
-      jsx("div", {
-        css: pickerContainerStyles,
-        tabIndex: -1,
-        ref: this.setRef(setOutsideClickTargetRef),
-        onClick: this.handlePopupClick,
-        onKeyDown: this.onKeyDown
-      }, jsx(AkStatusPicker, {
-        autoFocus: isNew || focusStatusInput,
-        selectedColor: color,
-        text: text,
-        onColorClick: this.onColorClick,
-        onColorHover: this.onColorHover,
-        onTextChanged: this.onTextChanged,
-        onEnter: this.onEnter
-      }))
-    );
+    const renderPicker = () =>
+    // eslint-disable-next-line @atlassian/a11y/no-static-element-interactions
+    jsx("div", {
+      css: pickerContainerStyles,
+      tabIndex: -1,
+      ref: this.setRef(setOutsideClickTargetRef),
+      onClick: this.handlePopupClick,
+      onKeyDown: this.onKeyDown
+    }, jsx(AkStatusPicker, {
+      autoFocus: isNew || focusStatusInput,
+      selectedColor: color,
+      text: text,
+      onColorClick: this.onColorClick,
+      onColorHover: this.onColorHover,
+      onTextChanged: this.onTextChanged,
+      onEnter: this.onEnter
+    }));
+    if (expValEqualsNoExposure('platform_editor_lovability_user_intent', 'isEnabled', true)) {
+      return jsx(UserIntentPopupWrapper, {
+        api: api,
+        userIntent: "statusPickerOpen"
+      }, renderPicker());
+    }
+    return renderPicker();
   }
   render() {
     const {

package/dist/esm/ui/ContentComponent.js

@@ -60,6 +60,7 @@ export function ContentComponent(_ref) {
     onTextChanged: onTextChanged,
     closeStatusPicker: closeStatusPicker,
     onEnter: onEnter,
-    editorView: editorView
+    editorView: editorView,
+    api: api
   });
 }

package/dist/esm/ui/statusPicker.js

@@ -20,10 +20,12 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { statusMessages as messages } from '@atlaskit/editor-common/messages';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
 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 { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { DEFAULT_STATUS } from '../pm-plugins/actions';
 import { analyticsState, createStatusAnalyticsAndFire } from './analytics';
@@ -286,30 +288,41 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderWithSetOutsideClickTargetRef",
     value: function renderWithSetOutsideClickTargetRef(setOutsideClickTargetRef) {
+      var _this3 = this;
       var _this$props = this.props,
         isNew = _this$props.isNew,
-        focusStatusInput = _this$props.focusStatusInput;
+        focusStatusInput = _this$props.focusStatusInput,
+        api = _this$props.api;
       var _this$state3 = this.state,
         color = _this$state3.color,
         text = _this$state3.text;
-      return (
-        // eslint-disable-next-line @atlassian/a11y/no-static-element-interactions
-        jsx("div", {
-          css: pickerContainerStyles,
-          tabIndex: -1,
-          ref: this.setRef(setOutsideClickTargetRef),
-          onClick: this.handlePopupClick,
-          onKeyDown: this.onKeyDown
-        }, jsx(AkStatusPicker, {
-          autoFocus: isNew || focusStatusInput,
-          selectedColor: color,
-          text: text,
-          onColorClick: this.onColorClick,
-          onColorHover: this.onColorHover,
-          onTextChanged: this.onTextChanged,
-          onEnter: this.onEnter
-        }))
-      );
+      var renderPicker = function renderPicker() {
+        return (
+          // eslint-disable-next-line @atlassian/a11y/no-static-element-interactions
+          jsx("div", {
+            css: pickerContainerStyles,
+            tabIndex: -1,
+            ref: _this3.setRef(setOutsideClickTargetRef),
+            onClick: _this3.handlePopupClick,
+            onKeyDown: _this3.onKeyDown
+          }, jsx(AkStatusPicker, {
+            autoFocus: isNew || focusStatusInput,
+            selectedColor: color,
+            text: text,
+            onColorClick: _this3.onColorClick,
+            onColorHover: _this3.onColorHover,
+            onTextChanged: _this3.onTextChanged,
+            onEnter: _this3.onEnter
+          }))
+        );
+      };
+      if (expValEqualsNoExposure('platform_editor_lovability_user_intent', 'isEnabled', true)) {
+        return jsx(UserIntentPopupWrapper, {
+          api: api,
+          userIntent: "statusPickerOpen"
+        }, renderPicker());
+      }
+      return renderPicker();
     }
   }, {
     key: "render",

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import { type WrappedComponentProps } from 'react-intl-next';
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ColorType as Color } from '@atlaskit/status/picker';
+import type { StatusPlugin } from '../statusPluginType';
 import type { ClosingPayload, StatusType } from '../types';
 export declare enum InputMethod {
     blur = "blur",
@@ -14,6 +16,7 @@ export declare enum closingMethods {
     ArrowRight = "arrowRight"
 }
 export interface Props {
+    api?: ExtractInjectionAPI<StatusPlugin>;
     boundariesElement?: HTMLElement;
     closeStatusPicker: (closingPayload?: ClosingPayload) => void;
     createAnalyticsEvent?: CreateUIAnalyticsEvent;

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import { type WrappedComponentProps } from 'react-intl-next';
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ColorType as Color } from '@atlaskit/status/picker';
+import type { StatusPlugin } from '../statusPluginType';
 import type { ClosingPayload, StatusType } from '../types';
 export declare enum InputMethod {
     blur = "blur",
@@ -14,6 +16,7 @@ export declare enum closingMethods {
     ArrowRight = "arrowRight"
 }
 export interface Props {
+    api?: ExtractInjectionAPI<StatusPlugin>;
     boundariesElement?: HTMLElement;
     closeStatusPicker: (closingPayload?: ClosingPayload) => void;
     createAnalyticsEvent?: CreateUIAnalyticsEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-status",
-	"version": "7.1.3",
+	"version": "7.1.4",
 	"description": "Status plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,14 +38,14 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.18.0",
+		"@atlaskit/tmp-editor-statsig": "^13.22.0",
 		"@atlaskit/tokens": "^7.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.18.0",
+		"@atlaskit/editor-common": "^110.19.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"