@atlaskit/editor-common 78.10.0 → 78.11.0

package/dist/esm/extensibility/ExtensionComponent.js

@@ -198,7 +198,8 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
           eventDispatcher: eventDispatcher,
           pluginInjectionApi: pluginInjectionApi,
           editorAppearance: editorAppearance,
-          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+          isNodeSelected: selectedNode === node
         });
       }
       var extensionHandlerResult = this.tryExtensionHandler(undefined);
@@ -222,7 +223,8 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
           return /*#__PURE__*/React.createElement(InlineExtension, {
             node: node,
             showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
-            isNodeSelected: selectedNode === node
+            isNodeSelected: selectedNode === node,
+            pluginInjectionApi: pluginInjectionApi
           }, extensionHandlerResult);
         default:
           return null;

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

@@ -7,7 +7,7 @@ var _excluded = ["url"];
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
 
-import React, { useState } from 'react';
+import React, { Fragment, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import classnames from 'classnames';
 import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
@@ -15,10 +15,14 @@ import { useSharedPluginState } from '../../hooks';
 import { sharedMultiBodiedExtensionStyles } from '../../ui/MultiBodiedExtension';
 import { calculateBreakoutStyles, getExtensionLozengeData } from '../../utils';
 import { WithPluginState } from '../../with-plugin-state';
+import ExtensionLozenge from '../Extension/Lozenge';
 import { useMultiBodiedExtensionActions } from './action-api';
 import { mbeExtensionWrapperCSS } from './styles';
 // Similar to the one in platform/packages/editor/editor-common/src/extensibility/Extension/Lozenge.tsx
-var getWrapperTitleContent = function getWrapperTitleContent(imageData, title) {
+var getWrapperTitleContent = function getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates) {
+  if (showMacroInteractionDesignUpdates) {
+    return null;
+  }
   if (imageData) {
     var url = imageData.url,
       rest = _objectWithoutProperties(imageData, _excluded);
@@ -35,7 +39,8 @@ var getWrapperTitleContent = function getWrapperTitleContent(imageData, title) {
     })), title);
   }
   return jsx("div", {
-    className: "extension-title"
+    className: "extension-title",
+    "data-testid": 'multiBodiedExtension-default-lozenge'
   }, jsx(EditorFileIcon, {
     label: title
   }), title);
@@ -48,7 +53,9 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     editorView = _ref.editorView,
     eventDispatcher = _ref.eventDispatcher,
     widthState = _ref.widthState,
-    editorAppearance = _ref.editorAppearance;
+    editorAppearance = _ref.editorAppearance,
+    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates,
+    isNodeSelected = _ref.isNodeSelected;
   var _node$attrs = node.attrs,
     parameters = _node$attrs.parameters,
     extensionKey = _node$attrs.extensionKey;
@@ -99,13 +106,20 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
       breakoutStyles = _extends({}, (_objectDestructuringEmpty(_calculateBreakoutSty), _calculateBreakoutSty));
     mbeWrapperStyles = breakoutStyles;
   }
