@atlaskit/editor-plugin-status 17.2.1 → 17.2.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-status
 
+## 17.2.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 17.2.2
+
+### Patch Changes
+
+- [`501b7257aaa6d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/501b7257aaa6d) -
+  Add a capped, scrollable status suggestion list with parent-constrained labels behind
+  platform_editor_status_popup_suggestions_patch_1.
+- Updated dependencies
+
 ## 17.2.1
 
 ### Patch Changes

package/dist/cjs/ui/ContentComponent.js

@@ -95,6 +95,7 @@ function ContentComponent(_ref) {
         text: text
       },
       doc: editorView.state.doc,
+      limit: (0, _fg.fg)('platform_editor_status_popup_suggestions_patch_1') ? _getSuggestedStatuses.MAX_SUGGESTED_STATUSES : _getSuggestedStatuses.MAX_SUGGESTED_STATUSES_OLD,
       shouldUppercaseText: (0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts')
     });
   }, [showStatusPickerAt, editorView.state.doc]);

package/dist/cjs/ui/getSuggestedStatuses.js

@@ -4,13 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSuggestedStatuses = exports.MAX_SUGGESTED_STATUSES = void 0;
+exports.getSuggestedStatuses = exports.MAX_SUGGESTED_STATUSES_OLD = exports.MAX_SUGGESTED_STATUSES = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _excluded = ["distance"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var MAX_SUGGESTED_STATUSES = exports.MAX_SUGGESTED_STATUSES = 7;
+var MAX_SUGGESTED_STATUSES = exports.MAX_SUGGESTED_STATUSES = 20;
+// Remove when cleaning up `platform_editor_status_popup_suggestions_patch_1`.
+var MAX_SUGGESTED_STATUSES_OLD = exports.MAX_SUGGESTED_STATUSES_OLD = 7;
 var getStatusKey = function getStatusKey(_ref) {
   var color = _ref.color,
     text = _ref.text;

package/dist/cjs/ui/statusPicker.js

@@ -78,21 +78,68 @@ var suggestedStatusesContainerStyles = (0, _react2.css)({
   margin: 0,
   padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-050, 4px)")
 });
+
+// Fixed input plus capped scrolling color controls and suggestions.
+var STATUS_PICKER_FIT_HEIGHT = 288;
+// Seven suggestions fit below the color palette before the content starts scrolling.
+var MAX_SUGGESTIONS_WITHOUT_SCROLLBAR = 7;
+var STATUS_PICKER_CONTENT_WIDTH = 208;
+var STATUS_PICKER_SCROLLBAR_WIDTH = 16;
+var statusPickerWidthStyles = (0, _react2.css)({
+  width: "".concat(STATUS_PICKER_CONTENT_WIDTH, "px")
+});
+var statusPickerWithScrollbarWidthStyles = (0, _react2.css)({
+  // Reserve space for the native scrollbar without reducing the picker content width.
+  width: "".concat(STATUS_PICKER_CONTENT_WIDTH + STATUS_PICKER_SCROLLBAR_WIDTH, "px")
+});
+
+// When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
+// `suggestedStatusesContainerStyles` and remove its conditional style array.
+var suggestedStatusesContainerPatchStyles = (0, _react2.css)({
+  gap: "var(--ds-space-050, 4px)",
+  paddingLeft: "var(--ds-space-100, 8px)"
+});
 var suggestedStatusButtonStyles = (0, _react2.css)({
   background: 'transparent',
   border: 0,
   borderRadius: "var(--ds-radius-small, 3px)",
   cursor: 'pointer',
-  display: 'flex',
   justifyContent: 'flex-start',
   padding: 0,
-  width: '100%',
   '&:focus-visible': {
     outline: "2px solid ".concat("var(--ds-border-focused, #0C66E4)"),
     outlineOffset: "var(--ds-space-025, 2px)"
   }
 });
 
+// Remove when cleaning up `platform_editor_status_popup_suggestions_patch_1`.
+var suggestedStatusButtonOldStyles = (0, _react2.css)({
+  display: 'flex',
+  width: '100%'
+});
+var suggestedStatusButtonWrapperStyles = (0, _react2.css)({
+  alignSelf: 'flex-start',
+  borderWidth: "var(--ds-border-width, 1px)",
+  borderStyle: 'solid',
+  borderColor: 'transparent',
+  borderRadius: "var(--ds-space-075, 6px)",
+  display: 'flex',
+  marginLeft: "var(--ds-space-025, 2px)",
+  maxWidth: '100%',
+  paddingBlock: "var(--ds-border-width, 1px)",
+  paddingInline: "var(--ds-border-width, 1px)",
+  '&:hover': {
+    borderColor: "var(--ds-border, #091E4224)"
+  }
+});
+
+// When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
+// `suggestedStatusButtonStyles` and remove its conditional style array.
+var suggestedStatusButtonPatchStyles = (0, _react2.css)({
+  // Allow this flex item to shrink so long statuses can truncate.
+  minWidth: 0
+});
+
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
   function StatusPickerWithIntl(props) {
@@ -393,7 +440,8 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderWithSetOutsideClickTargetRef",
     value: function renderWithSetOutsideClickTargetRef(setOutsideClickTargetRef) {
-      var _this3 = this;
+      var _this3 = this,
+        _suggestedStatuses$le;
       var _this$props = this.props,
         isNew = _this$props.isNew,
         focusStatusInput = _this$props.focusStatusInput,
@@ -402,32 +450,17 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
       var _this$state3 = this.state,
         color = _this$state3.color,
         text = _this$state3.text;
-      return (0, _react2.jsx)(_userIntent.UserIntentPopupWrapper, {
-        api: api,
-        userIntent: "statusPickerOpen"
-      }, (0, _react2.jsx)("div", {
-        css: (0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles,
-        role: "none",
-        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
-      }), suggestedStatuses !== null && suggestedStatuses !== void 0 && suggestedStatuses.length && (0, _expValEquals.expValEquals)('platform_editor_status_popup_suggestions', 'isEnabled', true) ? (0, _react2.jsx)("div", {
-        css: suggestedStatusesContainerStyles,
+      var suggestionsPatchEnabled = (0, _expValEquals.expValEquals)('platform_editor_status_popup_suggestions', 'isEnabled', true) && (0, _fg.fg)('platform_editor_status_popup_suggestions_patch_1');
+      var suggestedStatusList = suggestedStatuses !== null && suggestedStatuses !== void 0 && suggestedStatuses.length && (0, _expValEquals.expValEquals)('platform_editor_status_popup_suggestions', 'isEnabled', true) ? (0, _react2.jsx)("div", {
+        css: [suggestedStatusesContainerStyles, suggestionsPatchEnabled ? suggestedStatusesContainerPatchStyles : undefined],
         "data-suggested-status-list": true
       }, suggestedStatuses.map(function (suggestedStatus, index) {
         return (0, _react2.jsx)("div", {
+          css: suggestionsPatchEnabled ? suggestedStatusButtonWrapperStyles : undefined,
           key: "".concat(suggestedStatus.color, ":").concat(suggestedStatus.text)
         }, (0, _react2.jsx)("button", {
           type: "button",
-          css: suggestedStatusButtonStyles,
+          css: [suggestedStatusButtonStyles, suggestionsPatchEnabled ? suggestedStatusButtonPatchStyles : suggestedStatusButtonOldStyles],
           onClick: function onClick() {
             return _this3.onSuggestedStatusClick(suggestedStatus, index + 1);
           },
@@ -436,9 +469,30 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
           "data-suggested-status-button": true
         }, (0, _react2.jsx)(_element.Status, {
           color: suggestedStatus.color,
+          isConstrainedToParent: true,
           text: suggestedStatus.displayText
         })));
-      })) : null));
+      })) : null;
+      var pickerContent = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_picker.StatusPicker, {
+        autoFocus: isNew || focusStatusInput,
+        selectedColor: color,
+        text: text,
+        onColorClick: this.onColorClick,
+        onColorHover: this.onColorHover,
+        onTextChanged: this.onTextChanged,
+        onEnter: this.onEnter,
+        scrollableContent: suggestionsPatchEnabled ? suggestedStatusList : undefined
+      }), suggestionsPatchEnabled ? null : suggestedStatusList);
+      return (0, _react2.jsx)(_userIntent.UserIntentPopupWrapper, {
+        api: api,
+        userIntent: "statusPickerOpen"
+      }, (0, _react2.jsx)("div", {
+        css: [(0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles, suggestionsPatchEnabled ? statusPickerWidthStyles : undefined, suggestionsPatchEnabled && ((_suggestedStatuses$le = suggestedStatuses === null || suggestedStatuses === void 0 ? void 0 : suggestedStatuses.length) !== null && _suggestedStatuses$le !== void 0 ? _suggestedStatuses$le : 0) > MAX_SUGGESTIONS_WITHOUT_SCROLLBAR ? statusPickerWithScrollbarWidthStyles : undefined],
+        role: "none",
+        ref: this.setRef(setOutsideClickTargetRef),
+        onClick: this.handlePopupClick,
+        onKeyDown: this.onKeyDown
+      }, pickerContent));
     }
   }, {
     key: "render",
@@ -462,7 +516,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
         handleClickOutside: this.handleClickOutside,
         handleEscapeKeydown: this.handleEscapeKeydown,
         zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
-        fitHeight: 40,
+        fitHeight: (0, _expValEquals.expValEquals)('platform_editor_status_popup_suggestions', 'isEnabled', true) && (0, _fg.fg)('platform_editor_status_popup_suggestions_patch_1') ? STATUS_PICKER_FIT_HEIGHT : 40,
         mountTo: mountTo,
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,

package/dist/es2019/ui/ContentComponent.js

@@ -4,7 +4,7 @@ import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { commitStatusPicker, updateStatus } from '../pm-plugins/actions';
-import { getSuggestedStatuses } from './getSuggestedStatuses';
+import { getSuggestedStatuses, MAX_SUGGESTED_STATUSES, MAX_SUGGESTED_STATUSES_OLD } from './getSuggestedStatuses';
 import StatusPicker from './statusPicker';
 /** Renders the status picker popup for the currently selected status node. */
 export function ContentComponent({
@@ -83,6 +83,7 @@ export function ContentComponent({
         text
       },
       doc: editorView.state.doc,
+      limit: fg('platform_editor_status_popup_suggestions_patch_1') ? MAX_SUGGESTED_STATUSES : MAX_SUGGESTED_STATUSES_OLD,
       shouldUppercaseText: fg('platform-dst-lozenge-tag-badge-visual-uplifts')
     });
   }, [showStatusPickerAt, editorView.state.doc]);

package/dist/es2019/ui/getSuggestedStatuses.js

@@ -1,4 +1,6 @@
-export const MAX_SUGGESTED_STATUSES = 7;
+export const MAX_SUGGESTED_STATUSES = 20;
+// Remove when cleaning up `platform_editor_status_popup_suggestions_patch_1`.
+export const MAX_SUGGESTED_STATUSES_OLD = 7;
 const getStatusKey = ({
   color,
   text

package/dist/es2019/ui/statusPicker.js

@@ -68,21 +68,68 @@ const suggestedStatusesContainerStyles = css({
   margin: 0,
   padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-050, 4px)"}`
 });
