@atlaskit/editor-plugin-insert-block 2.2.1 → 2.2.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 2.2.3
+
+### Patch Changes
+
+- [#146643](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/146643)
+  [`6b3dec2ad5378`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6b3dec2ad5378) -
+  [ux] ED-25116 Pin media popup to toolbar when triggered from toolbar
+- Updated dependencies
+
+## 2.2.2
+
+### Patch Changes
+
+- [#146455](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/146455)
+  [`b692485729f1c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b692485729f1c) -
+  improve comment editor toolbar responsiveness
+- Updated dependencies
+
 ## 2.2.1
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -27,6 +27,7 @@ var _transformOptions = require("./ui/transformOptions");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize, appearance) {
+  // Different button numbers for full-page to better match full page toolbar breakpoints
   if (appearance === 'full-page' && (0, _platformFeatureFlags.fg)('platform_editor_toolbar_responsive_fixes')) {
     switch (toolbarSize) {
       case _types.ToolbarSize.XXL:
@@ -38,16 +39,31 @@ var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize, appearance
         return 0;
     }
   }
-  switch (toolbarSize) {
-    case _types.ToolbarSize.XXL:
-    case _types.ToolbarSize.XL:
-    case _types.ToolbarSize.L:
-    case _types.ToolbarSize.M:
-      return 7;
-    case _types.ToolbarSize.S:
-      return 2;
-    default:
-      return 0;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_toolbar_responsive_fixes')) {
+    switch (toolbarSize) {
+      case _types.ToolbarSize.XXL:
+        return 7;
+      case _types.ToolbarSize.XL:
+        return 5;
+      case _types.ToolbarSize.L:
+      case _types.ToolbarSize.M:
+      case _types.ToolbarSize.S:
+        return 2;
+      default:
+        return 0;
+    }
+  } else {
+    switch (toolbarSize) {
+      case _types.ToolbarSize.XXL:
+      case _types.ToolbarSize.XL:
+      case _types.ToolbarSize.L:
+      case _types.ToolbarSize.M:
+        return 7;
+      case _types.ToolbarSize.S:
+        return 2;
+      default:
+        return 0;
+    }
   }
 };
 /**
@@ -324,13 +340,13 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     }
   };
   var emojiProvider = getEmojiProvider();
-  var onShowMediaPicker = function onShowMediaPicker() {
+  var onShowMediaPicker = function onShowMediaPicker(targetRef) {
     if (!mediaState) {
       return;
     }
     if ((0, _experiments.editorExperiment)('add-media-from-url', true)) {
       var _pluginInjectionApi$c, _pluginInjectionApi$m;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.commands.showMediaInsertPopup);
+      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.commands.showMediaInsertPopup(targetRef));
     } else {
       mediaState.showMediaPicker();
     }

package/dist/cjs/ui/ToolbarInsertBlock/index.js

@@ -54,7 +54,6 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var isDetachedElement = function isDetachedElement(el) {
   return !document.body.contains(el);
 };
-var noop = function noop() {};
 var EmojiPickerWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_picker.EmojiPicker);
 var TABLE_SELECTOR_STRING = 'table selector';
 
@@ -167,10 +166,20 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         _this.toggleEmojiPicker(_analytics.INPUT_METHOD.TOOLBAR);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleEmojiButtonRef", function (ref) {
-      if (ref) {
-        _this.emojiButtonRef = ref;
-      }
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleToolbarRef", function (buttonName) {
+      return function (ref) {
+        if (!ref) {
+          return;
+        }
+        switch (buttonName) {
+          case 'emoji':
+            _this.emojiButtonRef = ref;
+            break;
+          case 'media':
+            _this.mediaButtonRef = ref;
+            break;
+        }
+      };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handlePlusButtonRef", function (ref) {
       if (ref) {
@@ -363,7 +372,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         onShowMediaPicker = _this$props5.onShowMediaPicker,
         dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent;
       if (onShowMediaPicker) {
-        onShowMediaPicker();
+        onShowMediaPicker(_this.mediaButtonRef);
         if (dispatchAnalyticsEvent) {
           dispatchAnalyticsEvent({
             action: _analytics.ACTION.OPENED,
@@ -712,7 +721,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           return (0, _react2.jsx)(_uiMenu.ToolbarButton, {
             item: btn,
             testId: String(btn.content),
-            ref: btn.value.name === 'emoji' ? _this4.handleEmojiButtonRef : noop,
+            ref: _this4.handleToolbarRef(btn.value.name),
             key: btn.value.name,
             spacing: isReducedSpacing ? 'none' : 'default',
             disabled: isDisabled || btn.isDisabled,

package/dist/es2019/plugin.js

@@ -17,6 +17,7 @@ import { templateOptions } from './ui/templateOptions';
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
 import { transformationOptions } from './ui/transformOptions';
 const toolbarSizeToButtons = (toolbarSize, appearance) => {
+  // Different button numbers for full-page to better match full page toolbar breakpoints
   if (appearance === 'full-page' && fg('platform_editor_toolbar_responsive_fixes')) {
     switch (toolbarSize) {
       case ToolbarSize.XXL:
@@ -28,16 +29,31 @@ const toolbarSizeToButtons = (toolbarSize, appearance) => {
         return 0;
     }
   }
-  switch (toolbarSize) {
-    case ToolbarSize.XXL:
-    case ToolbarSize.XL:
-    case ToolbarSize.L:
-    case ToolbarSize.M:
-      return 7;
-    case ToolbarSize.S:
-      return 2;
-    default:
-      return 0;
+  if (fg('platform_editor_toolbar_responsive_fixes')) {
+    switch (toolbarSize) {
+      case ToolbarSize.XXL:
+        return 7;
+      case ToolbarSize.XL:
+        return 5;
+      case ToolbarSize.L:
+      case ToolbarSize.M:
+      case ToolbarSize.S:
+        return 2;
+      default:
+        return 0;
+    }
+  } else {
+    switch (toolbarSize) {
+      case ToolbarSize.XXL:
+      case ToolbarSize.XL:
+      case ToolbarSize.L:
+      case ToolbarSize.M:
+        return 7;
+      case ToolbarSize.S:
+        return 2;
+      default:
+        return 0;
+    }
   }
 };
 /**
@@ -319,13 +335,13 @@ function ToolbarInsertBlockWithInjectionApi({
     }
   };
   const emojiProvider = getEmojiProvider();
-  const onShowMediaPicker = () => {
+  const onShowMediaPicker = targetRef => {
     if (!mediaState) {
       return;
     }
     if (editorExperiment('add-media-from-url', true)) {
       var _pluginInjectionApi$c, _pluginInjectionApi$m;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.commands.showMediaInsertPopup);
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.commands.showMediaInsertPopup(targetRef));
     } else {
       mediaState.showMediaPicker();
     }

package/dist/es2019/ui/ToolbarInsertBlock/index.js

@@ -27,7 +27,6 @@ import TableSelectorPopup from './table-selector-popup-with-listeners';
  * Checks if an element is detached (i.e. not in the current document)
  */
 const isDetachedElement = el => !document.body.contains(el);
-const noop = () => {};
 const EmojiPickerWithListeners = withOuterListeners(AkEmojiPicker);
 const TABLE_SELECTOR_STRING = 'table selector';
 
@@ -168,9 +167,17 @@ export class ToolbarInsertBlock extends React.PureComponent {
         this.toggleEmojiPicker(INPUT_METHOD.TOOLBAR);
       }
     });
-    _defineProperty(this, "handleEmojiButtonRef", ref => {
-      if (ref) {
-        this.emojiButtonRef = ref;
+    _defineProperty(this, "handleToolbarRef", buttonName => ref => {
+      if (!ref) {
+        return;
+      }
+      switch (buttonName) {
+        case 'emoji':
+          this.emojiButtonRef = ref;
+          break;
+        case 'media':
+          this.mediaButtonRef = ref;
+          break;
       }
     });
     _defineProperty(this, "handlePlusButtonRef", ref => {
@@ -379,7 +386,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
         dispatchAnalyticsEvent
       } = this.props;
       if (onShowMediaPicker) {
-        onShowMediaPicker();
+        onShowMediaPicker(this.mediaButtonRef);
         if (dispatchAnalyticsEvent) {
           dispatchAnalyticsEvent({
             action: ACTION.OPENED,
@@ -746,7 +753,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
         return jsx(ToolbarButton, {
           item: btn,
           testId: String(btn.content),
-          ref: btn.value.name === 'emoji' ? this.handleEmojiButtonRef : noop,
+          ref: this.handleToolbarRef(btn.value.name),
           key: btn.value.name,
           spacing: isReducedSpacing ? 'none' : 'default',
           disabled: isDisabled || btn.isDisabled,

package/dist/esm/plugin.js

@@ -17,6 +17,7 @@ import { templateOptions } from './ui/templateOptions';
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
 import { transformationOptions } from './ui/transformOptions';
 var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize, appearance) {
+  // Different button numbers for full-page to better match full page toolbar breakpoints
   if (appearance === 'full-page' && fg('platform_editor_toolbar_responsive_fixes')) {
     switch (toolbarSize) {
       case ToolbarSize.XXL:
@@ -28,16 +29,31 @@ var toolbarSizeToButtons = function toolbarSizeToButtons(toolbarSize, appearance
         return 0;
     }
   }
-  switch (toolbarSize) {
-    case ToolbarSize.XXL:
-    case ToolbarSize.XL:
-    case ToolbarSize.L:
-    case ToolbarSize.M:
-      return 7;
-    case ToolbarSize.S:
-      return 2;
-    default:
-      return 0;
+  if (fg('platform_editor_toolbar_responsive_fixes')) {
+    switch (toolbarSize) {
+      case ToolbarSize.XXL:
+        return 7;
+      case ToolbarSize.XL:
+        return 5;
+      case ToolbarSize.L:
+      case ToolbarSize.M:
+      case ToolbarSize.S:
+        return 2;
+      default:
+        return 0;
+    }
+  } else {
+    switch (toolbarSize) {
+      case ToolbarSize.XXL:
+      case ToolbarSize.XL:
+      case ToolbarSize.L:
+      case ToolbarSize.M:
+        return 7;
+      case ToolbarSize.S:
+        return 2;
+      default:
+        return 0;
+    }
   }
 };
 /**
@@ -314,13 +330,13 @@ function ToolbarInsertBlockWithInjectionApi(_ref3) {
     }
   };
   var emojiProvider = getEmojiProvider();
-  var onShowMediaPicker = function onShowMediaPicker() {
+  var onShowMediaPicker = function onShowMediaPicker(targetRef) {
     if (!mediaState) {
       return;
     }
     if (editorExperiment('add-media-from-url', true)) {
       var _pluginInjectionApi$c, _pluginInjectionApi$m;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.commands.showMediaInsertPopup);
+      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 || _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.commands.showMediaInsertPopup(targetRef));
     } else {
       mediaState.showMediaPicker();
     }

package/dist/esm/ui/ToolbarInsertBlock/index.js

@@ -45,7 +45,6 @@ import TableSelectorPopup from './table-selector-popup-with-listeners';
 var isDetachedElement = function isDetachedElement(el) {
   return !document.body.contains(el);
 };
-var noop = function noop() {};
 var EmojiPickerWithListeners = withOuterListeners(AkEmojiPicker);
 var TABLE_SELECTOR_STRING = 'table selector';
 
@@ -158,10 +157,20 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         _this.toggleEmojiPicker(INPUT_METHOD.TOOLBAR);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "handleEmojiButtonRef", function (ref) {
-      if (ref) {
-        _this.emojiButtonRef = ref;
-      }
+    _defineProperty(_assertThisInitialized(_this), "handleToolbarRef", function (buttonName) {
+      return function (ref) {
+        if (!ref) {
+          return;
+        }
+        switch (buttonName) {
+          case 'emoji':
+            _this.emojiButtonRef = ref;
+            break;
+          case 'media':
+            _this.mediaButtonRef = ref;
+            break;
+        }
+      };
     });
     _defineProperty(_assertThisInitialized(_this), "handlePlusButtonRef", function (ref) {
       if (ref) {
@@ -354,7 +363,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         onShowMediaPicker = _this$props5.onShowMediaPicker,
         dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent;
       if (onShowMediaPicker) {
-        onShowMediaPicker();
+        onShowMediaPicker(_this.mediaButtonRef);
         if (dispatchAnalyticsEvent) {
           dispatchAnalyticsEvent({
             action: ACTION.OPENED,
@@ -703,7 +712,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
           return jsx(ToolbarButton, {
             item: btn,
             testId: String(btn.content),
-            ref: btn.value.name === 'emoji' ? _this4.handleEmojiButtonRef : noop,
+            ref: _this4.handleToolbarRef(btn.value.name),
             key: btn.value.name,
             spacing: isReducedSpacing ? 'none' : 'default',
             disabled: isDisabled || btn.isDisabled,

package/dist/types/ui/ToolbarInsertBlock/index.d.ts

@@ -16,6 +16,7 @@ type InternalActions = {
 export declare class ToolbarInsertBlock extends React.PureComponent<Props & WrappedComponentProps & InternalActions, State> {
     private dropdownButtonRef?;
     private emojiButtonRef?;
+    private mediaButtonRef?;
     private plusButtonRef?;
     private tableButtonRef;
     private tableSelectorButtonRef;
@@ -29,7 +30,7 @@ export declare class ToolbarInsertBlock extends React.PureComponent<Props & Wrap
     private handleEmojiPressEscape;
     private handleEmojiClickOutside;
     private renderPopup;
-    private handleEmojiButtonRef;
+    private handleToolbarRef;
     private handlePlusButtonRef;
     private handleDropDownButtonRef;
     private toggleTableSelector;

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

@@ -42,7 +42,7 @@ export interface Props {
     insertMenuItems?: MenuItem[];
     showElementBrowserLink?: boolean;
     showSeparator?: boolean;
-    onShowMediaPicker?: () => void;
+    onShowMediaPicker?: (ref?: HTMLElement) => void;
     onInsertBlockType?: (name: string) => Command;
     onInsertMacroFromMacroBrowser?: (macroProvider: MacroProvider, node?: PMNode, isEditing?: boolean) => (view: EditorView) => void;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;

package/dist/types-ts4.5/ui/ToolbarInsertBlock/index.d.ts

@@ -16,6 +16,7 @@ type InternalActions = {
 export declare class ToolbarInsertBlock extends React.PureComponent<Props & WrappedComponentProps & InternalActions, State> {
     private dropdownButtonRef?;
     private emojiButtonRef?;
+    private mediaButtonRef?;
     private plusButtonRef?;
     private tableButtonRef;
     private tableSelectorButtonRef;
@@ -29,7 +30,7 @@ export declare class ToolbarInsertBlock extends React.PureComponent<Props & Wrap
     private handleEmojiPressEscape;
     private handleEmojiClickOutside;
     private renderPopup;
-    private handleEmojiButtonRef;
+    private handleToolbarRef;
     private handlePlusButtonRef;
     private handleDropDownButtonRef;
     private toggleTableSelector;

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

@@ -42,7 +42,7 @@ export interface Props {
     insertMenuItems?: MenuItem[];
     showElementBrowserLink?: boolean;
     showSeparator?: boolean;
-    onShowMediaPicker?: () => void;
+    onShowMediaPicker?: (ref?: HTMLElement) => void;
     onInsertBlockType?: (name: string) => Command;
     onInsertMacroFromMacroBrowser?: (macroProvider: MacroProvider, node?: PMNode, isEditing?: boolean) => (view: EditorView) => void;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "2.2.1",
+	"version": "2.2.3",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,20 +32,20 @@
 	},
 	"dependencies": {
 		"@atlaskit/button": "^20.2.0",
-		"@atlaskit/editor-common": "^91.1.0",
+		"@atlaskit/editor-common": "^91.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-block-type": "^3.15.0",
-		"@atlaskit/editor-plugin-code-block": "^3.3.0",
+		"@atlaskit/editor-plugin-code-block": "^3.4.0",
 		"@atlaskit/editor-plugin-date": "^2.3.0",
 		"@atlaskit/editor-plugin-emoji": "^2.6.0",
-		"@atlaskit/editor-plugin-expand": "^2.7.0",
+		"@atlaskit/editor-plugin-expand": "^2.8.0",
 		"@atlaskit/editor-plugin-extension": "^1.14.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.2.0",
 		"@atlaskit/editor-plugin-hyperlink": "^2.9.0",
 		"@atlaskit/editor-plugin-image-upload": "^1.2.0",
 		"@atlaskit/editor-plugin-layout": "^1.8.0",
-		"@atlaskit/editor-plugin-media": "^1.33.0",
-		"@atlaskit/editor-plugin-media-insert": "^3.0.0",
+		"@atlaskit/editor-plugin-media": "^1.34.0",
+		"@atlaskit/editor-plugin-media-insert": "^3.1.0",
 		"@atlaskit/editor-plugin-mentions": "^2.6.0",
 		"@atlaskit/editor-plugin-panel": "^2.5.0",
 		"@atlaskit/editor-plugin-placeholder-text": "^1.7.0",
@@ -54,13 +54,13 @@
 		"@atlaskit/editor-plugin-rule": "^1.8.0",
 		"@atlaskit/editor-plugin-status": "^2.4.0",
 		"@atlaskit/editor-plugin-table": "^7.28.0",
-		"@atlaskit/editor-plugin-tasks-and-decisions": "^2.6.0",
+		"@atlaskit/editor-plugin-tasks-and-decisions": "^2.7.0",
 		"@atlaskit/editor-plugin-type-ahead": "^1.8.0",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^3.0.0",
 		"@atlaskit/emoji": "^67.8.0",
 		"@atlaskit/heading": "2.4.6",
-		"@atlaskit/icon": "^22.18.0",
+		"@atlaskit/icon": "^22.19.0",
 		"@atlaskit/icon-lab": "^0.2.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^12.2.0",