-  var wrapperClassNames = classnames('multiBodiedExtension--wrapper', 'extension-container', 'block');
-  return jsx("div", {
+  var wrapperClassNames = classnames('multiBodiedExtension--wrapper', 'extension-container', 'block', {
+    'remove-margin-top': showMacroInteractionDesignUpdates
+  });
+  return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
+    isNodeSelected: isNodeSelected,
+    node: node,
+    showMacroInteractionDesignUpdates: true,
+    customContainerStyles: mbeWrapperStyles
+  }), jsx("div", {
     className: wrapperClassNames,
     css: mbeExtensionWrapperCSS,
     "data-testid": "multiBodiedExtension--wrapper",
     style: mbeWrapperStyles
-  }, getWrapperTitleContent(imageData, title), jsx("div", {
+  }, getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), jsx("div", {
     className: "multiBodiedExtension--container",
     css: containerCssExtended,
     "data-testid": "multiBodiedExtension--container",
@@ -118,7 +132,7 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     className: "multiBodiedExtension--frames",
     "data-testid": "multiBodiedExtension--frames",
     ref: articleRef
-  })));
+  }))));
 };
 var MultiBodiedExtensionWithSharedState = function MultiBodiedExtensionWithSharedState(props) {
   var pluginInjectionApi = props.pluginInjectionApi;

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

@@ -1,7 +1,21 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
 import { wrapperDefault } from '../Extension/styles';
 
 // Wrapper the extension title and extensionContainer
-export var mbeExtensionWrapperCSS = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n  cursor: pointer;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  .extension-title {\n    display: flex;\n    align-items: center;\n    line-height: 16px !important;\n    margin-bottom: ", ";\n    margin-left: ", " !important;\n    margin-right: ", ";\n    padding-top: ", " !important;\n  }\n"])), wrapperDefault, "var(--ds-space-250, 24px)", "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
+export var mbeExtensionWrapperCSS = css(wrapperDefault, {
+  '&.remove-margin-top': {
+    marginTop: 0
+  },
+  cursor: 'pointer',
+  marginTop: "var(--ds-space-250, 24px)",
+  marginBottom: "var(--ds-space-200, 16px)",
+  '.extension-title': {
+    display: 'flex',
+    alignItems: 'center',
+    lineHeight: '16px !important',
+    marginBottom: "var(--ds-space-100, 8px)",
+    marginLeft: "var(--ds-space-050, 4px)".concat(" !important"),
+    marginRight: "var(--ds-space-100, 8px)",
+    paddingTop: "var(--ds-space-100, 8px)".concat(" !important")
+  }
+});

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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 = "78.10.0";
+var packageVersion = "78.11.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 = "78.10.0";
+var packageVersion = "78.11.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -26,7 +26,9 @@ export default function MediaSingle(_ref) {
     editorWidth = _ref.lineLength,
     _ref$hasFallbackConta = _ref.hasFallbackContainer,
     hasFallbackContainer = _ref$hasFallbackConta === void 0 ? true : _ref$hasFallbackConta,
-    handleMediaSingleRef = _ref.handleMediaSingleRef;
+    handleMediaSingleRef = _ref.handleMediaSingleRef,
+    _ref$isInsideOfInline = _ref.isInsideOfInlineExtension,
+    isInsideOfInlineExtension = _ref$isInsideOfInline === void 0 ? false : _ref$isInsideOfInline;
   var isPixelWidth = (size === null || size === void 0 ? void 0 : size.widthType) === 'pixel';
   var mediaSingleWidth = (size === null || size === void 0 ? void 0 : size.width) || pctWidth;
   var children = React.Children.toArray(propsChildren);
@@ -85,7 +87,8 @@ export default function MediaSingle(_ref) {
       containerWidth: containerWidth,
       mediaSingleWidth: mediaSingleWidth,
       fullWidthMode: fullWidthMode,
-      isExtendedResizeExperienceOn: isPixelWidth
+      isExtendedResizeExperienceOn: isPixelWidth,
+      isInsideOfInlineExtension: isInsideOfInlineExtension
     }),
     "data-layout": layout,
     "data-width": mediaSingleWidth,

package/dist/esm/ui/MediaSingle/styled.js

@@ -6,7 +6,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { nonWrappedLayouts } from '../../utils';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
 function float(layout) {
@@ -19,11 +19,17 @@ function float(layout) {
       return 'none';
   }
 }