+
+// Fixed input plus capped scrolling color controls and suggestions.
+const STATUS_PICKER_FIT_HEIGHT = 288;
+// Seven suggestions fit below the color palette before the content starts scrolling.
+const MAX_SUGGESTIONS_WITHOUT_SCROLLBAR = 7;
+const STATUS_PICKER_CONTENT_WIDTH = 208;
+const STATUS_PICKER_SCROLLBAR_WIDTH = 16;
+const statusPickerWidthStyles = css({
+  width: `${STATUS_PICKER_CONTENT_WIDTH}px`
+});
+const statusPickerWithScrollbarWidthStyles = css({
+  // Reserve space for the native scrollbar without reducing the picker content width.
+  width: `${STATUS_PICKER_CONTENT_WIDTH + STATUS_PICKER_SCROLLBAR_WIDTH}px`
+});
+
+// When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
+// `suggestedStatusesContainerStyles` and remove its conditional style array.
+const suggestedStatusesContainerPatchStyles = css({
+  gap: "var(--ds-space-050, 4px)",
+  paddingLeft: "var(--ds-space-100, 8px)"
+});
 const suggestedStatusButtonStyles = css({
   background: 'transparent',
   border: 0,
   borderRadius: "var(--ds-radius-small, 3px)",
   cursor: 'pointer',
-  display: 'flex',
   justifyContent: 'flex-start',
   padding: 0,
-  width: '100%',
   '&:focus-visible': {
     outline: `2px solid ${"var(--ds-border-focused, #0C66E4)"}`,
     outlineOffset: "var(--ds-space-025, 2px)"
   }
 });
 
