@atlaskit/editor-common 82.9.2 → 82.10.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-common
 
+## 82.10.0
+
+### Minor Changes
+
+- [#112575](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112575)
+  [`63dcaae87255b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/63dcaae87255b) -
+  Passes new FF for new experiment to macro code and updates type to be object from boolean to
+  account for multiple FFs
+
+### Patch Changes
+
+- [#113192](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113192)
+  [`80dfa651ba955`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/80dfa651ba955) -
+  Migration of native HTML buttons to new Pressable primitive.
+- [#113192](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113192)
+  [`80dfa651ba955`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/80dfa651ba955) -
+  Migration of native HTML buttons to new Pressable primitive.
+
 ## 82.9.2
 
 ### Patch Changes

package/dist/cjs/extensibility/Extension/Extension/index.js

@@ -38,11 +38,13 @@ function ExtensionWithPluginState(props) {
     shadowClassNames = props.shadowClassNames,
     hideFrame = props.hideFrame,
     editorAppearance = props.editorAppearance,
-    showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
+    macroInteractionDesignFeatureFlags = props.macroInteractionDesignFeatureFlags,
     isNodeSelected = props.isNodeSelected,
     isNodeHovered = props.isNodeHovered,
     isNodeNested = props.isNodeNested,
     setIsNodeHovered = props.setIsNodeHovered;
+  var _ref = macroInteractionDesignFeatureFlags || {},
+    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
   var hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   var isMobile = editorAppearance === 'mobile';
   var hasChildren = !!children;
@@ -199,8 +201,8 @@ var ExtensionDeprecated = function ExtensionDeprecated(props) {
       plugins: {
         widthState: widthPluginKey
       },
-      render: function render(_ref) {
-        var widthState = _ref.widthState;
+      render: function render(_ref2) {
+        var widthState = _ref2.widthState;
         return (0, _react2.jsx)(ExtensionWithPluginState, (0, _extends2.default)({
           widthState: widthState
         }, props));

package/dist/cjs/extensibility/Extension/InlineExtension/index.js

@@ -25,11 +25,13 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var InlineExtension = function InlineExtension(props) {
   var node = props.node,
     pluginInjectionApi = props.pluginInjectionApi,
-    showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
+    macroInteractionDesignFeatureFlags = props.macroInteractionDesignFeatureFlags,
     isNodeSelected = props.isNodeSelected,
     children = props.children,
     isNodeHovered = props.isNodeHovered,
     setIsNodeHovered = props.setIsNodeHovered;
+  var _ref = macroInteractionDesignFeatureFlags || {},
+    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width']),
     widthState = _useSharedPluginState.widthState;
   var hasChildren = !!children;

package/dist/cjs/extensibility/Extension.js

@@ -39,7 +39,7 @@ var Extension = exports.Extension = /*#__PURE__*/function (_Component) {
         editorAppearance = _this$props.editorAppearance,
         pluginInjectionApi = _this$props.pluginInjectionApi,
         eventDispatcher = _this$props.eventDispatcher,
-        showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates;
+        macroInteractionDesignFeatureFlags = _this$props.macroInteractionDesignFeatureFlags;
       return /*#__PURE__*/_react.default.createElement(_ExtensionComponent.ExtensionComponent, {
         editorView: editorView,
         node: node,
@@ -51,7 +51,7 @@ var Extension = exports.Extension = /*#__PURE__*/function (_Component) {
         editorAppearance: editorAppearance,
         pluginInjectionApi: pluginInjectionApi,
         eventDispatcher: eventDispatcher,
-        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+        macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags
       });
     });
     _this.providerFactory = props.providerFactory || new _providerFactory.ProviderFactory();

package/dist/cjs/extensibility/ExtensionComponent.js

@@ -200,7 +200,7 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
         pluginInjectionApi = _this$props2.pluginInjectionApi,
         getPos = _this$props2.getPos,
         eventDispatcher = _this$props2.eventDispatcher,
-        showMacroInteractionDesignUpdates = _this$props2.showMacroInteractionDesignUpdates;
+        macroInteractionDesignFeatureFlags = _this$props2.macroInteractionDesignFeatureFlags;
       var selection = editorView.state.selection;
       var selectedNode = selection instanceof _state.NodeSelection && selection.node;
       var position = typeof getPos === 'function' && getPos();
@@ -216,7 +216,7 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
           eventDispatcher: eventDispatcher,
           pluginInjectionApi: pluginInjectionApi,
           editorAppearance: editorAppearance,
-          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+          macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
           isNodeSelected: selectedNode === node,
           isNodeNested: isNodeNested,
           isNodeHovered: this.state.isNodeHovered,
@@ -237,7 +237,7 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
             editorAppearance: editorAppearance,
             hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
             pluginInjectionApi: pluginInjectionApi,
-            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+            macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
             isNodeSelected: selectedNode === node,
             isNodeHovered: this.state.isNodeHovered,
             isNodeNested: isNodeNested,
@@ -246,7 +246,7 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
         case 'inlineExtension':
           return /*#__PURE__*/_react.default.createElement(_InlineExtension.default, {
             node: node,
-            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+            macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
             isNodeSelected: selectedNode === node,
             pluginInjectionApi: pluginInjectionApi,
             isNodeHovered: this.state.isNodeHovered,

package/dist/cjs/extensibility/ExtensionNodeWrapper.js

@@ -34,7 +34,9 @@ var styles = (0, _react2.css)({
 var ExtensionNodeWrapper = exports.ExtensionNodeWrapper = function ExtensionNodeWrapper(_ref) {
   var children = _ref.children,
     nodeType = _ref.nodeType,
-    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
+    macroInteractionDesignFeatureFlags = _ref.macroInteractionDesignFeatureFlags;
+  var _ref2 = macroInteractionDesignFeatureFlags || {},
+    showMacroInteractionDesignUpdates = _ref2.showMacroInteractionDesignUpdates;
   var wrapperClassNames = (0, _classnames.default)({
     'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates,
     relative: showMacroInteractionDesignUpdates

package/dist/cjs/extensibility/MultiBodiedExtension/index.js

@@ -81,11 +81,13 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     eventDispatcher = _ref.eventDispatcher,
     widthState = _ref.widthState,
     editorAppearance = _ref.editorAppearance,
-    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates,
+    macroInteractionDesignFeatureFlags = _ref.macroInteractionDesignFeatureFlags,
     isNodeSelected = _ref.isNodeSelected,
     isNodeHovered = _ref.isNodeHovered,
     isNodeNested = _ref.isNodeNested,
     setIsNodeHovered = _ref.setIsNodeHovered;
+  var _ref2 = macroInteractionDesignFeatureFlags || {},
+    showMacroInteractionDesignUpdates = _ref2.showMacroInteractionDesignUpdates;
   var _node$attrs = node.attrs,
     parameters = _node$attrs.parameters,
     extensionKey = _node$attrs.extensionKey;
@@ -250,8 +252,8 @@ var MultiBodiedExtensionDeprecated = function MultiBodiedExtensionDeprecated(pro
       plugins: {
         widthState: widthPluginKey
       },
-      render: function render(_ref2) {
-        var widthState = _ref2.widthState;
+      render: function render(_ref3) {
+        var widthState = _ref3.widthState;
         return (0, _react2.jsx)(MultiBodiedExtensionWithWidth, (0, _extends2.default)({
           widthState: widthState
         }, props));

package/dist/cjs/extensibility/extensionNodeView.js

@@ -56,7 +56,7 @@ var ExtensionNode = exports.ExtensionNode = /*#__PURE__*/function (_ReactNodeVie
       var _props$extensionNodeV;
       return /*#__PURE__*/_react.default.createElement(_ExtensionNodeWrapper.ExtensionNodeWrapper, {
         nodeType: this.node.type.name,
-        showMacroInteractionDesignUpdates: props.showMacroInteractionDesignUpdates
+        macroInteractionDesignFeatureFlags: props.macroInteractionDesignFeatureFlags
       }, /*#__PURE__*/_react.default.createElement(_Extension.Extension, {
         editorView: this.view,
         node: this.node,
@@ -74,13 +74,13 @@ var ExtensionNode = exports.ExtensionNode = /*#__PURE__*/function (_ReactNodeVie
         extensionHandlers: props.extensionHandlers,
         editorAppearance: (_props$extensionNodeV = props.extensionNodeViewOptions) === null || _props$extensionNodeV === void 0 ? void 0 : _props$extensionNodeV.appearance,
         pluginInjectionApi: props.pluginInjectionApi,
-        showMacroInteractionDesignUpdates: props.showMacroInteractionDesignUpdates
+        macroInteractionDesignFeatureFlags: props.macroInteractionDesignFeatureFlags
       }));
     }
   }]);
   return ExtensionNode;
 }(_reactNodeView.default);
-function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, showMacroInteractionDesignUpdates) {
+function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags) {
   return function (node, view, getPos) {
     var hasIntlContext = true;
     return new ExtensionNode(node, view, getPos, portalProviderAPI, eventDispatcher, {
@@ -88,7 +88,7 @@ function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory,
       extensionHandlers: extensionHandlers,
       extensionNodeViewOptions: extensionNodeViewOptions,
       pluginInjectionApi: pluginInjectionApi,
-      showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+      macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags
     }, undefined, undefined, undefined, hasIntlContext).init();
   };
 }

package/dist/cjs/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -26,6 +26,7 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _ = _interopRequireDefault(require("@atlaskit/icon-object/glyph/page/16"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -56,12 +57,10 @@ var visuallyHiddenStyles = exports.visuallyHiddenStyles = (0, _react2.css)({
   position: 'absolute'
 });
 var RECENT_SEARCH_LIST_SIZE = exports.RECENT_SEARCH_LIST_SIZE = 5;
-var clearText = (0, _react2.css)({
-  cursor: 'pointer',
-  padding: 0,
-  marginRight: "var(--ds-space-100, 8px)",
-  color: "var(--ds-icon-subtle, ".concat(_colors.N90, ")"),
-  background: 'transparent',
+var clearTextButtonStyles = (0, _primitives.xcss)({
+  padding: 'space.0',
+  marginRight: 'space.100',
+  backgroundColor: 'color.background.neutral.subtle',
   border: 'none'
 });
 var clearTextWrapper = (0, _react2.css)({
@@ -888,13 +887,12 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         css: clearTextWrapper
       }, (0, _react2.jsx)(_tooltip.default, {
         content: formatClearLinkText
-      }, (0, _react2.jsx)("button", {
-        type: "button",
-        css: clearText,
-        onClick: this.handleClearText,
-        tabIndex: 0
+      }, (0, _react2.jsx)(_primitives.Pressable, {
+        xcss: clearTextButtonStyles,
+        onClick: this.handleClearText
       }, (0, _react2.jsx)(_crossCircle.default, {
-        label: formatClearLinkText
+        label: formatClearLinkText,
+        primaryColor: "var(--ds-icon-subtle, #626F86)"
       }))))), (0, _react2.jsx)("label", {
         htmlFor: displayTextInputId,
         css: [inputLabel, textLabelMargin]
@@ -915,13 +913,13 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         css: clearTextWrapper
       }, (0, _react2.jsx)(_tooltip.default, {
         content: formatMessage(messages.clearText)
-      }, (0, _react2.jsx)("button", {
-        type: "button",
-        css: clearText,
+      }, (0, _react2.jsx)(_primitives.Pressable, {
+        xcss: clearTextButtonStyles,
         onClick: this.handleClearDisplayText,
         onKeyDown: this.handleClearTextKeyDown
       }, (0, _react2.jsx)(_crossCircle.default, {
-        label: formatMessage(messages.clearText)
+        label: formatMessage(messages.clearText),
+        primaryColor: "var(--ds-icon-subtle, #626F86)"
       }))))), (0, _react2.jsx)("div", {
         css: visuallyHiddenStyles,
         "aria-live": "polite",

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,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 && Object.prototype.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 SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "82.9.2";
+var packageVersion = "82.10.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -20,7 +20,7 @@ var _Layer = _interopRequireDefault(require("../Layer"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "82.9.2";
+var packageVersion = "82.10.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/es2019/extensibility/Extension/Extension/index.js

@@ -25,12 +25,15 @@ function ExtensionWithPluginState(props) {
     shadowClassNames,
     hideFrame,
     editorAppearance,
-    showMacroInteractionDesignUpdates,
+    macroInteractionDesignFeatureFlags,
     isNodeSelected,
     isNodeHovered,
     isNodeNested,
     setIsNodeHovered
   } = props;
+  const {
+    showMacroInteractionDesignUpdates
+  } = macroInteractionDesignFeatureFlags || {};
   const hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   const isMobile = editorAppearance === 'mobile';
   const hasChildren = !!children;

package/dist/es2019/extensibility/Extension/InlineExtension/index.js

@@ -15,12 +15,15 @@ const InlineExtension = props => {
   const {
     node,
     pluginInjectionApi,
-    showMacroInteractionDesignUpdates,
+    macroInteractionDesignFeatureFlags,
     isNodeSelected,
     children,
     isNodeHovered,
     setIsNodeHovered
   } = props;
+  const {
+    showMacroInteractionDesignUpdates
+  } = macroInteractionDesignFeatureFlags || {};
   const {
     widthState
   } = useSharedPluginState(pluginInjectionApi, ['width']);

package/dist/es2019/extensibility/Extension.js

@@ -18,7 +18,7 @@ export class Extension extends Component {
         editorAppearance,
         pluginInjectionApi,
         eventDispatcher,
-        showMacroInteractionDesignUpdates
+        macroInteractionDesignFeatureFlags
       } = this.props;
       return /*#__PURE__*/React.createElement(ExtensionComponent, {
         editorView: editorView,
@@ -31,7 +31,7 @@ export class Extension extends Component {
         editorAppearance: editorAppearance,
         pluginInjectionApi: pluginInjectionApi,
         eventDispatcher: eventDispatcher,
-        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+        macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags
       });
     });
     this.providerFactory = props.providerFactory || new ProviderFactory();

package/dist/es2019/extensibility/ExtensionComponent.js

@@ -152,7 +152,7 @@ export class ExtensionComponent extends Component {
       pluginInjectionApi,
       getPos,
       eventDispatcher,
-      showMacroInteractionDesignUpdates
+      macroInteractionDesignFeatureFlags
     } = this.props;
     const {
       selection
@@ -171,7 +171,7 @@ export class ExtensionComponent extends Component {
         eventDispatcher: eventDispatcher,
         pluginInjectionApi: pluginInjectionApi,
         editorAppearance: editorAppearance,
-        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+        macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
         isNodeSelected: selectedNode === node,
         isNodeNested: isNodeNested,
         isNodeHovered: this.state.isNodeHovered,
@@ -192,7 +192,7 @@ export class ExtensionComponent extends Component {
           editorAppearance: editorAppearance,
           hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
           pluginInjectionApi: pluginInjectionApi,
-          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+          macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
           isNodeSelected: selectedNode === node,
           isNodeHovered: this.state.isNodeHovered,
           isNodeNested: isNodeNested,
@@ -201,7 +201,7 @@ export class ExtensionComponent extends Component {
       case 'inlineExtension':
         return /*#__PURE__*/React.createElement(InlineExtension, {
           node: node,
-          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+          macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
           isNodeSelected: selectedNode === node,
           pluginInjectionApi: pluginInjectionApi,
           isNodeHovered: this.state.isNodeHovered,

package/dist/es2019/extensibility/ExtensionNodeWrapper.js

@@ -26,8 +26,11 @@ const styles = css({
 export const ExtensionNodeWrapper = ({
   children,
   nodeType,
-  showMacroInteractionDesignUpdates
+  macroInteractionDesignFeatureFlags
 }) => {
+  const {
+    showMacroInteractionDesignUpdates
+  } = macroInteractionDesignFeatureFlags || {};
   const wrapperClassNames = classnames({
     'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates,
     relative: showMacroInteractionDesignUpdates

package/dist/es2019/extensibility/MultiBodiedExtension/index.js

@@ -70,12 +70,15 @@ const MultiBodiedExtensionWithWidth = ({
   eventDispatcher,
   widthState,
   editorAppearance,
-  showMacroInteractionDesignUpdates,
+  macroInteractionDesignFeatureFlags,
   isNodeSelected,
   isNodeHovered,
   isNodeNested,
   setIsNodeHovered
 }) => {
+  const {
+    showMacroInteractionDesignUpdates
+  } = macroInteractionDesignFeatureFlags || {};
   const {
     parameters,
     extensionKey

package/dist/es2019/extensibility/extensionNodeView.js

@@ -29,7 +29,7 @@ export class ExtensionNode extends ReactNodeView {
     var _props$extensionNodeV;
     return /*#__PURE__*/React.createElement(ExtensionNodeWrapper, {
       nodeType: this.node.type.name,
-      showMacroInteractionDesignUpdates: props.showMacroInteractionDesignUpdates
+      macroInteractionDesignFeatureFlags: props.macroInteractionDesignFeatureFlags
     }, /*#__PURE__*/React.createElement(Extension, {
       editorView: this.view,
       node: this.node,
@@ -47,11 +47,11 @@ export class ExtensionNode extends ReactNodeView {
       extensionHandlers: props.extensionHandlers,
       editorAppearance: (_props$extensionNodeV = props.extensionNodeViewOptions) === null || _props$extensionNodeV === void 0 ? void 0 : _props$extensionNodeV.appearance,
       pluginInjectionApi: props.pluginInjectionApi,
-      showMacroInteractionDesignUpdates: props.showMacroInteractionDesignUpdates
+      macroInteractionDesignFeatureFlags: props.macroInteractionDesignFeatureFlags
     }));
   }
 }
-export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, showMacroInteractionDesignUpdates) {
+export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags) {
   return (node, view, getPos) => {
     const hasIntlContext = true;
     return new ExtensionNode(node, view, getPos, portalProviderAPI, eventDispatcher, {
@@ -59,7 +59,7 @@ export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, pr
       extensionHandlers,
       extensionNodeViewOptions,
       pluginInjectionApi,
-      showMacroInteractionDesignUpdates
+      macroInteractionDesignFeatureFlags
     }, undefined, undefined, undefined, hasIntlContext).init();
   };
 }

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -12,7 +12,8 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import { N200, N90 } from '@atlaskit/theme/colors';
+import { Pressable, xcss } from '@atlaskit/primitives';
+import { N200 } from '@atlaskit/theme/colors';
 import { fontSizeSmall } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, INPUT_METHOD } from '../../../analytics';
@@ -39,12 +40,10 @@ export const visuallyHiddenStyles = css({
   position: 'absolute'
 });
 export const RECENT_SEARCH_LIST_SIZE = 5;
-const clearText = css({
-  cursor: 'pointer',
-  padding: 0,
-  marginRight: "var(--ds-space-100, 8px)",
-  color: `var(--ds-icon-subtle, ${N90})`,
-  background: 'transparent',
+const clearTextButtonStyles = xcss({
+  padding: 'space.0',
+  marginRight: 'space.100',
+  backgroundColor: 'color.background.neutral.subtle',
   border: 'none'
 });
 const clearTextWrapper = css({
@@ -728,13 +727,12 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       css: clearTextWrapper
     }, jsx(Tooltip, {
       content: formatClearLinkText
-    }, jsx("button", {
-      type: "button",
-      css: clearText,
-      onClick: this.handleClearText,
-      tabIndex: 0
+    }, jsx(Pressable, {
+      xcss: clearTextButtonStyles,
+      onClick: this.handleClearText
     }, jsx(CrossCircleIcon, {
-      label: formatClearLinkText
+      label: formatClearLinkText,
+      primaryColor: "var(--ds-icon-subtle, #626F86)"
     }))))), jsx("label", {
       htmlFor: displayTextInputId,
       css: [inputLabel, textLabelMargin]
@@ -753,13 +751,13 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       css: clearTextWrapper
     }, jsx(Tooltip, {
       content: formatMessage(messages.clearText)
-    }, jsx("button", {
-      type: "button",
-      css: clearText,
+    }, jsx(Pressable, {
+      xcss: clearTextButtonStyles,
       onClick: this.handleClearDisplayText,
       onKeyDown: this.handleClearTextKeyDown
     }, jsx(CrossCircleIcon, {
-      label: formatMessage(messages.clearText)
+      label: formatMessage(messages.clearText),
+      primaryColor: "var(--ds-icon-subtle, #626F86)"
     }))))), jsx("div", {
       css: visuallyHiddenStyles,
       "aria-live": "polite",

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "82.9.2";
+const packageVersion = "82.10.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -9,7 +9,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "82.9.2";
+const packageVersion = "82.10.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/esm/extensibility/Extension/Extension/index.js

@@ -30,11 +30,13 @@ function ExtensionWithPluginState(props) {
     shadowClassNames = props.shadowClassNames,
     hideFrame = props.hideFrame,
     editorAppearance = props.editorAppearance,
-    showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
+    macroInteractionDesignFeatureFlags = props.macroInteractionDesignFeatureFlags,
     isNodeSelected = props.isNodeSelected,
     isNodeHovered = props.isNodeHovered,
     isNodeNested = props.isNodeNested,
     setIsNodeHovered = props.setIsNodeHovered;
+  var _ref = macroInteractionDesignFeatureFlags || {},
+    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
   var hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   var isMobile = editorAppearance === 'mobile';
   var hasChildren = !!children;
@@ -191,8 +193,8 @@ var ExtensionDeprecated = function ExtensionDeprecated(props) {
       plugins: {
         widthState: widthPluginKey
       },
-      render: function render(_ref) {
-        var widthState = _ref.widthState;
+      render: function render(_ref2) {
+        var widthState = _ref2.widthState;
         return jsx(ExtensionWithPluginState, _extends({
           widthState: widthState
         }, props));

package/dist/esm/extensibility/Extension/InlineExtension/index.js

@@ -14,11 +14,13 @@ import { inlineWrapperStyles, wrapperStyle } from './styles';
 var InlineExtension = function InlineExtension(props) {
   var node = props.node,
     pluginInjectionApi = props.pluginInjectionApi,
-    showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
+    macroInteractionDesignFeatureFlags = props.macroInteractionDesignFeatureFlags,
     isNodeSelected = props.isNodeSelected,
     children = props.children,
     isNodeHovered = props.isNodeHovered,
     setIsNodeHovered = props.setIsNodeHovered;
+  var _ref = macroInteractionDesignFeatureFlags || {},
+    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width']),
     widthState = _useSharedPluginState.widthState;
   var hasChildren = !!children;

package/dist/esm/extensibility/Extension.js

@@ -29,7 +29,7 @@ export var Extension = /*#__PURE__*/function (_Component) {
         editorAppearance = _this$props.editorAppearance,
         pluginInjectionApi = _this$props.pluginInjectionApi,
         eventDispatcher = _this$props.eventDispatcher,
-        showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates;
+        macroInteractionDesignFeatureFlags = _this$props.macroInteractionDesignFeatureFlags;
       return /*#__PURE__*/React.createElement(ExtensionComponent, {
         editorView: editorView,
         node: node,
@@ -41,7 +41,7 @@ export var Extension = /*#__PURE__*/function (_Component) {
         editorAppearance: editorAppearance,
         pluginInjectionApi: pluginInjectionApi,
         eventDispatcher: eventDispatcher,
-        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+        macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags
       });
     });
     _this.providerFactory = props.providerFactory || new ProviderFactory();

package/dist/esm/extensibility/ExtensionComponent.js

@@ -190,7 +190,7 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
         pluginInjectionApi = _this$props2.pluginInjectionApi,
         getPos = _this$props2.getPos,
         eventDispatcher = _this$props2.eventDispatcher,
-        showMacroInteractionDesignUpdates = _this$props2.showMacroInteractionDesignUpdates;
+        macroInteractionDesignFeatureFlags = _this$props2.macroInteractionDesignFeatureFlags;
       var selection = editorView.state.selection;
       var selectedNode = selection instanceof NodeSelection && selection.node;
       var position = typeof getPos === 'function' && getPos();
@@ -206,7 +206,7 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
           eventDispatcher: eventDispatcher,
           pluginInjectionApi: pluginInjectionApi,
           editorAppearance: editorAppearance,
-          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+          macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
           isNodeSelected: selectedNode === node,
           isNodeNested: isNodeNested,
           isNodeHovered: this.state.isNodeHovered,
@@ -227,7 +227,7 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
             editorAppearance: editorAppearance,
             hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
             pluginInjectionApi: pluginInjectionApi,
-            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+            macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
             isNodeSelected: selectedNode === node,
             isNodeHovered: this.state.isNodeHovered,
             isNodeNested: isNodeNested,
@@ -236,7 +236,7 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
         case 'inlineExtension':
           return /*#__PURE__*/React.createElement(InlineExtension, {
             node: node,
-            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+            macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
             isNodeSelected: selectedNode === node,
             pluginInjectionApi: pluginInjectionApi,
             isNodeHovered: this.state.isNodeHovered,

package/dist/esm/extensibility/ExtensionNodeWrapper.js

@@ -26,7 +26,9 @@ var styles = css({
 export var ExtensionNodeWrapper = function ExtensionNodeWrapper(_ref) {
   var children = _ref.children,
     nodeType = _ref.nodeType,
-    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
+    macroInteractionDesignFeatureFlags = _ref.macroInteractionDesignFeatureFlags;
+  var _ref2 = macroInteractionDesignFeatureFlags || {},
+    showMacroInteractionDesignUpdates = _ref2.showMacroInteractionDesignUpdates;
   var wrapperClassNames = classnames({
     'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates,
     relative: showMacroInteractionDesignUpdates

package/dist/esm/extensibility/MultiBodiedExtension/index.js

@@ -73,11 +73,13 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     eventDispatcher = _ref.eventDispatcher,
     widthState = _ref.widthState,
     editorAppearance = _ref.editorAppearance,
-    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates,
+    macroInteractionDesignFeatureFlags = _ref.macroInteractionDesignFeatureFlags,
     isNodeSelected = _ref.isNodeSelected,
     isNodeHovered = _ref.isNodeHovered,
     isNodeNested = _ref.isNodeNested,
     setIsNodeHovered = _ref.setIsNodeHovered;
+  var _ref2 = macroInteractionDesignFeatureFlags || {},
+    showMacroInteractionDesignUpdates = _ref2.showMacroInteractionDesignUpdates;
   var _node$attrs = node.attrs,
     parameters = _node$attrs.parameters,
     extensionKey = _node$attrs.extensionKey;
@@ -242,8 +244,8 @@ var MultiBodiedExtensionDeprecated = function MultiBodiedExtensionDeprecated(pro
       plugins: {
         widthState: widthPluginKey
       },
-      render: function render(_ref2) {
-        var widthState = _ref2.widthState;
+      render: function render(_ref3) {
+        var widthState = _ref3.widthState;
         return jsx(MultiBodiedExtensionWithWidth, _extends({
           widthState: widthState
         }, props));

package/dist/esm/extensibility/extensionNodeView.js

@@ -48,7 +48,7 @@ export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
       var _props$extensionNodeV;
       return /*#__PURE__*/React.createElement(ExtensionNodeWrapper, {
         nodeType: this.node.type.name,
-        showMacroInteractionDesignUpdates: props.showMacroInteractionDesignUpdates
+        macroInteractionDesignFeatureFlags: props.macroInteractionDesignFeatureFlags
       }, /*#__PURE__*/React.createElement(Extension, {
         editorView: this.view,
         node: this.node,
@@ -66,13 +66,13 @@ export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
         extensionHandlers: props.extensionHandlers,
         editorAppearance: (_props$extensionNodeV = props.extensionNodeViewOptions) === null || _props$extensionNodeV === void 0 ? void 0 : _props$extensionNodeV.appearance,
         pluginInjectionApi: props.pluginInjectionApi,
-        showMacroInteractionDesignUpdates: props.showMacroInteractionDesignUpdates
+        macroInteractionDesignFeatureFlags: props.macroInteractionDesignFeatureFlags
       }));
     }
   }]);
   return ExtensionNode;
 }(ReactNodeView);
-export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, showMacroInteractionDesignUpdates) {
+export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions, pluginInjectionApi, macroInteractionDesignFeatureFlags) {
   return function (node, view, getPos) {
     var hasIntlContext = true;
     return new ExtensionNode(node, view, getPos, portalProviderAPI, eventDispatcher, {
@@ -80,7 +80,7 @@ export default function ExtensionNodeView(portalProviderAPI, eventDispatcher, pr
       extensionHandlers: extensionHandlers,
       extensionNodeViewOptions: extensionNodeViewOptions,
       pluginInjectionApi: pluginInjectionApi,
-      showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+      macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags
     }, undefined, undefined, undefined, hasIntlContext).init();
   };
 }

package/dist/esm/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -24,7 +24,8 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import { N200, N90 } from '@atlaskit/theme/colors';
+import { Pressable, xcss } from '@atlaskit/primitives';
+import { N200 } from '@atlaskit/theme/colors';
 import { fontSizeSmall } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, INPUT_METHOD } from '../../../analytics';
@@ -51,12 +52,10 @@ export var visuallyHiddenStyles = css({
   position: 'absolute'
 });
 export var RECENT_SEARCH_LIST_SIZE = 5;
-var clearText = css({
-  cursor: 'pointer',
-  padding: 0,
-  marginRight: "var(--ds-space-100, 8px)",
-  color: "var(--ds-icon-subtle, ".concat(N90, ")"),
-  background: 'transparent',
+var clearTextButtonStyles = xcss({
+  padding: 'space.0',
+  marginRight: 'space.100',
+  backgroundColor: 'color.background.neutral.subtle',
   border: 'none'
 });
 var clearTextWrapper = css({
@@ -883,13 +882,12 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         css: clearTextWrapper
       }, jsx(Tooltip, {
         content: formatClearLinkText
-      }, jsx("button", {
-        type: "button",
-        css: clearText,
-        onClick: this.handleClearText,
-        tabIndex: 0
+      }, jsx(Pressable, {
+        xcss: clearTextButtonStyles,
+        onClick: this.handleClearText
       }, jsx(CrossCircleIcon, {
-        label: formatClearLinkText
+        label: formatClearLinkText,
+        primaryColor: "var(--ds-icon-subtle, #626F86)"
       }))))), jsx("label", {
         htmlFor: displayTextInputId,
         css: [inputLabel, textLabelMargin]
@@ -910,13 +908,13 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         css: clearTextWrapper
       }, jsx(Tooltip, {
         content: formatMessage(messages.clearText)
-      }, jsx("button", {
-        type: "button",
-        css: clearText,
+      }, jsx(Pressable, {
+        xcss: clearTextButtonStyles,
         onClick: this.handleClearDisplayText,
         onKeyDown: this.handleClearTextKeyDown
       }, jsx(CrossCircleIcon, {
-        label: formatMessage(messages.clearText)
+        label: formatMessage(messages.clearText),
+        primaryColor: "var(--ds-icon-subtle, #626F86)"
       }))))), jsx("div", {
         css: visuallyHiddenStyles,
         "aria-live": "polite",

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "82.9.2";
+var packageVersion = "82.10.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "82.9.2";
+var packageVersion = "82.10.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/types/extensibility/Extension/Extension/index.d.ts

@@ -4,7 +4,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ExtensionProvider, ReferenceEntity } from '../../../extensions';
 import type { ProsemirrorGetPosHandler } from '../../../react-node-view';
 import type { EditorAppearance } from '../../../types';
-import type { ExtensionsPluginInjectionAPI } from '../../types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from '../../types';
 export interface Props {
     node: PmNode;
     getPos: ProsemirrorGetPosHandler;
@@ -16,7 +16,7 @@ export interface Props {
     hideFrame?: boolean;
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
     isNodeSelected?: boolean;
     isNodeHovered?: boolean;
     isNodeNested?: boolean;

package/dist/types/extensibility/Extension/InlineExtension/index.d.ts

@@ -2,12 +2,12 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import type { ExtensionsPluginInjectionAPI } from '../../types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from '../../types';
 export interface Props {
     node: PmNode;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     children?: React.ReactNode;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
     isNodeSelected?: boolean;
     isNodeHovered?: boolean;
     setIsNodeHovered?: (isHovered: boolean) => void;

package/dist/types/extensibility/Extension.d.ts

@@ -6,7 +6,7 @@ import type { ExtensionHandlers, ReferenceEntity } from '../extensions';
 import { ProviderFactory } from '../provider-factory';
 import type { ProsemirrorGetPosHandler } from '../react-node-view';
 import type { EditorAppearance } from '../types';
-import type { ExtensionsPluginInjectionAPI } from './types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from './types';
 export interface Props {
     editorView: EditorView;
     node: PMNode;
@@ -18,7 +18,7 @@ export interface Props {
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     eventDispatcher?: EventDispatcher;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
 }
 export declare class Extension extends Component<Props, any> {
     static displayName: string;

package/dist/types/extensibility/ExtensionComponent.d.ts

@@ -6,7 +6,7 @@ import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensio
 import type { ExtensionHandlers, ExtensionProvider, ReferenceEntity } from '../extensions';
 import type { ProsemirrorGetPosHandler } from '../react-node-view';
 import type { EditorAppearance } from '../types';
-import type { ExtensionsPluginInjectionAPI } from './types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from './types';
 export interface Props {
     editorView: EditorView;
     node: PMNode;
@@ -18,7 +18,7 @@ export interface Props {
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     eventDispatcher?: EventDispatcher;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
 }
 export interface State {
     extensionProvider?: ExtensionProvider;

package/dist/types/extensibility/ExtensionNodeWrapper.d.ts

@@ -1,10 +1,11 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
+import type { MacroInteractionDesignFeatureFlags } from "./types";
 type Props = {
     children: React.ReactNode;
     nodeType: string;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
 };
 /**
  * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
@@ -14,5 +15,5 @@ type Props = {
  * @param param0
  * @returns
  */
-export declare const ExtensionNodeWrapper: ({ children, nodeType, showMacroInteractionDesignUpdates, }: Props) => jsx.JSX.Element;
+export declare const ExtensionNodeWrapper: ({ children, nodeType, macroInteractionDesignFeatureFlags, }: Props) => jsx.JSX.Element;
 export {};

package/dist/types/extensibility/MultiBodiedExtension/index.d.ts

@@ -7,7 +7,7 @@ import type { EventDispatcher } from '../../event-dispatcher';
 import type { MultiBodiedExtensionActions } from '../../extensions';
 import type { EditorAppearance } from '../../types';
 import type { OverflowShadowProps } from '../../ui';
-import type { ExtensionsPluginInjectionAPI } from '../types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from '../types';
 export type TryExtensionHandlerType = (actions: MultiBodiedExtensionActions | undefined) => React.ReactElement | null;
 type Props = {
     node: PmNode;
@@ -18,7 +18,7 @@ type Props = {
     eventDispatcher?: EventDispatcher;
     pluginInjectionApi?: ExtensionsPluginInjectionAPI;
     editorAppearance?: EditorAppearance;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
     isNodeSelected?: boolean;
     isNodeHovered?: boolean;
     isNodeNested?: boolean;

package/dist/types/extensibility/extensionNodeView.d.ts

@@ -9,7 +9,7 @@ import type { ForwardRef, getPosHandler } from '../react-node-view';
 import ReactNodeView from '../react-node-view';
 import type { EditorAppearance } from '../types';
 import type { LegacyPortalProviderAPI } from '../ui/PortalProvider';
-import type { ExtensionsPluginInjectionAPI } from './types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from './types';
 interface ExtensionNodeViewOptions {
     appearance?: EditorAppearance;
 }
@@ -26,8 +26,8 @@ export declare class ExtensionNode extends ReactNodeView {
         extensionHandlers: ExtensionHandlers;
         extensionNodeViewOptions?: ExtensionNodeViewOptions;
         pluginInjectionApi: ExtensionsPluginInjectionAPI;
-        showMacroInteractionDesignUpdates: boolean;
+        macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
     }, forwardRef: ForwardRef): JSX.Element;
 }
-export default function ExtensionNodeView(portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, extensionHandlers: ExtensionHandlers, extensionNodeViewOptions: ExtensionNodeViewOptions, pluginInjectionApi: ExtensionsPluginInjectionAPI, showMacroInteractionDesignUpdates?: boolean): (node: PmNode, view: EditorView, getPos: getPosHandler) => NodeView;
+export default function ExtensionNodeView(portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, extensionHandlers: ExtensionHandlers, extensionNodeViewOptions: ExtensionNodeViewOptions, pluginInjectionApi: ExtensionsPluginInjectionAPI, macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags): (node: PmNode, view: EditorView, getPos: getPosHandler) => NodeView;
 export {};

package/dist/types/extensibility/types.d.ts

@@ -3,4 +3,8 @@ type WidthPluginType = NextEditorPlugin<'width', {
     sharedState: EditorContainerWidth | undefined;
 }>;
 export type ExtensionsPluginInjectionAPI = PublicPluginAPI<[WidthPluginType]> | undefined;
+export type MacroInteractionDesignFeatureFlags = {
+    showMacroInteractionDesignUpdates?: boolean;
+    showMacroButtonUpdates?: boolean;
+};
 export {};

package/dist/types/types/feature-flags.d.ts

@@ -269,6 +269,14 @@ export type FeatureFlags = {
      * @default false
      */
     macroInteractionUpdates?: boolean;
+    /**
+     * @description
+     * Enables macro interaction visual button updates
+     *
+     * @see https://product-fabric.atlassian.net/browse/PGXT-5513
+     * @default false
+     */
+    macroInteractionButtonUpdates?: boolean;
     /**
    * @description
    * Enables bug fix on media comments

package/dist/types-ts4.5/extensibility/Extension/Extension/index.d.ts

@@ -4,7 +4,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ExtensionProvider, ReferenceEntity } from '../../../extensions';
 import type { ProsemirrorGetPosHandler } from '../../../react-node-view';
 import type { EditorAppearance } from '../../../types';
-import type { ExtensionsPluginInjectionAPI } from '../../types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from '../../types';
 export interface Props {
     node: PmNode;
     getPos: ProsemirrorGetPosHandler;
@@ -16,7 +16,7 @@ export interface Props {
     hideFrame?: boolean;
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
     isNodeSelected?: boolean;
     isNodeHovered?: boolean;
     isNodeNested?: boolean;

package/dist/types-ts4.5/extensibility/Extension/InlineExtension/index.d.ts

@@ -2,12 +2,12 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import type { ExtensionsPluginInjectionAPI } from '../../types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from '../../types';
 export interface Props {
     node: PmNode;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     children?: React.ReactNode;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
     isNodeSelected?: boolean;
     isNodeHovered?: boolean;
     setIsNodeHovered?: (isHovered: boolean) => void;

package/dist/types-ts4.5/extensibility/Extension.d.ts

@@ -6,7 +6,7 @@ import type { ExtensionHandlers, ReferenceEntity } from '../extensions';
 import { ProviderFactory } from '../provider-factory';
 import type { ProsemirrorGetPosHandler } from '../react-node-view';
 import type { EditorAppearance } from '../types';
-import type { ExtensionsPluginInjectionAPI } from './types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from './types';
 export interface Props {
     editorView: EditorView;
     node: PMNode;
@@ -18,7 +18,7 @@ export interface Props {
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     eventDispatcher?: EventDispatcher;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
 }
 export declare class Extension extends Component<Props, any> {
     static displayName: string;

package/dist/types-ts4.5/extensibility/ExtensionComponent.d.ts

@@ -6,7 +6,7 @@ import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensio
 import type { ExtensionHandlers, ExtensionProvider, ReferenceEntity } from '../extensions';
 import type { ProsemirrorGetPosHandler } from '../react-node-view';
 import type { EditorAppearance } from '../types';
-import type { ExtensionsPluginInjectionAPI } from './types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from './types';
 export interface Props {
     editorView: EditorView;
     node: PMNode;
@@ -18,7 +18,7 @@ export interface Props {
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     eventDispatcher?: EventDispatcher;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
 }
 export interface State {
     extensionProvider?: ExtensionProvider;

package/dist/types-ts4.5/extensibility/ExtensionNodeWrapper.d.ts

@@ -1,10 +1,11 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
+import type { MacroInteractionDesignFeatureFlags } from "./types";
 type Props = {
     children: React.ReactNode;
     nodeType: string;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
 };
 /**
  * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
@@ -14,5 +15,5 @@ type Props = {
  * @param param0
  * @returns
  */
-export declare const ExtensionNodeWrapper: ({ children, nodeType, showMacroInteractionDesignUpdates, }: Props) => jsx.JSX.Element;
+export declare const ExtensionNodeWrapper: ({ children, nodeType, macroInteractionDesignFeatureFlags, }: Props) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/extensibility/MultiBodiedExtension/index.d.ts

@@ -7,7 +7,7 @@ import type { EventDispatcher } from '../../event-dispatcher';
 import type { MultiBodiedExtensionActions } from '../../extensions';
 import type { EditorAppearance } from '../../types';
 import type { OverflowShadowProps } from '../../ui';
-import type { ExtensionsPluginInjectionAPI } from '../types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from '../types';
 export type TryExtensionHandlerType = (actions: MultiBodiedExtensionActions | undefined) => React.ReactElement | null;
 type Props = {
     node: PmNode;
@@ -18,7 +18,7 @@ type Props = {
     eventDispatcher?: EventDispatcher;
     pluginInjectionApi?: ExtensionsPluginInjectionAPI;
     editorAppearance?: EditorAppearance;
-    showMacroInteractionDesignUpdates?: boolean;
+    macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
     isNodeSelected?: boolean;
     isNodeHovered?: boolean;
     isNodeNested?: boolean;

package/dist/types-ts4.5/extensibility/extensionNodeView.d.ts

@@ -9,7 +9,7 @@ import type { ForwardRef, getPosHandler } from '../react-node-view';
 import ReactNodeView from '../react-node-view';
 import type { EditorAppearance } from '../types';
 import type { LegacyPortalProviderAPI } from '../ui/PortalProvider';
-import type { ExtensionsPluginInjectionAPI } from './types';
+import type { ExtensionsPluginInjectionAPI, MacroInteractionDesignFeatureFlags } from './types';
 interface ExtensionNodeViewOptions {
     appearance?: EditorAppearance;
 }
@@ -26,8 +26,8 @@ export declare class ExtensionNode extends ReactNodeView {
         extensionHandlers: ExtensionHandlers;
         extensionNodeViewOptions?: ExtensionNodeViewOptions;
         pluginInjectionApi: ExtensionsPluginInjectionAPI;
-        showMacroInteractionDesignUpdates: boolean;
+        macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags;
     }, forwardRef: ForwardRef): JSX.Element;
 }
-export default function ExtensionNodeView(portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, extensionHandlers: ExtensionHandlers, extensionNodeViewOptions: ExtensionNodeViewOptions, pluginInjectionApi: ExtensionsPluginInjectionAPI, showMacroInteractionDesignUpdates?: boolean): (node: PmNode, view: EditorView, getPos: getPosHandler) => NodeView;
+export default function ExtensionNodeView(portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, extensionHandlers: ExtensionHandlers, extensionNodeViewOptions: ExtensionNodeViewOptions, pluginInjectionApi: ExtensionsPluginInjectionAPI, macroInteractionDesignFeatureFlags?: MacroInteractionDesignFeatureFlags): (node: PmNode, view: EditorView, getPos: getPosHandler) => NodeView;
 export {};

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

@@ -5,4 +5,8 @@ type WidthPluginType = NextEditorPlugin<'width', {
 export type ExtensionsPluginInjectionAPI = PublicPluginAPI<[
     WidthPluginType
 ]> | undefined;
+export type MacroInteractionDesignFeatureFlags = {
+    showMacroInteractionDesignUpdates?: boolean;
+    showMacroButtonUpdates?: boolean;
+};
 export {};

package/dist/types-ts4.5/types/feature-flags.d.ts

@@ -269,6 +269,14 @@ export type FeatureFlags = {
      * @default false
      */
     macroInteractionUpdates?: boolean;
+    /**
+     * @description
+     * Enables macro interaction visual button updates
+     *
+     * @see https://product-fabric.atlassian.net/browse/PGXT-5513
+     * @default false
+     */
+    macroInteractionButtonUpdates?: boolean;
     /**
    * @description
    * Enables bug fix on media comments

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "82.9.2",
+	"version": "82.10.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -102,7 +102,7 @@
 		"@atlaskit/analytics-namespaced-context": "^6.10.0",
 		"@atlaskit/analytics-next": "^9.3.0",
 		"@atlaskit/analytics-next-stable-react-context": "1.0.1",
-		"@atlaskit/button": "^17.22.0",
+		"@atlaskit/button": "^17.23.0",
 		"@atlaskit/code": "^15.3.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/custom-steps": "^0.2.0",
@@ -135,7 +135,7 @@
 		"@atlaskit/spinner": "^16.2.0",
 		"@atlaskit/task-decision": "^17.10.0",
 		"@atlaskit/textfield": "^6.4.0",
-		"@atlaskit/theme": "^12.10.0",
+		"@atlaskit/theme": "^12.11.0",
 		"@atlaskit/tokens": "^1.51.0",
 		"@atlaskit/tooltip": "^18.5.0",
 		"@atlaskit/ufo": "^0.2.0",