-function getWidthIfFullWidthMode(width) {
-  return width > akEditorFullWidthLayoutWidth ? '100%' : "".concat(width, "px");
+function getWidthIfFullWidthMode(originalWidth, containerWidth, isInsideOfInlineExtension) {
+  if (isInsideOfInlineExtension) {
+    return originalWidth > akEditorFullWidthLayoutWidth ? "".concat(Math.min(containerWidth, akEditorFullWidthLayoutWidth), "px") : "".concat(originalWidth, "px");
+  }
+  return originalWidth > akEditorFullWidthLayoutWidth ? '100%' : "".concat(originalWidth, "px");
 }
-function getWidthIfDefaultMode(width) {
-  return width > akEditorFullPageMaxWidth ? '100%' : "".concat(width, "px");
+function getWidthIfDefaultMode(originalWidth, containerWidth, isInsideOfInlineExtension) {
+  if (isInsideOfInlineExtension) {
+    return originalWidth > akEditorFullPageMaxWidth ? "".concat(Math.min(containerWidth, akEditorDefaultLayoutWidth), "px") : "".concat(originalWidth, "px");
+  }
+  return originalWidth > akEditorFullPageMaxWidth ? '100%' : "".concat(originalWidth, "px");
 }
 
 /**
@@ -37,6 +43,7 @@ export function calcLegacyWidth(layout, width) {
   var containerWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var fullWidthMode = arguments.length > 3 ? arguments[3] : undefined;
   var isResized = arguments.length > 4 ? arguments[4] : undefined;
+  var isInsideOfInlineExtension = arguments.length > 5 ? arguments[5] : undefined;
   switch (layout) {
     case 'align-start':
     case 'align-end':
@@ -44,11 +51,37 @@ export function calcLegacyWidth(layout, width) {
     case 'wrap-left':
       return width > containerWidth / 2 ? 'calc(50% - 12px)' : "".concat(width, "px");
     case 'wide':
-      return calcWideWidth(containerWidth);
+      return isInsideOfInlineExtension ? calcWideWidth(containerWidth, Infinity, "".concat(containerWidth, "px")) : calcWideWidth(containerWidth);
+    case 'full-width':
+      return calcBreakoutWidth(layout, containerWidth);
+    default:
+      return isResized ? "".concat(width, "px") : fullWidthMode ? getWidthIfFullWidthMode(width, containerWidth, isInsideOfInlineExtension) : getWidthIfDefaultMode(width, containerWidth, isInsideOfInlineExtension);
+  }
+}
+
+/**
+ * Calculates the image width for non-resized images.
+ *
+ * If an image has not been resized using the pctWidth attribute,
+ * then an image in wide or full-width can not be wider than the image's
+ * original width.
+ */
+export function calcLegacyWidthForInline(layout, width) {
+  var containerWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var fullWidthMode = arguments.length > 3 ? arguments[3] : undefined;
+  var isResized = arguments.length > 4 ? arguments[4] : undefined;
+  switch (layout) {
+    case 'align-start':
+    case 'align-end':
+    case 'wrap-right':
+    case 'wrap-left':
+      return width > containerWidth / 2 ? 'calc(50% - 12px)' : "".concat(width, "px");
+    case 'wide':
+      return calcWideWidth(containerWidth, Infinity, "".concat(containerWidth, "px"));
     case 'full-width':
       return calcBreakoutWidth(layout, containerWidth);
     default:
-      return isResized ? "".concat(width, "px") : fullWidthMode ? getWidthIfFullWidthMode(width) : getWidthIfDefaultMode(width);
+      return isResized ? "".concat(width, "px") : fullWidthMode ? getWidthIfFullWidthMode(width, containerWidth) : getWidthIfDefaultMode(width, containerWidth);
   }
 }
 
@@ -113,8 +146,10 @@ export var MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref
     width = _ref.width,
     isExtendedResizeExperienceOn = _ref.isExtendedResizeExperienceOn,
     _ref$isNestedNode = _ref.isNestedNode,
-    isNestedNode = _ref$isNestedNode === void 0 ? false : _ref$isNestedNode;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] &,\n  [data-panel-type] &,\n  li & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n\n  ", "\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n\n  float: ", ";\n  margin: ", ";\n\n  &[class*='not-resizing'] {\n    ", "\n  }\n\n  ", ";\n"])), isExtendedResizeExperienceOn ? "".concat(mediaSingleWidth || width, "px") : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' &&
+    isNestedNode = _ref$isNestedNode === void 0 ? false : _ref$isNestedNode,
+    _ref$isInsideOfInline = _ref.isInsideOfInlineExtension,
+    isInsideOfInlineExtension = _ref$isInsideOfInline === void 0 ? false : _ref$isInsideOfInline;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] &,\n  [data-panel-type] &,\n  li & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n\n  ", "\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n\n  float: ", ";\n  margin: ", ";\n\n  &[class*='not-resizing'] {\n    ", "\n  }\n\n  ", ";\n"])), isExtendedResizeExperienceOn ? "".concat(mediaSingleWidth || width, "px") : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized, isInsideOfInlineExtension), layout === 'full-width' &&
   /* This causes issues for new experience where we don't strip layout attributes
    when copying top-level node and pasting into a table/layout,
    because full-width layout will remain, causing node to be edge-to-edge */

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