+// Remove when cleaning up `platform_editor_status_popup_suggestions_patch_1`.
+const suggestedStatusButtonOldStyles = css({
+  display: 'flex',
+  width: '100%'
+});
+const suggestedStatusButtonWrapperStyles = css({
+  alignSelf: 'flex-start',
+  borderWidth: "var(--ds-border-width, 1px)",
+  borderStyle: 'solid',
+  borderColor: 'transparent',
+  borderRadius: "var(--ds-space-075, 6px)",
+  display: 'flex',
+  marginLeft: "var(--ds-space-025, 2px)",
+  maxWidth: '100%',
+  paddingBlock: "var(--ds-border-width, 1px)",
+  paddingInline: "var(--ds-border-width, 1px)",
+  '&:hover': {
+    borderColor: "var(--ds-border, #091E4224)"
+  }
+});
+
+// When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
+// `suggestedStatusButtonStyles` and remove its conditional style array.
+const suggestedStatusButtonPatchStyles = css({
+  // Allow this flex item to shrink so long statuses can truncate.
+  minWidth: 0
+});
+
 // eslint-disable-next-line @repo/internal/react/no-class-components
 class StatusPickerWithIntl extends React.Component {
   constructor(props) {
@@ -366,6 +413,7 @@ class StatusPickerWithIntl extends React.Component {
     };
   }
   renderWithSetOutsideClickTargetRef(setOutsideClickTargetRef) {
+    var _suggestedStatuses$le;
     const {
       isNew,
       focusStatusInput,
@@ -376,39 +424,45 @@ class StatusPickerWithIntl extends React.Component {
       color,
       text
     } = this.state;
-    return jsx(UserIntentPopupWrapper, {
-      api: api,
-      userIntent: "statusPickerOpen"
-    }, jsx("div", {
-      css: fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles,
-      role: "none",
-      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
-    }), suggestedStatuses !== null && suggestedStatuses !== void 0 && suggestedStatuses.length && expValEquals('platform_editor_status_popup_suggestions', 'isEnabled', true) ? jsx("div", {
-      css: suggestedStatusesContainerStyles,
+    const suggestionsPatchEnabled = expValEquals('platform_editor_status_popup_suggestions', 'isEnabled', true) && fg('platform_editor_status_popup_suggestions_patch_1');
+    const suggestedStatusList = suggestedStatuses !== null && suggestedStatuses !== void 0 && suggestedStatuses.length && expValEquals('platform_editor_status_popup_suggestions', 'isEnabled', true) ? jsx("div", {
+      css: [suggestedStatusesContainerStyles, suggestionsPatchEnabled ? suggestedStatusesContainerPatchStyles : undefined],
       "data-suggested-status-list": true
     }, suggestedStatuses.map((suggestedStatus, index) => jsx("div", {
+      css: suggestionsPatchEnabled ? suggestedStatusButtonWrapperStyles : undefined,
       key: `${suggestedStatus.color}:${suggestedStatus.text}`
     }, jsx("button", {
       type: "button",
-      css: suggestedStatusButtonStyles,
+      css: [suggestedStatusButtonStyles, suggestionsPatchEnabled ? suggestedStatusButtonPatchStyles : suggestedStatusButtonOldStyles],
       onClick: () => this.onSuggestedStatusClick(suggestedStatus, index + 1),
       onKeyDown: this.handleSuggestedStatusKeyDown,
       "aria-label": suggestedStatus.displayText,
       "data-suggested-status-button": true
     }, jsx(Status, {
       color: suggestedStatus.color,
+      isConstrainedToParent: true,
       text: suggestedStatus.displayText
-    }))))) : null));
+    }))))) : null;
+    const pickerContent = jsx(React.Fragment, null, jsx(AkStatusPicker, {
+      autoFocus: isNew || focusStatusInput,
+      selectedColor: color,
+      text: text,
+      onColorClick: this.onColorClick,
+      onColorHover: this.onColorHover,
+      onTextChanged: this.onTextChanged,
+      onEnter: this.onEnter,
+      scrollableContent: suggestionsPatchEnabled ? suggestedStatusList : undefined
+    }), suggestionsPatchEnabled ? null : suggestedStatusList);
+    return jsx(UserIntentPopupWrapper, {
+      api: api,
+      userIntent: "statusPickerOpen"
+    }, jsx("div", {
+      css: [fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles, suggestionsPatchEnabled ? statusPickerWidthStyles : undefined, suggestionsPatchEnabled && ((_suggestedStatuses$le = suggestedStatuses === null || suggestedStatuses === void 0 ? void 0 : suggestedStatuses.length) !== null && _suggestedStatuses$le !== void 0 ? _suggestedStatuses$le : 0) > MAX_SUGGESTIONS_WITHOUT_SCROLLBAR ? statusPickerWithScrollbarWidthStyles : undefined],
+      role: "none",
+      ref: this.setRef(setOutsideClickTargetRef),
+      onClick: this.handlePopupClick,
+      onKeyDown: this.onKeyDown
+    }, pickerContent));
   }
   render() {
     const {
@@ -431,7 +485,7 @@ class StatusPickerWithIntl extends React.Component {
       handleClickOutside: this.handleClickOutside,
       handleEscapeKeydown: this.handleEscapeKeydown,
       zIndex: akEditorFloatingDialogZIndex,
-      fitHeight: 40,
+      fitHeight: expValEquals('platform_editor_status_popup_suggestions', 'isEnabled', true) && fg('platform_editor_status_popup_suggestions_patch_1') ? STATUS_PICKER_FIT_HEIGHT : 40,
       mountTo: mountTo,
       boundariesElement: boundariesElement,
       scrollableElement: scrollableElement,

package/dist/esm/ui/ContentComponent.js

@@ -7,7 +7,7 @@ import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { commitStatusPicker, updateStatus } from '../pm-plugins/actions';
-import { getSuggestedStatuses } from './getSuggestedStatuses';
+import { getSuggestedStatuses, MAX_SUGGESTED_STATUSES, MAX_SUGGESTED_STATUSES_OLD } from './getSuggestedStatuses';
 import StatusPicker from './statusPicker';
 /** Renders the status picker popup for the currently selected status node. */
 export function ContentComponent(_ref) {
@@ -86,6 +86,7 @@ export function ContentComponent(_ref) {
         text: text
       },
       doc: editorView.state.doc,
+      limit: fg('platform_editor_status_popup_suggestions_patch_1') ? MAX_SUGGESTED_STATUSES : MAX_SUGGESTED_STATUSES_OLD,
       shouldUppercaseText: fg('platform-dst-lozenge-tag-badge-visual-uplifts')
     });
   }, [showStatusPickerAt, editorView.state.doc]);

