@atlaskit/editor-plugin-floating-toolbar 3.1.5 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 3.2.0
+
+### Minor Changes
+
+- [#122181](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/122181)
+  [`cf759849b38dc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cf759849b38dc) -
+  [ux] Added dropdown menu in floating toolbar for autoconverted extensions
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.1.5
 
 ### Patch Changes

package/dist/cjs/floatingToolbarPlugin.js

@@ -34,7 +34,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 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; }
-// AFP-2532 TODO: Fix automatic suppressions below
+// TODO: AFP-2532 - Fix automatic suppressions below
 var getRelevantConfig = exports.getRelevantConfig = function getRelevantConfig(selection, configs) {
   // node selections always take precedence, see if
   var configPair;
@@ -264,7 +264,7 @@ function ContentComponent(_ref5) {
     return null;
   }
 
-  // TODO: MODES-3950 Update this view mode specific logic once we refactor view mode.
+  // TODO: MODES-3950 - Update this view mode specific logic once we refactor view mode.
   //       We should inverse the responsibility here: A blacklist for toolbar items in view mode, rather than this white list.
   //       Also consider moving this logic to the more specific toolbar plugins (media and selection).
   var iterableItems = Array.isArray(items) ? items : (_items = items) === null || _items === void 0 ? void 0 : _items(node);

package/dist/cjs/ui/Dropdown.js

@@ -66,6 +66,10 @@ var Dropdown = exports.default = /*#__PURE__*/function (_Component) {
       isOpenedByKeyboard: false
     });
     (0, _defineProperty2.default)(_this, "triggerRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(_this, "makeArrayOptionsFromCallback", function (makeOptions) {
+      var options = makeOptions();
+      return options;
+    });
     (0, _defineProperty2.default)(_this, "renderArrayOptions", function (options) {
       var _this$props = _this.props,
         showSelected = _this$props.showSelected,
@@ -200,8 +204,8 @@ var Dropdown = exports.default = /*#__PURE__*/function (_Component) {
        * not exactly when it hits the boundary.
        */
       var fitTolerance = 10;
-      var fitWidth = Array.isArray(options) ? dropdownWidth || _DropdownMenu.menuItemDimensions.width : options.width;
-      var fitHeight = Array.isArray(options) ? options.length * _DropdownMenu.menuItemDimensions.height + _DropdownMenu.itemSpacing * 2 : options.height;
+      var fitWidth = Array.isArray(options) || typeof options === 'function' ? dropdownWidth || _DropdownMenu.menuItemDimensions.width : options.width;
+      var fitHeight = Array.isArray(options) ? options.length * _DropdownMenu.menuItemDimensions.height + _DropdownMenu.itemSpacing * 2 : typeof options === 'function' ? this.makeArrayOptionsFromCallback(options).length : options.height;
       return (
         /**
          * At the moment footer diver is rendered along with footer, if it's provided
@@ -225,7 +229,7 @@ var Dropdown = exports.default = /*#__PURE__*/function (_Component) {
           arrowKeyNavigationProviderOptions: {
             type: _uiMenu.ArrowKeyNavigationType.MENU
           }
-        }, Array.isArray(options) ? this.renderArrayOptions(options) : options.render({
+        }, Array.isArray(options) ? this.renderArrayOptions(options) : typeof options === 'function' ? this.renderArrayOptions(this.makeArrayOptionsFromCallback(options)) : options.render({
           hide: this.hide,
           dispatchCommand: dispatchCommand
         }), footer && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_Divider.Divider, null), footer))

package/dist/cjs/ui/DropdownMenu.js

@@ -64,7 +64,7 @@ var labelStyles = (0, _react2.css)({
   width: '100%'
 });
 
-// TODO: Migrate away from gridSize
+// TODO: ED-26959 - Migrate away from gridSize
 // Recommendation: Replace with 4 as itemSpacing is used in calculations expecting a number
 var itemSpacing = exports.itemSpacing = (0, _constants.gridSize)() / 2;
 

package/dist/cjs/ui/ExtensionsPlaceholder.js

@@ -17,6 +17,7 @@ var _nesting = require("@atlaskit/editor-common/nesting");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
 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 noop = function noop() {
@@ -119,7 +120,14 @@ var ExtensionsPlaceholder = exports.ExtensionsPlaceholder = function ExtensionsP
     extensionProvider = props.extensionProvider,
     separator = props.separator,
     applyChangeToContextPanel = props.applyChangeToContextPanel,
-    extensionApi = props.extensionApi;
+    extensionApi = props.extensionApi,
+    scrollable = props.scrollable,
+    setDisableScroll = props.setDisableScroll,
+    dispatchCommand = props.dispatchCommand,
+    popupsMountPoint = props.popupsMountPoint,
+    popupsBoundariesElement = props.popupsBoundariesElement,
+    popupsScrollableElement = props.popupsScrollableElement,
+    alignDropdownWithToolbar = props.alignDropdownWithToolbar;
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   var _useState = (0, _react.useState)([]),
@@ -188,13 +196,51 @@ var ExtensionsPlaceholder = exports.ExtensionsPlaceholder = function ExtensionsP
     if (isNestedTable && ['referentiality:connections', 'chart:insert-chart'].includes(item.key)) {
       item.disabled = true;
     }
-    children.push( /*#__PURE__*/_react.default.createElement(ExtensionButton, {
-      node: node,
-      item: item,
-      editorView: editorView,
-      applyChangeToContextPanel: applyChangeToContextPanel,
-      extensionApi: extensionApi
-    }));
+    if ((0, _platformFeatureFlags.fg)('forge-ui-macro-autoconvert')) {
+      if ('type' in item && item.type === 'dropdown') {
+        children.push( /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+          key: item.id,
+          title: item.title,
+          icon: item.icon,
+          dispatchCommand: dispatchCommand || function () {},
+          options: item.options,
+          disabled: item.disabled,
+          tooltip: item.tooltip,
+          hideExpandIcon: item.hideExpandIcon,
+          mountPoint: popupsMountPoint,
+          boundariesElement: popupsBoundariesElement,
+          scrollableElement: popupsScrollableElement,
+          dropdownWidth: item.dropdownWidth,
+          showSelected: item.showSelected,
+          buttonTestId: item.testId,
+          editorView: editorView,
+          setDisableParentScroll: scrollable ? setDisableScroll : undefined,
+          dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && "".concat(item.id, "-dropdownList"),
+          alignDropdownWithToolbar: alignDropdownWithToolbar,
+          onToggle: item.onToggle,
+          footer: item.footer,
+          onMount: item.onMount,
+          onClick: item.onClick,
+          pulse: item.pulse
+        }));
+      } else {
+        children.push( /*#__PURE__*/_react.default.createElement(ExtensionButton, {
+          node: node,
+          item: item,
+          editorView: editorView,
+          applyChangeToContextPanel: applyChangeToContextPanel,
+          extensionApi: extensionApi
+        }));
+      }
+    } else {
+      children.push( /*#__PURE__*/_react.default.createElement(ExtensionButton, {
+        node: node,
+        item: item,
+        editorView: editorView,
+        applyChangeToContextPanel: applyChangeToContextPanel,
+        extensionApi: extensionApi
+      }));
+    }
     if (index < extensionItems.length - 1) {
       children.push( /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null));
     }

package/dist/cjs/ui/Toolbar.js

@@ -184,7 +184,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
       case 'overflow-dropdown':
         return (0, _react2.jsx)(_Dropdown.default, {
           key: idx
-          // TODO: Find more appropriate copy
+          // TODO: ED-26959 - Find more appropriate copy
           ,
           title: 'Show more items',
           icon: (0, _react2.jsx)(_showMoreHorizontal.default, {
@@ -325,7 +325,13 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           extensionProvider: extensionsProvider,
           separator: item.separator,
           applyChangeToContextPanel: api === null || api === void 0 || (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange,
-          extensionApi: api === null || api === void 0 || (_api$extension = api.extension) === null || _api$extension === void 0 ? void 0 : _api$extension.actions.api()
+          extensionApi: api === null || api === void 0 || (_api$extension = api.extension) === null || _api$extension === void 0 ? void 0 : _api$extension.actions.api(),
+          dispatchCommand: dispatchCommand,
+          popupsMountPoint: popupsMountPoint,
+          popupsBoundariesElement: popupsBoundariesElement,
+          popupsScrollableElement: popupsScrollableElement,
+          alignDropdownWithToolbar: items.length === 1,
+          scrollable: scrollable
         });
       case 'separator':
         return (0, _react2.jsx)(_ui.FloatingToolbarSeparator, {

package/dist/es2019/floatingToolbarPlugin.js

@@ -19,7 +19,7 @@ import { ConfirmationModal } from './ui/ConfirmationModal';
 import { ExpandButton } from './ui/ExpandButton';
 import { ToolbarLoader } from './ui/ToolbarLoader';
 
-// AFP-2532 TODO: Fix automatic suppressions below
+// TODO: AFP-2532 - Fix automatic suppressions below
 export const getRelevantConfig = (selection, configs) => {
   // node selections always take precedence, see if
   let configPair;
@@ -250,7 +250,7 @@ export function ContentComponent({
     return null;
   }
 
-  // TODO: MODES-3950 Update this view mode specific logic once we refactor view mode.
+  // TODO: MODES-3950 - Update this view mode specific logic once we refactor view mode.
   //       We should inverse the responsibility here: A blacklist for toolbar items in view mode, rather than this white list.
   //       Also consider moving this logic to the more specific toolbar plugins (media and selection).
   const iterableItems = Array.isArray(items) ? items : (_items = items) === null || _items === void 0 ? void 0 : _items(node);

package/dist/es2019/ui/Dropdown.js

@@ -46,6 +46,10 @@ export default class Dropdown extends Component {
       isOpenedByKeyboard: false
     });
     _defineProperty(this, "triggerRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "makeArrayOptionsFromCallback", makeOptions => {
+      const options = makeOptions();
+      return options;
+    });
     _defineProperty(this, "renderArrayOptions", options => {
       const {
         showSelected,
@@ -181,8 +185,8 @@ export default class Dropdown extends Component {
      * not exactly when it hits the boundary.
      */
     const fitTolerance = 10;
-    const fitWidth = Array.isArray(options) ? dropdownWidth || menuItemDimensions.width : options.width;
-    const fitHeight = Array.isArray(options) ? options.length * menuItemDimensions.height + itemSpacing * 2 : options.height;
+    const fitWidth = Array.isArray(options) || typeof options === 'function' ? dropdownWidth || menuItemDimensions.width : options.width;
+    const fitHeight = Array.isArray(options) ? options.length * menuItemDimensions.height + itemSpacing * 2 : typeof options === 'function' ? this.makeArrayOptionsFromCallback(options).length : options.height;
     return (
       /**
        * At the moment footer diver is rendered along with footer, if it's provided
@@ -206,7 +210,7 @@ export default class Dropdown extends Component {
         arrowKeyNavigationProviderOptions: {
           type: ArrowKeyNavigationType.MENU
         }
-      }, Array.isArray(options) ? this.renderArrayOptions(options) : options.render({
+      }, Array.isArray(options) ? this.renderArrayOptions(options) : typeof options === 'function' ? this.renderArrayOptions(this.makeArrayOptionsFromCallback(options)) : options.render({
         hide: this.hide,
         dispatchCommand
       }), footer && jsx(React.Fragment, null, jsx(Divider, null), footer))

package/dist/es2019/ui/DropdownMenu.js

@@ -54,7 +54,7 @@ const labelStyles = css({
   width: '100%'
 });
 
-// TODO: Migrate away from gridSize
+// TODO: ED-26959 - Migrate away from gridSize
 // Recommendation: Replace with 4 as itemSpacing is used in calculations expecting a number
 export const itemSpacing = gridSize() / 2;
 

package/dist/es2019/ui/ExtensionsPlaceholder.js

@@ -6,6 +6,7 @@ import { isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { nodeToJSON } from '@atlaskit/editor-common/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import Dropdown from './Dropdown';
 const noop = () => null;
 const isDefaultExport = mod => {
   return mod.hasOwnProperty('default');
@@ -69,7 +70,14 @@ export const ExtensionsPlaceholder = props => {
     extensionProvider,
     separator,
     applyChangeToContextPanel,
-    extensionApi
+    extensionApi,
+    scrollable,
+    setDisableScroll,
+    dispatchCommand,
+    popupsMountPoint,
+    popupsBoundariesElement,
+    popupsScrollableElement,
+    alignDropdownWithToolbar
   } = props;
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -110,13 +118,51 @@ export const ExtensionsPlaceholder = props => {
     if (isNestedTable && ['referentiality:connections', 'chart:insert-chart'].includes(item.key)) {
       item.disabled = true;
     }
-    children.push( /*#__PURE__*/React.createElement(ExtensionButton, {
-      node: node,
-      item: item,
-      editorView: editorView,
-      applyChangeToContextPanel: applyChangeToContextPanel,
-      extensionApi: extensionApi
-    }));
+    if (fg('forge-ui-macro-autoconvert')) {
+      if ('type' in item && item.type === 'dropdown') {
+        children.push( /*#__PURE__*/React.createElement(Dropdown, {
+          key: item.id,
+          title: item.title,
+          icon: item.icon,
+          dispatchCommand: dispatchCommand || (() => {}),
+          options: item.options,
+          disabled: item.disabled,
+          tooltip: item.tooltip,
+          hideExpandIcon: item.hideExpandIcon,
+          mountPoint: popupsMountPoint,
+          boundariesElement: popupsBoundariesElement,
+          scrollableElement: popupsScrollableElement,
+          dropdownWidth: item.dropdownWidth,
+          showSelected: item.showSelected,
+          buttonTestId: item.testId,
+          editorView: editorView,
+          setDisableParentScroll: scrollable ? setDisableScroll : undefined,
+          dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && `${item.id}-dropdownList`,
+          alignDropdownWithToolbar: alignDropdownWithToolbar,
+          onToggle: item.onToggle,
+          footer: item.footer,
+          onMount: item.onMount,
+          onClick: item.onClick,
+          pulse: item.pulse
+        }));
+      } else {
+        children.push( /*#__PURE__*/React.createElement(ExtensionButton, {
+          node: node,
+          item: item,
+          editorView: editorView,
+          applyChangeToContextPanel: applyChangeToContextPanel,
+          extensionApi: extensionApi
+        }));
+      }
+    } else {
+      children.push( /*#__PURE__*/React.createElement(ExtensionButton, {
+        node: node,
+        item: item,
+        editorView: editorView,
+        applyChangeToContextPanel: applyChangeToContextPanel,
+        extensionApi: extensionApi
+      }));
+    }
     if (index < extensionItems.length - 1) {
       children.push( /*#__PURE__*/React.createElement(Separator, null));
     }

package/dist/es2019/ui/Toolbar.js

@@ -161,7 +161,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
       case 'overflow-dropdown':
         return jsx(Dropdown, {
           key: idx
-          // TODO: Find more appropriate copy
+          // TODO: ED-26959 - Find more appropriate copy
           ,
           title: 'Show more items',
           icon: jsx(ShowMoreHorizontalIcon, {
@@ -298,7 +298,13 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
           extensionProvider: extensionsProvider,
           separator: item.separator,
           applyChangeToContextPanel: api === null || api === void 0 ? void 0 : (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange,
-          extensionApi: api === null || api === void 0 ? void 0 : (_api$extension = api.extension) === null || _api$extension === void 0 ? void 0 : _api$extension.actions.api()
+          extensionApi: api === null || api === void 0 ? void 0 : (_api$extension = api.extension) === null || _api$extension === void 0 ? void 0 : _api$extension.actions.api(),
+          dispatchCommand: dispatchCommand,
+          popupsMountPoint: popupsMountPoint,
+          popupsBoundariesElement: popupsBoundariesElement,
+          popupsScrollableElement: popupsScrollableElement,
+          alignDropdownWithToolbar: items.length === 1,
+          scrollable: scrollable
         });
       case 'separator':
         return jsx(Separator, {

package/dist/esm/floatingToolbarPlugin.js

@@ -22,7 +22,7 @@ import { ConfirmationModal } from './ui/ConfirmationModal';
 import { ExpandButton } from './ui/ExpandButton';
 import { ToolbarLoader } from './ui/ToolbarLoader';
 
-// AFP-2532 TODO: Fix automatic suppressions below
+// TODO: AFP-2532 - Fix automatic suppressions below
 export var getRelevantConfig = function getRelevantConfig(selection, configs) {
   // node selections always take precedence, see if
   var configPair;
@@ -252,7 +252,7 @@ export function ContentComponent(_ref5) {
     return null;
   }
 
-  // TODO: MODES-3950 Update this view mode specific logic once we refactor view mode.
+  // TODO: MODES-3950 - Update this view mode specific logic once we refactor view mode.
   //       We should inverse the responsibility here: A blacklist for toolbar items in view mode, rather than this white list.
   //       Also consider moving this logic to the more specific toolbar plugins (media and selection).
   var iterableItems = Array.isArray(items) ? items : (_items = items) === null || _items === void 0 ? void 0 : _items(node);

package/dist/esm/ui/Dropdown.js

@@ -61,6 +61,10 @@ var Dropdown = /*#__PURE__*/function (_Component) {
       isOpenedByKeyboard: false
     });
     _defineProperty(_this, "triggerRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_this, "makeArrayOptionsFromCallback", function (makeOptions) {
+      var options = makeOptions();
+      return options;
+    });
     _defineProperty(_this, "renderArrayOptions", function (options) {
       var _this$props = _this.props,
         showSelected = _this$props.showSelected,
@@ -195,8 +199,8 @@ var Dropdown = /*#__PURE__*/function (_Component) {
        * not exactly when it hits the boundary.
        */
       var fitTolerance = 10;
-      var fitWidth = Array.isArray(options) ? dropdownWidth || menuItemDimensions.width : options.width;
-      var fitHeight = Array.isArray(options) ? options.length * menuItemDimensions.height + itemSpacing * 2 : options.height;
+      var fitWidth = Array.isArray(options) || typeof options === 'function' ? dropdownWidth || menuItemDimensions.width : options.width;
+      var fitHeight = Array.isArray(options) ? options.length * menuItemDimensions.height + itemSpacing * 2 : typeof options === 'function' ? this.makeArrayOptionsFromCallback(options).length : options.height;
       return (
         /**
          * At the moment footer diver is rendered along with footer, if it's provided
@@ -220,7 +224,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
           arrowKeyNavigationProviderOptions: {
             type: ArrowKeyNavigationType.MENU
           }
-        }, Array.isArray(options) ? this.renderArrayOptions(options) : options.render({
+        }, Array.isArray(options) ? this.renderArrayOptions(options) : typeof options === 'function' ? this.renderArrayOptions(this.makeArrayOptionsFromCallback(options)) : options.render({
           hide: this.hide,
           dispatchCommand: dispatchCommand
         }), footer && jsx(React.Fragment, null, jsx(Divider, null), footer))

package/dist/esm/ui/DropdownMenu.js

@@ -55,7 +55,7 @@ var labelStyles = css({
   width: '100%'
 });
 
-// TODO: Migrate away from gridSize
+// TODO: ED-26959 - Migrate away from gridSize
 // Recommendation: Replace with 4 as itemSpacing is used in calculations expecting a number
 export var itemSpacing = gridSize() / 2;
 

package/dist/esm/ui/ExtensionsPlaceholder.js

@@ -9,6 +9,7 @@ import { isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { nodeToJSON } from '@atlaskit/editor-common/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import Dropdown from './Dropdown';
 var noop = function noop() {
   return null;
 };
@@ -109,7 +110,14 @@ export var ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
     extensionProvider = props.extensionProvider,
     separator = props.separator,
     applyChangeToContextPanel = props.applyChangeToContextPanel,
-    extensionApi = props.extensionApi;
+    extensionApi = props.extensionApi,
+    scrollable = props.scrollable,
+    setDisableScroll = props.setDisableScroll,
+    dispatchCommand = props.dispatchCommand,
+    popupsMountPoint = props.popupsMountPoint,
+    popupsBoundariesElement = props.popupsBoundariesElement,
+    popupsScrollableElement = props.popupsScrollableElement,
+    alignDropdownWithToolbar = props.alignDropdownWithToolbar;
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   var _useState = useState([]),
@@ -178,13 +186,51 @@ export var ExtensionsPlaceholder = function ExtensionsPlaceholder(props) {
     if (isNestedTable && ['referentiality:connections', 'chart:insert-chart'].includes(item.key)) {
       item.disabled = true;
     }
-    children.push( /*#__PURE__*/React.createElement(ExtensionButton, {
-      node: node,
-      item: item,
-      editorView: editorView,
-      applyChangeToContextPanel: applyChangeToContextPanel,
-      extensionApi: extensionApi
-    }));
+    if (fg('forge-ui-macro-autoconvert')) {
+      if ('type' in item && item.type === 'dropdown') {
+        children.push( /*#__PURE__*/React.createElement(Dropdown, {
+          key: item.id,
+          title: item.title,
+          icon: item.icon,
+          dispatchCommand: dispatchCommand || function () {},
+          options: item.options,
+          disabled: item.disabled,
+          tooltip: item.tooltip,
+          hideExpandIcon: item.hideExpandIcon,
+          mountPoint: popupsMountPoint,
+          boundariesElement: popupsBoundariesElement,
+          scrollableElement: popupsScrollableElement,
+          dropdownWidth: item.dropdownWidth,
+          showSelected: item.showSelected,
+          buttonTestId: item.testId,
+          editorView: editorView,
+          setDisableParentScroll: scrollable ? setDisableScroll : undefined,
+          dropdownListId: (item === null || item === void 0 ? void 0 : item.id) && "".concat(item.id, "-dropdownList"),
+          alignDropdownWithToolbar: alignDropdownWithToolbar,
+          onToggle: item.onToggle,
+          footer: item.footer,
+          onMount: item.onMount,
+          onClick: item.onClick,
+          pulse: item.pulse
+        }));
+      } else {
+        children.push( /*#__PURE__*/React.createElement(ExtensionButton, {
+          node: node,
+          item: item,
+          editorView: editorView,
+          applyChangeToContextPanel: applyChangeToContextPanel,
+          extensionApi: extensionApi
+        }));
+      }
+    } else {
+      children.push( /*#__PURE__*/React.createElement(ExtensionButton, {
+        node: node,
+        item: item,
+        editorView: editorView,
+        applyChangeToContextPanel: applyChangeToContextPanel,
+        extensionApi: extensionApi
+      }));
+    }
     if (index < extensionItems.length - 1) {
       children.push( /*#__PURE__*/React.createElement(Separator, null));
     }

package/dist/esm/ui/Toolbar.js

@@ -177,7 +177,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
       case 'overflow-dropdown':
         return jsx(Dropdown, {
           key: idx
-          // TODO: Find more appropriate copy
+          // TODO: ED-26959 - Find more appropriate copy
           ,
           title: 'Show more items',
           icon: jsx(ShowMoreHorizontalIcon, {
@@ -318,7 +318,13 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
           extensionProvider: extensionsProvider,
           separator: item.separator,
           applyChangeToContextPanel: api === null || api === void 0 || (_api$contextPanel = api.contextPanel) === null || _api$contextPanel === void 0 ? void 0 : _api$contextPanel.actions.applyChange,
-          extensionApi: api === null || api === void 0 || (_api$extension = api.extension) === null || _api$extension === void 0 ? void 0 : _api$extension.actions.api()
+          extensionApi: api === null || api === void 0 || (_api$extension = api.extension) === null || _api$extension === void 0 ? void 0 : _api$extension.actions.api(),
+          dispatchCommand: dispatchCommand,
+          popupsMountPoint: popupsMountPoint,
+          popupsBoundariesElement: popupsBoundariesElement,
+          popupsScrollableElement: popupsScrollableElement,
+          alignDropdownWithToolbar: items.length === 1,
+          scrollable: scrollable
         });
       case 'separator':
         return jsx(Separator, {

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

@@ -6,7 +6,7 @@
 import type { ReactElement } from 'react';
 import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
-import type { CommandDispatch, DropdownOptions, FloatingToolbarOverflowDropdownOptions, FloatingToolbarButtonSpotlightConfig } from '@atlaskit/editor-common/types';
+import type { CommandDispatch, DropdownOptions, FloatingToolbarOverflowDropdownOptions, FloatingToolbarButtonSpotlightConfig, ExtensionDropdownOptions } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export interface Props {
@@ -14,7 +14,7 @@ export interface Props {
     icon?: ReactElement<any>;
     iconBefore?: ReactElement<any>;
     hideExpandIcon?: boolean;
-    options: DropdownOptions<Function> | FloatingToolbarOverflowDropdownOptions<Function>;
+    options: DropdownOptions<Function> | FloatingToolbarOverflowDropdownOptions<Function> | ExtensionDropdownOptions;
     dispatchCommand: (command: Function) => void;
     mountPoint?: HTMLElement;
     boundariesElement?: HTMLElement;
@@ -44,6 +44,7 @@ export default class Dropdown extends Component<Props, State> {
     state: State;
     triggerRef: React.RefObject<HTMLDivElement>;
     render(): jsx.JSX.Element;
+    private makeArrayOptionsFromCallback;
     private renderArrayOptions;
     private toggleOpen;
     private toggleOpenByKeyboard;

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

@@ -10,6 +10,14 @@ interface Props {
     separator?: 'start' | 'end' | 'both';
     applyChangeToContextPanel: ApplyChangeHandler | undefined;
     extensionApi: ExtensionAPI | undefined;
+    scrollable?: boolean;
+    setDisableScroll?: (disable: boolean) => void;
+    dispatchCommand?: (command: Function) => void;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    setDisableParentScroll?: (disable: boolean) => void;
+    alignDropdownWithToolbar?: boolean;
 }
 export declare const ExtensionsPlaceholder: (props: Props) => React.JSX.Element | null;
 export {};

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

@@ -6,7 +6,7 @@
 import type { ReactElement } from 'react';
 import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
-import type { CommandDispatch, DropdownOptions, FloatingToolbarOverflowDropdownOptions, FloatingToolbarButtonSpotlightConfig } from '@atlaskit/editor-common/types';
+import type { CommandDispatch, DropdownOptions, FloatingToolbarOverflowDropdownOptions, FloatingToolbarButtonSpotlightConfig, ExtensionDropdownOptions } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export interface Props {
@@ -14,7 +14,7 @@ export interface Props {
     icon?: ReactElement<any>;
     iconBefore?: ReactElement<any>;
     hideExpandIcon?: boolean;
-    options: DropdownOptions<Function> | FloatingToolbarOverflowDropdownOptions<Function>;
+    options: DropdownOptions<Function> | FloatingToolbarOverflowDropdownOptions<Function> | ExtensionDropdownOptions;
     dispatchCommand: (command: Function) => void;
     mountPoint?: HTMLElement;
     boundariesElement?: HTMLElement;
@@ -44,6 +44,7 @@ export default class Dropdown extends Component<Props, State> {
     state: State;
     triggerRef: React.RefObject<HTMLDivElement>;
     render(): jsx.JSX.Element;
+    private makeArrayOptionsFromCallback;
     private renderArrayOptions;
     private toggleOpen;
     private toggleOpenByKeyboard;

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

@@ -10,6 +10,14 @@ interface Props {
     separator?: 'start' | 'end' | 'both';
     applyChangeToContextPanel: ApplyChangeHandler | undefined;
     extensionApi: ExtensionAPI | undefined;
+    scrollable?: boolean;
+    setDisableScroll?: (disable: boolean) => void;
+    dispatchCommand?: (command: Function) => void;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    setDisableParentScroll?: (disable: boolean) => void;
+    alignDropdownWithToolbar?: boolean;
 }
 export declare const ExtensionsPlaceholder: (props: Props) => React.JSX.Element | null;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-floating-toolbar",
-	"version": "3.1.5",
+	"version": "3.2.0",
 	"description": "Floating toolbar plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,7 +28,7 @@
 		"@atlaskit/adf-utils": "^19.19.0",
 		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/checkbox": "^17.0.0",
-		"@atlaskit/editor-common": "^102.0.0",
+		"@atlaskit/editor-common": "^102.3.0",
 		"@atlaskit/editor-palette": "^2.0.0",
 		"@atlaskit/editor-plugin-block-controls": "^3.3.0",
 		"@atlaskit/editor-plugin-context-panel": "^4.0.0",
@@ -36,9 +36,9 @@
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
-		"@atlaskit/editor-plugin-emoji": "^3.1.0",
+		"@atlaskit/editor-plugin-emoji": "^3.2.0",
 		"@atlaskit/editor-plugin-extension": "^5.0.0",
-		"@atlaskit/editor-plugin-table": "^10.3.0",
+		"@atlaskit/editor-plugin-table": "^10.4.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/emoji": "^68.0.0",
 		"@atlaskit/icon": "^24.1.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/select": "^20.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^3.4.0",
+		"@atlaskit/tmp-editor-statsig": "^3.5.0",
 		"@atlaskit/tokens": "^4.3.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -121,6 +121,9 @@
 		},
 		"platform_editor_use_nested_table_pm_nodes": {
 			"type": "boolean"
+		},
+		"forge-ui-macro-autoconvert": {
+			"type": "boolean"
 		}
 	}
 }