@@ -6,9 +6,8 @@ import { BODIED_EXT_MBE_MARGIN_TOP } from '../../styles';
 
 // Wraps the navigation bar and extensionFrames
 var mbeExtensionContainer = css({
-  background: 'transpaent !important',
+  background: 'transparent !important',
   'padding:': {
-    bottom: "var(--ds-space-100, 8px)".concat(" !important"),
     left: "var(--ds-space-100, 8px)".concat(" !important"),
     right: "var(--ds-space-100, 8px)".concat(" !important")
   },
@@ -60,12 +59,6 @@ var extensionFrameContent = css({
   },
   '.extensionView-content-wrap': {
     marginTop: "var(--ds-space-100, 8px)".concat(" !important")
-  },
-  '.decisionItemView-content-wrap': {
-    marginTop: '0px !important'
-  },
-  '.decisionItemView-content-wrap > [data-decision-wrapper]': {
-    marginTop: '0px !important'
   }
 });
 export var sharedMultiBodiedExtensionStyles = {

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

@@ -1,16 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _templateObject;
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /** @jsx jsx */
-import React from 'react';
+import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { WidthObserver } from '@atlaskit/width-detector';
@@ -36,44 +28,34 @@ export function createWidthContext() {
 export var WidthContext = /*#__PURE__*/React.createContext(createWidthContext());
 var Provider = WidthContext.Provider,
   Consumer = WidthContext.Consumer;
-export var WidthProvider = /*#__PURE__*/function (_React$Component) {
-  _inherits(WidthProvider, _React$Component);
-  var _super = _createSuper(WidthProvider);
-  function WidthProvider(props) {
-    var _this;
-    _classCallCheck(this, WidthProvider);
-    _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      width: 0
-    });
-    _defineProperty(_assertThisInitialized(_this), "setWidth", rafSchedule(function (width) {
-      // Ignore changes that are less than SCROLLBAR_WIDTH, otherwise it can cause infinite re-scaling
-      if (Math.abs(_this.state.width - width) < SCROLLBAR_WIDTH) {
-        return;
-      }
-      _this.setState({
-        width: width
-      });
-    }));
-    if (typeof document !== 'undefined') {
-      _this.state.width = document.body.offsetWidth;
+export var WidthProvider = function WidthProvider(_ref) {
+  var className = _ref.className,
+    shouldCheckExistingValue = _ref.shouldCheckExistingValue,
+    children = _ref.children;
+  var existingContextValue = React.useContext(WidthContext);
+  var _React$useState = React.useState(typeof document !== 'undefined' ? document.body.offsetWidth : 0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    width = _React$useState2[0],
+    setWidth = _React$useState2[1];
+  var providerValue = React.useMemo(function () {
+    return createWidthContext(width);
+  }, [width]);
+  var updateWidth = rafSchedule(function (nextWidth) {
+    // Ignore changes that are less than SCROLLBAR_WIDTH, otherwise it can cause infinite re-scaling
+    if (Math.abs(width - nextWidth) < SCROLLBAR_WIDTH) {
+      return;
     }
-    return _this;
-  }
-  _createClass(WidthProvider, [{
-    key: "render",
-    value: function render() {
-      return jsx("div", {
-        css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          position: relative;\n          width: 100%;\n        "]))),
-        className: this.props.className
-      }, jsx(WidthObserver, {
-        setWidth: this.setWidth,
-        offscreen: true
-      }), jsx(Provider, {
-        value: createWidthContext(this.state.width)
-      }, this.props.children));
-    }
-  }]);
-  return WidthProvider;
-}(React.Component);
+    setWidth(nextWidth);
+  });
+  var skipWidthDetection = shouldCheckExistingValue && existingContextValue.width > 0;
+  return jsx("div", {
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: relative;\n        width: 100%;\n      "]))),
+    className: className
+  }, !skipWidthDetection && jsx(Fragment, null, jsx(WidthObserver, {
+    setWidth: updateWidth,
+    offscreen: true
+  }), jsx(Provider, {
+    value: providerValue
+  }, children)), skipWidthDetection && children);
+};
 export { Consumer as WidthConsumer };

package/dist/esm/ui/index.js

@@ -8,7 +8,7 @@ export { default as UnsupportedBlock } from './UnsupportedBlock';
 export { default as UnsupportedInline } from './UnsupportedInline';
 export { BaseTheme, mapBreakpointToLayoutMaxWidth } from './BaseTheme';
 export { default as withOuterListeners } from './with-outer-listeners';
-export { WidthContext, WidthConsumer, WidthProvider, getBreakpoint } from './WidthProvider';
+export { WidthContext, WidthConsumer, WidthProvider, createWidthContext, getBreakpoint } from './WidthProvider';
 export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
 export { shadowObserverClassNames, ShadowObserver } from './OverflowShadow/shadowObserver';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';

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

@@ -1,13 +1,14 @@
 /** @jsx jsx */
-import React, { Component } from 'react';
+import React from 'react';
 import { jsx } from '@emotion/react';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { ExtensionsPluginInjectionAPI } from '../../types';
 export interface Props {
     node: PmNode;
+    pluginInjectionApi: ExtensionsPluginInjectionAPI;
     children?: React.ReactNode;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
 }
-export default class InlineExtension extends Component<Props, any> {
-    render(): jsx.JSX.Element;
-}
+declare const InlineExtension: (props: Props) => jsx.JSX.Element;
+export default InlineExtension;

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

@@ -1 +1,2 @@
 export declare const wrapperStyle: import("@emotion/react").SerializedStyles;
+export declare const inlineWrapperStyels: import("@emotion/react").SerializedStyles;

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

@@ -19,6 +19,7 @@ type Props = {
     pluginInjectionApi?: ExtensionsPluginInjectionAPI;
     editorAppearance?: EditorAppearance;
     showMacroInteractionDesignUpdates?: boolean;
+    isNodeSelected?: boolean;
 };
 declare const MultiBodiedExtension: (props: Props & OverflowShadowProps) => jsx.JSX.Element;
 /**

package/dist/types/preset/plugin-injection-api.d.ts

@@ -39,7 +39,7 @@ export declare class EditorPluginInjectionAPI implements PluginInjectionAPIDefin
     private commandsAPI;
     private plugins;
     constructor({ getEditorState, getEditorView }: PluginInjectionAPIProps);
-    api<T extends NextEditorPlugin<any, any>>(): import("../types/next-editor-plugin").PublicPluginAPI<[NextEditorPlugin<T extends import("../types/next-editor-plugin").NextEditorPluginFunctionOptionalConfigDefinition<infer Name extends string, any, any> ? Name : never, T extends NextEditorPlugin<any, infer Metadata extends import("../types/next-editor-plugin").NextEditorPluginMetadata> ? Metadata : never>, ..."dependencies" extends keyof (T extends NextEditorPlugin<any, infer Metadata extends import("../types/next-editor-plugin").NextEditorPluginMetadata> ? Metadata : never) ? (T extends NextEditorPlugin<any, infer Metadata extends import("../types/next-editor-plugin").NextEditorPluginMetadata> ? Metadata : never)["dependencies"] extends (import("../types/next-editor-plugin").NextEditorPluginFunctionOptionalConfigDefinition<any, any, any> | import("../types/next-editor-plugin").OptionalPlugin<import("../types/next-editor-plugin").NextEditorPluginFunctionOptionalConfigDefinition<any, any, any>>)[] ? Exclude<(T extends NextEditorPlugin<any, infer Metadata extends import("../types/next-editor-plugin").NextEditorPluginMetadata> ? Metadata : never)["dependencies"], undefined> : [] : []]>;
+    api<T extends NextEditorPlugin<any, any>>(): import("../types/next-editor-plugin").PublicPluginAPI<[NextEditorPlugin<T extends import("../types/next-editor-plugin").NextEditorPluginFunctionOptionalConfigDefinition<infer Name extends string, any, any> ? Name : never, T extends NextEditorPlugin<any, infer Metadata_1 extends import("../types/next-editor-plugin").NextEditorPluginMetadata> ? Metadata_1 : never>, ..."dependencies" extends keyof (T extends NextEditorPlugin<any, infer Metadata_1 extends import("../types/next-editor-plugin").NextEditorPluginMetadata> ? Metadata_1 : never) ? (T extends NextEditorPlugin<any, infer Metadata_1 extends import("../types/next-editor-plugin").NextEditorPluginMetadata> ? Metadata_1 : never)["dependencies"] extends (import("../types/next-editor-plugin").NextEditorPluginFunctionOptionalConfigDefinition<any, any, any> | import("../types/next-editor-plugin").OptionalPlugin<import("../types/next-editor-plugin").NextEditorPluginFunctionOptionalConfigDefinition<any, any, any>>)[] ? Exclude<(T extends NextEditorPlugin<any, infer Metadata_1 extends import("../types/next-editor-plugin").NextEditorPluginMetadata> ? Metadata_1 : never)["dependencies"], undefined> : [] : []]>;
     onEditorViewUpdated: ({ newEditorState, oldEditorState, }: EditorStateDiff) => void;
     onEditorPluginInitialized: (plugin: NextEditorPluginInitializedType) => void;
     private addPlugin;

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

@@ -211,6 +211,14 @@ export type FeatureFlags = {
      * @default false
      */
     tableSelector?: boolean;
+    /**
+     * @description
+     * Enables table to scale in the same way as renderer
+     *
+     * @see https://product-fabric.atlassian.net/browse/ED-22364
+     * @default false
+     */
+    tablePreserveWidth?: boolean;
     /**
      * @description
      * Enables commenting on media
@@ -219,6 +227,14 @@ export type FeatureFlags = {
      * @default false
      */
     commentsOnMedia?: boolean;
+    /**
+     * @description
+     * Enables macro interaction visual updates
+     *
+     * @see https://product-fabric.atlassian.net/browse/PGXT-4910
+     * @default false
+     */
+    macroInteractionUpdates?: boolean;
 };
 export type FeatureFlagKey = keyof FeatureFlags;
 export type GetEditorFeatureFlags = () => FeatureFlags;

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

@@ -23,6 +23,7 @@ export interface Props {
     fullWidthMode?: boolean;
     hasFallbackContainer?: boolean;
     handleMediaSingleRef?: React.RefObject<HTMLDivElement>;
+    isInsideOfInlineExtension?: boolean;
 }
 export type { MediaSingleWidthType, MediaSingleSize };
-export default function MediaSingle({ layout, width, height, containerWidth, isLoading, pctWidth, size, className, children: propsChildren, nodeType, fullWidthMode, lineLength: editorWidth, hasFallbackContainer, handleMediaSingleRef, }: Props): jsx.JSX.Element;
+export default function MediaSingle({ layout, width, height, containerWidth, isLoading, pctWidth, size, className, children: propsChildren, nodeType, fullWidthMode, lineLength: editorWidth, hasFallbackContainer, handleMediaSingleRef, isInsideOfInlineExtension, }: Props): jsx.JSX.Element;

package/dist/types/ui/MediaSingle/styled.d.ts

@@ -10,7 +10,15 @@ import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema'
  * then an image in wide or full-width can not be wider than the image's
  * original width.
  */
-export declare function calcLegacyWidth(layout: MediaSingleLayout, width: number, containerWidth?: number, fullWidthMode?: boolean, isResized?: boolean): string;
+export declare function calcLegacyWidth(layout: MediaSingleLayout, width: number, containerWidth?: number, fullWidthMode?: boolean, isResized?: boolean, isInsideOfInlineExtension?: boolean): string;
+/**
+ * Calculates the image width for non-resized images.
+ *
+ * If an image has not been resized using the pctWidth attribute,
+ * then an image in wide or full-width can not be wider than the image's
+ * original width.
+ */
+export declare function calcLegacyWidthForInline(layout: MediaSingleLayout, width: number, containerWidth?: number, fullWidthMode?: boolean, isResized?: boolean): string;
 /**
  * Calculates the image width for previously resized images.
  *
@@ -34,12 +42,13 @@ export interface MediaSingleWrapperProps {
     innerRef?: ((elem: HTMLDivElement) => void) | RefObject<HTMLDivElement>;
     isExtendedResizeExperienceOn?: boolean;
     isNestedNode?: boolean;
+    isInsideOfInlineExtension?: boolean;
 }
 /**
  * Can't use `.attrs` to handle highly dynamic styles because we are still
  * supporting `styled-components` v1.
  */
-export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, mediaSingleWidth, width, isExtendedResizeExperienceOn, isNestedNode, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
+export declare const MediaSingleDimensionHelper: ({ containerWidth, fullWidthMode, isResized, layout, mediaSingleWidth, width, isExtendedResizeExperienceOn, isNestedNode, isInsideOfInlineExtension, }: MediaSingleWrapperProps) => import("@emotion/react").SerializedStyles;
 export interface MediaWrapperProps {
     paddingBottom?: string;
     height?: number;

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

@@ -15,15 +15,8 @@ export type WidthProviderState = {
 };
 type WidthProviderProps = {
     className?: string;
+    shouldCheckExistingValue?: boolean;
+    children?: React.ReactNode;
 };
-export declare class WidthProvider extends React.Component<WidthProviderProps, WidthProviderState> {
-    state: {
-        width: number;
-    };
-    constructor(props: any);
-    render(): jsx.JSX.Element;
-    setWidth: ((width: number) => void) & {
-        cancel(): void;
-    };
-}
+export declare const WidthProvider: ({ className, shouldCheckExistingValue, children, }: WidthProviderProps) => jsx.JSX.Element;
 export { Consumer as WidthConsumer };

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

@@ -13,7 +13,7 @@ export { BaseTheme, mapBreakpointToLayoutMaxWidth } from './BaseTheme';
 export { default as withOuterListeners } from './with-outer-listeners';
 export type { WithOutsideClickProps } from './with-outer-listeners';
 export type { CardEventClickHandler, CardSurroundings, EventHandlers, LinkEventClickHandler, MentionEventHandler, MentionEventHandlers, SmartCardEventClickHandler, } from './EventHandlers';
-export { WidthContext, WidthConsumer, WidthProvider, getBreakpoint, } from './WidthProvider';
+export { WidthContext, WidthConsumer, WidthProvider, createWidthContext, getBreakpoint, } from './WidthProvider';
 export type { WidthConsumerContext, Breakpoints } from './WidthProvider';
 export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
 export type { OverflowShadowOptions, OverflowShadowProps, OverflowShadowState, } from './OverflowShadow';

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

@@ -1,13 +1,14 @@
 /** @jsx jsx */
-import React, { Component } from 'react';
+import React from 'react';
 import { jsx } from '@emotion/react';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { ExtensionsPluginInjectionAPI } from '../../types';
 export interface Props {
     node: PmNode;
+    pluginInjectionApi: ExtensionsPluginInjectionAPI;
     children?: React.ReactNode;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
 }
-export default class InlineExtension extends Component<Props, any> {
-    render(): jsx.JSX.Element;
-}
+declare const InlineExtension: (props: Props) => jsx.JSX.Element;
+export default InlineExtension;

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

@@ -1 +1,2 @@
 export declare const wrapperStyle: import("@emotion/react").SerializedStyles;
+export declare const inlineWrapperStyels: import("@emotion/react").SerializedStyles;

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

@@ -19,6 +19,7 @@ type Props = {
     pluginInjectionApi?: ExtensionsPluginInjectionAPI;
     editorAppearance?: EditorAppearance;
     showMacroInteractionDesignUpdates?: boolean;
+    isNodeSelected?: boolean;
 };
 declare const MultiBodiedExtension: (props: Props & OverflowShadowProps) => jsx.JSX.Element;
 /**

package/dist/types-ts4.5/preset/plugin-injection-api.d.ts

@@ -40,8 +40,8 @@ export declare class EditorPluginInjectionAPI implements PluginInjectionAPIDefin
     private plugins;
     constructor({ getEditorState, getEditorView }: PluginInjectionAPIProps);
     api<T extends NextEditorPlugin<any, any>>(): import("../types/next-editor-plugin").PublicPluginAPI<[
-        NextEditorPlugin<T extends import("../types/next-editor-plugin").NextEditorPluginFunctionOptionalConfigDefinition<infer Name extends string, any, any> ? Name : never, T extends NextEditorPlugin<any, infer Metadata extends import("../types/next-editor-plugin").NextEditorPluginMetadata> ? Metadata : never>,
-        ..."dependencies" extends keyof (T extends NextEditorPlugin<any, infer Metadata extends import("../types/next-editor-plugin").NextEditorPluginMetadata> ? Metadata : never) ? (T extends NextEditorPlugin<any, infer Metadata extends import("../types/next-editor-plugin").NextEditorPluginMetadata> ? Metadata : never)["dependencies"] extends (import("../types/next-editor-plugin").NextEditorPluginFunctionOptionalConfigDefinition<any, any, any> | import("../types/next-editor-plugin").OptionalPlugin<import("../types/next-editor-plugin").NextEditorPluginFunctionOptionalConfigDefinition<any, any, any>>)[] ? Exclude<(T extends NextEditorPlugin<any, infer Metadata extends import("../types/next-editor-plugin").NextEditorPluginMetadata> ? Metadata : never)["dependencies"], undefined> : [
+        NextEditorPlugin<T extends import("../types/next-editor-plugin").NextEditorPluginFunctionOptionalConfigDefinition<infer Name extends string, any, any> ? Name : never, T extends NextEditorPlugin<any, infer Metadata_1 extends import("../types/next-editor-plugin").NextEditorPluginMetadata> ? Metadata_1 : never>,
+        ..."dependencies" extends keyof (T extends NextEditorPlugin<any, infer Metadata_1 extends import("../types/next-editor-plugin").NextEditorPluginMetadata> ? Metadata_1 : never) ? (T extends NextEditorPlugin<any, infer Metadata_1 extends import("../types/next-editor-plugin").NextEditorPluginMetadata> ? Metadata_1 : never)["dependencies"] extends (import("../types/next-editor-plugin").NextEditorPluginFunctionOptionalConfigDefinition<any, any, any> | import("../types/next-editor-plugin").OptionalPlugin<import("../types/next-editor-plugin").NextEditorPluginFunctionOptionalConfigDefinition<any, any, any>>)[] ? Exclude<(T extends NextEditorPlugin<any, infer Metadata_1 extends import("../types/next-editor-plugin").NextEditorPluginMetadata> ? Metadata_1 : never)["dependencies"], undefined> : [
         ] : [
         ]
     ]>;

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

@@ -211,6 +211,14 @@ export type FeatureFlags = {
      * @default false
      */
     tableSelector?: boolean;
+    /**
+     * @description
+     * Enables table to scale in the same way as renderer
+     *
+     * @see https://product-fabric.atlassian.net/browse/ED-22364
+     * @default false
+     */
+    tablePreserveWidth?: boolean;
     /**
      * @description
      * Enables commenting on media
@@ -219,6 +227,14 @@ export type FeatureFlags = {
      * @default false
      */
     commentsOnMedia?: boolean;
+    /**
+     * @description
+     * Enables macro interaction visual updates
+     *
+     * @see https://product-fabric.atlassian.net/browse/PGXT-4910
+     * @default false
+     */
+    macroInteractionUpdates?: boolean;
 };
 export type FeatureFlagKey = keyof FeatureFlags;
 export type GetEditorFeatureFlags = () => FeatureFlags;