package/dist/esm/ui/getSuggestedStatuses.js

@@ -3,7 +3,9 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["distance"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-export var MAX_SUGGESTED_STATUSES = 7;
+export var MAX_SUGGESTED_STATUSES = 20;
+// Remove when cleaning up `platform_editor_status_popup_suggestions_patch_1`.
+export var MAX_SUGGESTED_STATUSES_OLD = 7;
 var getStatusKey = function getStatusKey(_ref) {
   var color = _ref.color,
     text = _ref.text;

package/dist/esm/ui/statusPicker.js

@@ -75,21 +75,68 @@ var suggestedStatusesContainerStyles = css({
   margin: 0,
   padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-050, 4px)")
 });
+
+// Fixed input plus capped scrolling color controls and suggestions.
+var STATUS_PICKER_FIT_HEIGHT = 288;
+// Seven suggestions fit below the color palette before the content starts scrolling.
+var MAX_SUGGESTIONS_WITHOUT_SCROLLBAR = 7;
+var STATUS_PICKER_CONTENT_WIDTH = 208;
+var STATUS_PICKER_SCROLLBAR_WIDTH = 16;
+var statusPickerWidthStyles = css({
+  width: "".concat(STATUS_PICKER_CONTENT_WIDTH, "px")
+});
+var statusPickerWithScrollbarWidthStyles = css({
+  // Reserve space for the native scrollbar without reducing the picker content width.
+  width: "".concat(STATUS_PICKER_CONTENT_WIDTH + STATUS_PICKER_SCROLLBAR_WIDTH, "px")
+});
+
+// When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
+// `suggestedStatusesContainerStyles` and remove its conditional style array.
+var suggestedStatusesContainerPatchStyles = css({
+  gap: "var(--ds-space-050, 4px)",
+  paddingLeft: "var(--ds-space-100, 8px)"
+});
 var suggestedStatusButtonStyles = css({
   background: 'transparent',
   border: 0,
   borderRadius: "var(--ds-radius-small, 3px)",
   cursor: 'pointer',
-  display: 'flex',
   justifyContent: 'flex-start',
   padding: 0,
-  width: '100%',
   '&:focus-visible': {
     outline: "2px solid ".concat("var(--ds-border-focused, #0C66E4)"),
     outlineOffset: "var(--ds-space-025, 2px)"
   }
 });
 
+// Remove when cleaning up `platform_editor_status_popup_suggestions_patch_1`.
+var suggestedStatusButtonOldStyles = css({
+  display: 'flex',
+  width: '100%'
+});
+var suggestedStatusButtonWrapperStyles = css({
+  alignSelf: 'flex-start',
+  borderWidth: "var(--ds-border-width, 1px)",
+  borderStyle: 'solid',
+  borderColor: 'transparent',
+  borderRadius: "var(--ds-space-075, 6px)",
+  display: 'flex',
+  marginLeft: "var(--ds-space-025, 2px)",
+  maxWidth: '100%',
+  paddingBlock: "var(--ds-border-width, 1px)",
+  paddingInline: "var(--ds-border-width, 1px)",
+  '&:hover': {
+    borderColor: "var(--ds-border, #091E4224)"
+  }
+});
+
+// When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
+// `suggestedStatusButtonStyles` and remove its conditional style array.
+var suggestedStatusButtonPatchStyles = css({
+  // Allow this flex item to shrink so long statuses can truncate.
+  minWidth: 0
+});
+
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
   function StatusPickerWithIntl(props) {
@@ -390,7 +437,8 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderWithSetOutsideClickTargetRef",
     value: function renderWithSetOutsideClickTargetRef(setOutsideClickTargetRef) {
-      var _this3 = this;
+      var _this3 = this,
+        _suggestedStatuses$le;
       var _this$props = this.props,
         isNew = _this$props.isNew,
         focusStatusInput = _this$props.focusStatusInput,
@@ -399,32 +447,17 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
       var _this$state3 = this.state,
         color = _this$state3.color,
         text = _this$state3.text;
-      return jsx(UserIntentPopupWrapper, {
-        api: api,
-        userIntent: "statusPickerOpen"
-      }, jsx("div", {
-        css: fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles,
-        role: "none",
-        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
-      }), suggestedStatuses !== null && suggestedStatuses !== void 0 && suggestedStatuses.length && expValEquals('platform_editor_status_popup_suggestions', 'isEnabled', true) ? jsx("div", {
-        css: suggestedStatusesContainerStyles,
+      var suggestionsPatchEnabled = expValEquals('platform_editor_status_popup_suggestions', 'isEnabled', true) && fg('platform_editor_status_popup_suggestions_patch_1');
+      var suggestedStatusList = suggestedStatuses !== null && suggestedStatuses !== void 0 && suggestedStatuses.length && expValEquals('platform_editor_status_popup_suggestions', 'isEnabled', true) ? jsx("div", {
+        css: [suggestedStatusesContainerStyles, suggestionsPatchEnabled ? suggestedStatusesContainerPatchStyles : undefined],
         "data-suggested-status-list": true
       }, suggestedStatuses.map(function (suggestedStatus, index) {
         return jsx("div", {
+          css: suggestionsPatchEnabled ? suggestedStatusButtonWrapperStyles : undefined,
           key: "".concat(suggestedStatus.color, ":").concat(suggestedStatus.text)
         }, jsx("button", {
           type: "button",
-          css: suggestedStatusButtonStyles,
+          css: [suggestedStatusButtonStyles, suggestionsPatchEnabled ? suggestedStatusButtonPatchStyles : suggestedStatusButtonOldStyles],
           onClick: function onClick() {
             return _this3.onSuggestedStatusClick(suggestedStatus, index + 1);
           },
@@ -433,9 +466,30 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
           "data-suggested-status-button": true
         }, jsx(Status, {
           color: suggestedStatus.color,
+          isConstrainedToParent: true,
           text: suggestedStatus.displayText
         })));
-      })) : null));
+      })) : null;
+      var pickerContent = jsx(React.Fragment, null, jsx(AkStatusPicker, {
+        autoFocus: isNew || focusStatusInput,
+        selectedColor: color,
+        text: text,
+        onColorClick: this.onColorClick,
+        onColorHover: this.onColorHover,
+        onTextChanged: this.onTextChanged,
+        onEnter: this.onEnter,
+        scrollableContent: suggestionsPatchEnabled ? suggestedStatusList : undefined
+      }), suggestionsPatchEnabled ? null : suggestedStatusList);
+      return jsx(UserIntentPopupWrapper, {
+        api: api,
+        userIntent: "statusPickerOpen"
+      }, jsx("div", {
+        css: [fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles, suggestionsPatchEnabled ? statusPickerWidthStyles : undefined, suggestionsPatchEnabled && ((_suggestedStatuses$le = suggestedStatuses === null || suggestedStatuses === void 0 ? void 0 : suggestedStatuses.length) !== null && _suggestedStatuses$le !== void 0 ? _suggestedStatuses$le : 0) > MAX_SUGGESTIONS_WITHOUT_SCROLLBAR ? statusPickerWithScrollbarWidthStyles : undefined],
+        role: "none",
+        ref: this.setRef(setOutsideClickTargetRef),
+        onClick: this.handlePopupClick,
+        onKeyDown: this.onKeyDown
+      }, pickerContent));
     }
   }, {
     key: "render",
@@ -459,7 +513,7 @@ var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
         handleClickOutside: this.handleClickOutside,
         handleEscapeKeydown: this.handleEscapeKeydown,
         zIndex: akEditorFloatingDialogZIndex,
-        fitHeight: 40,
+        fitHeight: expValEquals('platform_editor_status_popup_suggestions', 'isEnabled', true) && fg('platform_editor_status_popup_suggestions_patch_1') ? STATUS_PICKER_FIT_HEIGHT : 40,
         mountTo: mountTo,
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,

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

@@ -10,6 +10,7 @@ type GetSuggestedStatusesArgs = {
     limit?: number;
     shouldUppercaseText?: boolean;
 };
-export declare const MAX_SUGGESTED_STATUSES = 7;
+export declare const MAX_SUGGESTED_STATUSES = 20;
+export declare const MAX_SUGGESTED_STATUSES_OLD = 7;
 export declare const getSuggestedStatuses: ({ currentPos, currentStatus, doc, limit, shouldUppercaseText, }: GetSuggestedStatusesArgs) => SuggestedStatus[];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-status",
-	"version": "17.2.1",
+	"version": "17.2.3",
 	"description": "Status plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,8 +34,8 @@
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/status": "^5.9.0",
-		"@atlaskit/tmp-editor-statsig": "^169.0.0",
-		"@atlaskit/tokens": "^16.10.0",
+		"@atlaskit/tmp-editor-statsig": "^171.0.0",
+		"@atlaskit/tokens": "^16.11.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
@@ -98,6 +98,9 @@
 		},
 		"platform-dst-lozenge-tag-badge-visual-uplifts": {
 			"type": "boolean"
+		},
+		"platform_editor_status_popup_suggestions_patch_1": {
+			"type": "boolean"
 		}
 	}
 }