@atlaskit/editor-common 70.1.3 → 70.2.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @atlaskit/editor-common
 
+## 70.2.0
+
+### Minor Changes
+
+- [`30e8425f7d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/30e8425f7d6) - [ux] ED-15706 Reenable copy button on editor-plugin-table. Added property copyButton to floatingToolbarConfig.
+- [`90c44a68da2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/90c44a68da2) - Removed editor-core table plugin and replaced with new `editor-plugin-table` package. This change required adding copying new table changes from editor-core to the new table package, moving IconTable to shared package, and creating new entry-points from editor-plugin-table. `getPluginState` from `packages/editor/editor-plugin-table/src/plugins/table/pm-plugins/table-resizing` was also exported.
+
+  [ED-15674][ed15739] [ED-15633]
+
+- [`61cd2188e62`](https://bitbucket.org/atlassian/atlassian-frontend/commits/61cd2188e62) - [ux] ED-15405 added horizontal scrolling to floating toolbar in case of overflow
+
+### Patch Changes
+
+- [`79a48f1c6b5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/79a48f1c6b5) - Adds fragmentLocalId to ExtensionParams type.
+- [`3f7900cbf37`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3f7900cbf37) - [ux] ED-14993 added better support for codeblocks inside lists and gap cursor selection inside lists:
+
+  - made list markers visible in safari (desktop and mobile) when list contains codeblocks;
+  - fixed bug so users can now set gapcursor next to codeblock by clicking or touching (mobile) the list marker;
+  - fixed bug so when users have gapcursor next to a codeblock, they can still toggle (or untoggle) it into a list;
+  - fixed margins for codeblocks in lists;
+
+- [`916c3b17290`](https://bitbucket.org/atlassian/atlassian-frontend/commits/916c3b17290) - ED-15573 re-enable getParticipantsCount in analytics payload
+- [`e7836c150bb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7836c150bb) - Re-enable Performance metric for ReactNodeView, WithPluginState
+- [`b2b98eca8cc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b2b98eca8cc) - ED-14814 Add "outdatedBrowser" attribute into analytics error payload, add browser check and expose the function "isOutdatedBrowser()"
+- [`51e84999643`](https://bitbucket.org/atlassian/atlassian-frontend/commits/51e84999643) - ED-15381 - Patch table / layout CSS to fix issue of ProseMirror gapcursor within the cell
+- [`edb93baa953`](https://bitbucket.org/atlassian/atlassian-frontend/commits/edb93baa953) - Moved sendLogs to editor-common. Re-exported in editor-core and import sendLogs from editor-common in editor-plugin-table package.
+- [`184d3cf7ce6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/184d3cf7ce6) - Preventing error being logged to the console if the consumer of the Editor component does not have IntlProvider in the component hierarchy.
+- [`8c16cb97a11`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8c16cb97a11) - ED-12676 cleanup useUnpredictableInputRule feature flag
+- [`47f1c7fff80`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47f1c7fff80) - [ux] ED-14991 rework extension breakout to share logic with breakout mark views. Fixes an issue where iframes inside bodied extensions that were set to full-width or wide would be blurry.
+- [`ab072299e05`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ab072299e05) - ED-15519 - Extensions used as data sources will now display a delete confirmation dialog
+- [`992ed2b7e2a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/992ed2b7e2a) - ED-15510 Fixes animation when resizing breakout
+- [`3cecda14f87`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3cecda14f87) - [ED-15847] Changes to fix a regression caused in ED-15805 Id attribute given to identify type of floating toolbars
+- Updated dependencies
+
 ## 70.1.3
 
 ### Patch Changes

package/dist/cjs/react-node-view/index.js

@@ -23,6 +23,8 @@ var _eventDispatcher = require("../event-dispatcher");
 
 var _ErrorBoundary = require("../ui/ErrorBoundary");
 
+var _utils = require("../utils");
+
 var _analytics2 = require("../utils/analytics");
 
 var ReactNodeView = /*#__PURE__*/function () {
@@ -91,26 +93,26 @@ var ReactNodeView = /*#__PURE__*/function () {
       // difference between them and it kills the nodeView
 
 
-      this.domRef.classList.add("".concat(this.node.type.name, "View-content-wrap")); // TODO: ED-15580
-      //const {
-      //  samplingRate,
-      //  slowThreshold,
-      //  trackingEnabled,
-      //} = getPerformanceOptions(this.view);
-      //trackingEnabled &&
-      //  startMeasureReactNodeViewRendered({ nodeTypeName: this.node.type.name });
+      this.domRef.classList.add("".concat(this.node.type.name, "View-content-wrap"));
+
+      var _getPerformanceOption = (0, _utils.getPerformanceOptions)(this.view),
+          samplingRate = _getPerformanceOption.samplingRate,
+          slowThreshold = _getPerformanceOption.slowThreshold,
+          trackingEnabled = _getPerformanceOption.trackingEnabled;
 
+      trackingEnabled && (0, _utils.startMeasureReactNodeViewRendered)({
+        nodeTypeName: this.node.type.name
+      });
       this.renderReactComponent(function () {
         return _this2.render(_this2.reactComponentProps, _this2.handleRef);
-      }); //trackingEnabled &&
-      //  stopMeasureReactNodeViewRendered({
-      //    nodeTypeName: this.node.type.name,
-      //    dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
-      //    editorState: this.view.state,
-      //    samplingRate,
-      //    slowThreshold,
-      //  });
-
+      });
+      trackingEnabled && (0, _utils.stopMeasureReactNodeViewRendered)({
+        nodeTypeName: this.node.type.name,
+        dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
+        editorState: this.view.state,
+        samplingRate: samplingRate,
+        slowThreshold: slowThreshold
+      });
       return this;
     }
   }, {

package/dist/cjs/styles/index.js

@@ -99,6 +99,12 @@ Object.defineProperty(exports, "calcTableWidth", {
     return _table.calcTableWidth;
   }
 });
+Object.defineProperty(exports, "codeBlockInListSafariFix", {
+  enumerable: true,
+  get: function get() {
+    return _codeBlock.codeBlockInListSafariFix;
+  }
+});
 Object.defineProperty(exports, "codeBlockSharedStyles", {
   enumerable: true,
   get: function get() {
@@ -141,6 +147,12 @@ Object.defineProperty(exports, "linkSharedStyle", {
     return _link.linkSharedStyle;
   }
 });
+Object.defineProperty(exports, "listPaddingLeftMarkerSpace", {
+  enumerable: true,
+  get: function get() {
+    return _lists.listPaddingLeftMarkerSpace;
+  }
+});
 Object.defineProperty(exports, "listsSharedStyles", {
   enumerable: true,
   get: function get() {

package/dist/cjs/styles/shared/code-block.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.codeBlockSharedStyles = exports.CodeBlockSharedCssClassName = void 0;
+exports.codeBlockSharedStyles = exports.codeBlockInListSafariFix = exports.CodeBlockSharedCssClassName = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -21,7 +21,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 var CodeBlockSharedCssClassName = {
   CODEBLOCK_CONTAINER: 'code-block',
@@ -57,4 +57,6 @@ var codeBlockSharedStyles = function codeBlockSharedStyles(props) {
   })(props), (0, _constants.borderRadius)(), (0, _constants.gridSize)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()));
 };
 
-exports.codeBlockSharedStyles = codeBlockSharedStyles;
+exports.codeBlockSharedStyles = codeBlockSharedStyles;
+var codeBlockInListSafariFix = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ::before {\n    content: ' ';\n    line-height: ", ";\n  }\n\n  > p:first-child,\n  > .code-block:first-child,\n  > .ProseMirror-gapcursor:first-child + .code-block {\n    margin-top: -", "em !important;\n  }\n"])), _editorSharedStyles.akEditorLineHeight, _editorSharedStyles.akEditorLineHeight);
+exports.codeBlockInListSafariFix = codeBlockInListSafariFix;

package/dist/cjs/styles/shared/lists.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.listsSharedStyles = void 0;
+exports.listsSharedStyles = exports.listPaddingLeftMarkerSpace = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -17,5 +17,7 @@ var _browser = _interopRequireDefault(require("../../utils/browser"));
 
 var _templateObject;
 
-var listsSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* =============== INDENTATION SPACING ========= */\n\n  ul,\n  ol {\n    box-sizing: border-box;\n    padding-left: 24px;\n\n    /*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n    li p:empty,\n    li p > span:empty {\n      ", "\n    }\n  }\n\n  ", ", ", " {\n    /*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n    // For older browsers the do not support flow-root.\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    display: table;\n    display: flow-root;\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n  }\n\n  /* =============== INDENTATION AESTHETICS ========= */\n\n  /**\n        We support nested lists up to six levels deep.\n    **/\n\n  /* LEGACY LISTS */\n\n  ul,\n  ul ul ul ul {\n    list-style-type: disc;\n  }\n\n  ul ul,\n  ul ul ul ul ul {\n    list-style-type: circle;\n  }\n\n  ul ul ul,\n  ul ul ul ul ul ul {\n    list-style-type: square;\n  }\n\n  ol,\n  ol ol ol ol {\n    list-style-type: decimal;\n  }\n  ol ol,\n  ol ol ol ol ol {\n    list-style-type: lower-alpha;\n  }\n  ol ol ol,\n  ol ol ol ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  /* PREDICTABLE LISTS */\n\n  ol[data-indent-level='1'],\n  ol[data-indent-level='4'] {\n    list-style-type: decimal;\n  }\n\n  ol[data-indent-level='2'],\n  ol[data-indent-level='5'] {\n    list-style-type: lower-alpha;\n  }\n\n  ol[data-indent-level='3'],\n  ol[data-indent-level='6'] {\n    list-style-type: lower-roman;\n  }\n\n  ul[data-indent-level='1'],\n  ul[data-indent-level='4'] {\n    list-style-type: disc;\n  }\n\n  ul[data-indent-level='2'],\n  ul[data-indent-level='5'] {\n    list-style-type: circle;\n  }\n\n  ul[data-indent-level='3'],\n  ul[data-indent-level='6'] {\n    list-style-type: square;\n  }\n"])), _browser.default.gecko ? 'display: inline-block;' : '', _adfSchema.orderedListSelector, _adfSchema.bulletListSelector);
+var listPaddingLeftMarkerSpace = 24;
+exports.listPaddingLeftMarkerSpace = listPaddingLeftMarkerSpace;
+var listsSharedStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* =============== INDENTATION SPACING ========= */\n\n  ul,\n  ol {\n    box-sizing: border-box;\n    padding-left: ", "px;\n\n    /*\n    Firefox does not handle empty block element inside li tag.\n    If there is not block element inside li tag,\n      then firefox sets inherited height to li\n    However, if there is any block element and if it's empty\n      (or has empty inline element) then\n    firefox sets li tag height to zero.\n    More details at\n    https://product-fabric.atlassian.net/wiki/spaces/~455502413/pages/3149365890/ED-14110+Investigation\n    */\n    li p:empty,\n    li p > span:empty {\n      ", "\n    }\n  }\n\n  ", ", ", " {\n    /*\n      Ensures list item content adheres to the list's margin instead\n      of filling the entire block row. This is important to allow\n      clicking interactive elements which are floated next to a list.\n\n      For some history and context on this block, see PRs related to tickets.:\n      @see ED-6551 - original issue.\n      @see ED-7015 - follow up issue.\n      @see ED-7447 - flow-root change.\n\n      We use 'display: table' (old clear fix / new block formatting context hack)\n      for older browsers and 'flow-root' for modern browsers.\n\n      @see https://css-tricks.com/display-flow-root/\n    */\n    // For older browsers the do not support flow-root.\n    /* stylelint-disable declaration-block-no-duplicate-properties */\n    display: table;\n    display: flow-root;\n    /* stylelint-enable declaration-block-no-duplicate-properties */\n  }\n\n  /* =============== INDENTATION AESTHETICS ========= */\n\n  /**\n        We support nested lists up to six levels deep.\n    **/\n\n  /* LEGACY LISTS */\n\n  ul,\n  ul ul ul ul {\n    list-style-type: disc;\n  }\n\n  ul ul,\n  ul ul ul ul ul {\n    list-style-type: circle;\n  }\n\n  ul ul ul,\n  ul ul ul ul ul ul {\n    list-style-type: square;\n  }\n\n  ol,\n  ol ol ol ol {\n    list-style-type: decimal;\n  }\n  ol ol,\n  ol ol ol ol ol {\n    list-style-type: lower-alpha;\n  }\n  ol ol ol,\n  ol ol ol ol ol ol {\n    list-style-type: lower-roman;\n  }\n\n  /* PREDICTABLE LISTS */\n\n  ol[data-indent-level='1'],\n  ol[data-indent-level='4'] {\n    list-style-type: decimal;\n  }\n\n  ol[data-indent-level='2'],\n  ol[data-indent-level='5'] {\n    list-style-type: lower-alpha;\n  }\n\n  ol[data-indent-level='3'],\n  ol[data-indent-level='6'] {\n    list-style-type: lower-roman;\n  }\n\n  ul[data-indent-level='1'],\n  ul[data-indent-level='4'] {\n    list-style-type: disc;\n  }\n\n  ul[data-indent-level='2'],\n  ul[data-indent-level='5'] {\n    list-style-type: circle;\n  }\n\n  ul[data-indent-level='3'],\n  ul[data-indent-level='6'] {\n    list-style-type: square;\n  }\n"])), listPaddingLeftMarkerSpace, _browser.default.gecko ? 'display: inline-block;' : '', _adfSchema.orderedListSelector, _adfSchema.bulletListSelector);
 exports.listsSharedStyles = listsSharedStyles;

package/dist/cjs/styles/shared/table.js

@@ -61,7 +61,7 @@ var TableSharedCssClassName = {
 exports.TableSharedCssClassName = TableSharedCssClassName;
 
 var tableSharedStyle = function tableSharedStyle(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-of-type > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  .", " > table {\n    margin: ", "px 0 0 0;\n  }\n\n  .", " > table,\n  .", " > table {\n    margin: ", "px ", "px 0 0;\n  }\n\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: ", ";\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > :first-child:not(style),\n        > style:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-of-type + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-of-type + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]) {\n          .code-block {\n            background-image: ", ";\n            background-attachment: local, scroll, scroll;\n            background-position: 100% 0, 100% 0, 0 0;\n            background-color: ", ";\n\n            .line-number-gutter {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableMarginTop, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, (0, _components.themed)({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    position: relative;\n    margin: 0 auto ", "px;\n    box-sizing: border-box;\n\n    /**\n     * Fix block top alignment inside table cells.\n     */\n    .decisionItemView-content-wrap:first-of-type > div {\n      margin-top: 0;\n    }\n  }\n  .", "[data-number-column='true'] {\n    padding-left: ", "px;\n    clear: both;\n  }\n  .", " > table {\n    margin: ", "px 0 0 0;\n  }\n\n  .", " > table,\n  .", " > table {\n    margin: ", "px ", "px 0 0;\n  }\n\n  /* avoid applying styles to nested tables (possible via extensions) */\n  .", " > table,\n  .", " > table,\n  .", " > table {\n    border-collapse: collapse;\n    border: ", "px solid\n      ", ";\n    table-layout: fixed;\n    font-size: 1em;\n    width: 100%;\n\n    &[data-autosize='true'] {\n      table-layout: auto;\n    }\n\n    & {\n      * {\n        box-sizing: border-box;\n      }\n      hr {\n        box-sizing: content-box;\n      }\n\n      tbody {\n        border-bottom: none;\n      }\n      th td {\n        background-color: ", ";\n      }\n      th,\n      td {\n        min-width: ", "px;\n        font-weight: normal;\n        vertical-align: top;\n        border: 1px solid\n          ", ";\n        border-right-width: 0;\n        border-bottom-width: 0;\n        padding: ", "px;\n        /* https://stackoverflow.com/questions/7517127/borders-not-shown-in-firefox-with-border-collapse-on-table-position-relative-o */\n        ", "\n\n        ", ";\n\n        > :first-child:not(style),\n        > style:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        th p:not(:first-of-type),\n        td p:not(:first-of-type) {\n          margin-top: 12px;\n        }\n      }\n      th {\n        background-color: ", ";\n        text-align: left;\n\n        /* only apply this styling to codeblocks in default background headercells */\n        /* TODO this needs to be overhauled as it relies on unsafe selectors */\n        &:not([style]) {\n          .code-block {\n            background-image: ", ";\n            background-attachment: local, scroll, scroll;\n            background-position: 100% 0, 100% 0, 0 0;\n            background-color: ", ";\n\n            .line-number-gutter {\n              background-color: ", ";\n            }\n\n            /* this is only relevant to the element taken care of by renderer */\n            > [data-ds--code--code-block] {\n              background-image: ", "!important;\n\n              background-color: ", "!important;\n\n              // selector lives inside @atlaskit/code\n              --ds--code--line-number-bg-color: ", ";\n            }\n          }\n        }\n      }\n    }\n  }\n"])), TableSharedCssClassName.TABLE_CONTAINER, tableMarginBottom, TableSharedCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableMarginTop, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableMarginTop, tableMarginSides, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableCellBorderWidth, (0, _components.themed)({
     light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorder),
     dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableBorderDark)
   })(props), (0, _tokens.token)('color.background.neutral.subtle', 'white'), tableCellMinWidth, (0, _components.themed)({

package/dist/cjs/types/copy-button.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -46,7 +46,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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; } }
 
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "70.1.3";
+var packageVersion = "70.2.0";
 var halfFocusRing = 1;
 var dropOffset = "0, ".concat((0, _constants.gridSize)(), "px");
 

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

@@ -118,7 +118,7 @@ var containerStyles = function containerStyles(styleProps) {
   var marginHorizontal = styleProps['data-node-type'] === 'expand' ? "-".concat(_editorSharedStyles.akLayoutGutterOffset, "px") : 0;
   var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
   return function (themeProps) {
-    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", "px;\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", "px;\n\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4152\n    &:hover {\n      border: 1px solid\n        ", ";\n      background: ", ";\n    }\n\n    td > :not(style):first-child,\n    td > style:first-child + * {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps), margin, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSwoopCubicBezier, (0, _constants.gridSize)(), (0, _components.themed)({
+    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    border-width: 1px;\n    border-style: solid;\n    border-color: ", ";\n    border-radius: ", "px;\n    min-height: 25px;\n    background: ", ";\n    margin: ", ";\n\n    transition: background 0.3s ", ",\n      border-color 0.3s ", ";\n    padding: ", "px;\n\n    &:hover {\n      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n      // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n      // https://product-fabric.atlassian.net/browse/DSP-4152\n      border: 1px solid\n        ", ";\n      background: ", ";\n    }\n\n    td > :not(style):first-child,\n    td > style:first-child + * {\n      margin-top: 0;\n    }\n  "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR(themeProps) : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND(themeProps), margin, _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorSwoopCubicBezier, (0, _constants.gridSize)(), (0, _components.themed)({
       light: (0, _tokens.token)('color.border', colors.N50A),
       dark: (0, _tokens.token)('color.border', colors.DN50)
     })(themeProps), EXPAND_SELECTED_BACKGROUND(themeProps));
@@ -127,7 +127,7 @@ var containerStyles = function containerStyles(styleProps) {
 
 var contentStyles = function contentStyles(styleProps) {
   return function (themeProps) {
-    return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: ", "px;\n  padding-right: ", "px;\n  padding-left: ", "px;\n  display: flow-root;\n\n  // The follow rules inside @supports block are added as a part of ED-8893\n  // The fix is targeting mobile bridge on iOS 12 or below,\n  // We should consider remove this fix when we no longer support iOS 12\n  @supports not (display: flow-root) {\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  ", "\n"])), styleProps.expanded ? (0, _constants.gridSize)() : 0, (0, _constants.gridSize)(), (0, _constants.gridSize)() * 4 - (0, _constants.gridSize)() / 2, !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          white-space: nowrap;\n          user-select: none;\n        }\n      " : '');
+    return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    padding-top: ", "px;\n    padding-right: ", "px;\n    padding-left: ", "px;\n    display: flow-root;\n\n    // The follow rules inside @supports block are added as a part of ED-8893\n    // The fix is targeting mobile bridge on iOS 12 or below,\n    // We should consider remove this fix when we no longer support iOS 12\n    @supports not (display: flow-root) {\n      width: 100%;\n      box-sizing: border-box;\n    }\n\n    ", "\n  "])), styleProps.expanded ? (0, _constants.gridSize)() : 0, (0, _constants.gridSize)(), (0, _constants.gridSize)() * 4 - (0, _constants.gridSize)() / 2, !styleProps.expanded ? "\n        .expand-content-wrapper, .nestedExpand-content-wrapper {\n          /* We visually hide the content here to preserve the content during copy+paste */\n          width: 100%;\n          display: block;\n          height: 0;\n          overflow: hidden;\n          clip: rect(1px, 1px, 1px, 1px);\n          white-space: nowrap;\n          user-select: none;\n        }\n      " : '');
   };
 };
 

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IntlProviderIfMissingWrapper;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var useCheckIntlContext = function useCheckIntlContext() {
+  return (0, _react.useContext)(_reactIntlNext.IntlContext) === null;
+};
+
+function IntlProviderIfMissingWrapper(_ref) {
+  var children = _ref.children;
+  var missingIntlContext = useCheckIntlContext();
+
+  if (missingIntlContext) {
+    return /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
+      locale: "en"
+    }, children);
+  }
+
+  return children;
+}

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

@@ -251,10 +251,10 @@ var Popup = /*#__PURE__*/function (_React$Component) {
 
       return /*#__PURE__*/_react.default.createElement("div", {
         ref: this.handleRef,
-        style: _objectSpread({
+        style: _objectSpread(_objectSpread({
           position: 'absolute',
           zIndex: this.props.zIndex || _editorSharedStyles.akEditorFloatingPanelZIndex
-        }, position),
+        }, position), this.props.style),
         "aria-label": this.props.ariaLabel || 'Popup' // Indicates component is an editor pop. Required for focus handling in Message.tsx
         ,
         "data-editor-popup": true

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

@@ -25,6 +25,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _reactDom = require("react-dom");
 
 var _reactIntlNext = require("react-intl-next");
@@ -37,8 +39,12 @@ var _analytics = require("../../analytics");
 
 var _eventDispatcher = require("../../event-dispatcher");
 
+var _IntlProviderIfMissingWrapper = _interopRequireDefault(require("../IntlProviderIfMissingWrapper"));
+
 var _PortalProviderThemesProvider = require("./PortalProviderThemesProvider");
 
+var _class;
+
 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() { 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; } }
@@ -67,8 +73,6 @@ var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
   (0, _createClass2.default)(PortalProviderAPI, [{
     key: "render",
     value: function render(children, container) {
-      var _this2 = this;
-
       var hasAnalyticsContext = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       var hasIntlContext = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       this.portals.set(container, {
@@ -77,13 +81,11 @@ var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
         hasIntlContext: hasIntlContext
       });
 
-      var childrenWithThemeProviders = function childrenWithThemeProviders() {
-        return /*#__PURE__*/_react.default.createElement(_PortalProviderThemesProvider.PortalProviderThemeProviders, {
-          mode: _this2.themeMode
-        }, children());
-      };
+      var childrenWithThemeProviders = /*#__PURE__*/_react.default.createElement(_PortalProviderThemesProvider.PortalProviderThemeProviders, {
+        mode: this.themeMode
+      }, children());
 
-      var wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/_react.default.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders()) : childrenWithThemeProviders();
+      var wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/_react.default.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders) : childrenWithThemeProviders;
 
       if (hasIntlContext) {
         wrappedChildren = /*#__PURE__*/_react.default.createElement(_reactIntlNext.RawIntlProvider, {
@@ -99,36 +101,34 @@ var PortalProviderAPI = /*#__PURE__*/function (_EventDispatcher) {
   }, {
     key: "forceUpdate",
     value: function forceUpdate(_ref) {
-      var _this3 = this;
+      var _this2 = this;
 
       var intl = _ref.intl,
           themeMode = _ref.themeMode;
       this.intl = intl;
       this.themeMode = themeMode;
       this.portals.forEach(function (portal, container) {
-        if (!portal.hasAnalyticsContext && !_this3.useAnalyticsContext && !portal.hasIntlContext) {
+        if (!portal.hasAnalyticsContext && !_this2.useAnalyticsContext && !portal.hasIntlContext) {
           return;
         }
 
         var wrappedChildren = portal.children();
 
-        var childrenWithThemeProviders = function childrenWithThemeProviders() {
-          return /*#__PURE__*/_react.default.createElement(_PortalProviderThemesProvider.PortalProviderThemeProviders, {
-            mode: themeMode
-          }, wrappedChildren);
-        };
+        var childrenWithThemeProviders = /*#__PURE__*/_react.default.createElement(_PortalProviderThemesProvider.PortalProviderThemeProviders, {
+          mode: themeMode
+        }, wrappedChildren);
 
-        if (portal.hasAnalyticsContext && _this3.useAnalyticsContext) {
-          wrappedChildren = /*#__PURE__*/_react.default.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders());
+        if (portal.hasAnalyticsContext && _this2.useAnalyticsContext) {
+          wrappedChildren = /*#__PURE__*/_react.default.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders);
         }
 
         if (portal.hasIntlContext) {
           wrappedChildren = /*#__PURE__*/_react.default.createElement(_reactIntlNext.RawIntlProvider, {
-            value: _this3.intl
-          }, childrenWithThemeProviders());
+            value: _this2.intl
+          }, childrenWithThemeProviders);
         }
 
-        (0, _reactDom.unstable_renderSubtreeIntoContainer)(_this3.context, wrappedChildren, container);
+        (0, _reactDom.unstable_renderSubtreeIntoContainer)(_this2.context, wrappedChildren, container);
       });
     }
   }, {
@@ -176,12 +176,12 @@ var BasePortalProvider = /*#__PURE__*/function (_React$Component) {
   var _super2 = _createSuper(BasePortalProvider);
 
   function BasePortalProvider(props) {
-    var _this4;
+    var _this3;
 
     (0, _classCallCheck2.default)(this, BasePortalProvider);
-    _this4 = _super2.call(this, props);
-    _this4.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext, props.themeMode);
-    return _this4;
+    _this3 = _super2.call(this, props);
+    _this3.portalProviderAPI = new PortalProviderAPI(props.intl, props.onAnalyticsEvent, props.useAnalyticsContext, props.themeMode);
+    return _this3;
   }
 
   (0, _createClass2.default)(BasePortalProvider, [{
@@ -205,51 +205,65 @@ var BasePortalProvider = /*#__PURE__*/function (_React$Component) {
 var PortalProvider = (0, _reactIntlNext.injectIntl)(BasePortalProvider);
 exports.PortalProvider = PortalProvider;
 
-var PortalProviderWithThemeProviders = function PortalProviderWithThemeProviders(props) {
+var PortalProviderWithThemeProviders = function PortalProviderWithThemeProviders(_ref2) {
+  var onAnalyticsEvent = _ref2.onAnalyticsEvent,
+      useAnalyticsContext = _ref2.useAnalyticsContext,
+      render = _ref2.render;
+  return /*#__PURE__*/_react.default.createElement(_IntlProviderIfMissingWrapper.default, null, /*#__PURE__*/_react.default.createElement(PortalProviderWithThemeAndIntlProviders, {
+    onAnalyticsEvent: onAnalyticsEvent,
+    useAnalyticsContext: useAnalyticsContext,
+    render: render
+  }));
+};
+
+exports.PortalProviderWithThemeProviders = PortalProviderWithThemeProviders;
+
+var PortalProviderWithThemeAndIntlProviders = function PortalProviderWithThemeAndIntlProviders(_ref3) {
+  var onAnalyticsEvent = _ref3.onAnalyticsEvent,
+      useAnalyticsContext = _ref3.useAnalyticsContext,
+      render = _ref3.render;
   var intl = (0, _reactIntlNext.useIntl)();
   var globalTheme = (0, _components.useGlobalTheme)();
   return /*#__PURE__*/_react.default.createElement(BasePortalProvider, {
     intl: intl,
     themeMode: globalTheme.mode,
-    onAnalyticsEvent: props.onAnalyticsEvent,
-    useAnalyticsContext: props.useAnalyticsContext,
-    render: props.render
+    onAnalyticsEvent: onAnalyticsEvent,
+    useAnalyticsContext: useAnalyticsContext,
+    render: render
   });
 };
 
-exports.PortalProviderWithThemeProviders = PortalProviderWithThemeProviders;
-
 var PortalRenderer = /*#__PURE__*/function (_React$Component2) {
   (0, _inherits2.default)(PortalRenderer, _React$Component2);
 
   var _super3 = _createSuper(PortalRenderer);
 
   function PortalRenderer(props) {
-    var _this5;
+    var _this4;
 
     (0, _classCallCheck2.default)(this, PortalRenderer);
-    _this5 = _super3.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this5), "handleUpdate", function (portals) {
-      return _this5.setState({
+    _this4 = _super3.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this4), "handleUpdate", function (portals) {
+      return _this4.setState({
         portals: portals
       });
     });
-    props.portalProviderAPI.setContext((0, _assertThisInitialized2.default)(_this5));
-    props.portalProviderAPI.on('update', _this5.handleUpdate);
-    _this5.state = {
+    props.portalProviderAPI.setContext((0, _assertThisInitialized2.default)(_this4));
+    props.portalProviderAPI.on('update', _this4.handleUpdate);
+    _this4.state = {
       portals: new Map()
     };
-    return _this5;
+    return _this4;
   }
 
   (0, _createClass2.default)(PortalRenderer, [{
     key: "render",
     value: function render() {
       var portals = this.state.portals;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Array.from(portals.entries()).map(function (_ref2) {
-        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-            container = _ref3[0],
-            children = _ref3[1];
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Array.from(portals.entries()).map(function (_ref4) {
+        var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
+            container = _ref5[0],
+            children = _ref5[1];
 
         return /*#__PURE__*/(0, _reactDom.createPortal)(children, container);
       }));
@@ -267,8 +281,7 @@ var dummyAnalyticsContext = {
   getAtlaskitAnalyticsContext: function getAtlaskitAnalyticsContext() {},
   getAtlaskitAnalyticsEventHandlers: function getAtlaskitAnalyticsEventHandlers() {}
 };
-
-var AnalyticsContextWrapper = /*#__PURE__*/function (_React$Component3) {
+var AnalyticsContextWrapper = (_class = /*#__PURE__*/function (_React$Component3) {
   (0, _inherits2.default)(AnalyticsContextWrapper, _React$Component3);
 
   var _super4 = _createSuper(AnalyticsContextWrapper);
@@ -281,10 +294,10 @@ var AnalyticsContextWrapper = /*#__PURE__*/function (_React$Component3) {
   (0, _createClass2.default)(AnalyticsContextWrapper, [{
     key: "render",
     value: function render() {
-      var _ref4 = this.context.contextAdapter.analytics || {
+      var _ref6 = this.context.contextAdapter.analytics || {
         value: dummyAnalyticsContext
       },
-          value = _ref4.value;
+          value = _ref6.value;
 
       return /*#__PURE__*/_react.default.createElement(_analyticsNextStableReactContext.default.Provider, {
         value: value
@@ -292,4 +305,6 @@ var AnalyticsContextWrapper = /*#__PURE__*/function (_React$Component3) {
     }
   }]);
   return AnalyticsContextWrapper;
-}(_react.default.Component);
+}(_react.default.Component), (0, _defineProperty2.default)(_class, "contextTypes", {
+  contextAdapter: _propTypes.default.object
+}), _class);

package/dist/cjs/ui/index.js

@@ -61,6 +61,12 @@ Object.defineProperty(exports, "IntlErrorBoundary", {
     return _IntlErrorBoundary.IntlErrorBoundary;
   }
 });
+Object.defineProperty(exports, "IntlProviderIfMissingWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _IntlProviderIfMissingWrapper.default;
+  }
+});
 Object.defineProperty(exports, "MediaSingle", {
   enumerable: true,
   get: function get() {
@@ -290,6 +296,8 @@ var _clearNextSiblingMarginTop = require("./clear-next-sibling-margin-top");
 
 var _IntlErrorBoundary = require("./IntlErrorBoundary");
 
+var _IntlProviderIfMissingWrapper = _interopRequireDefault(require("./IntlProviderIfMissingWrapper"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/cjs/utils/breakout.js

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.calcWideWidth = exports.calcBreakoutWidth = exports.breakoutConsts = exports.absoluteBreakoutWidth = void 0;
+exports.calcBreakoutWidth = exports.breakoutConsts = exports.absoluteBreakoutWidth = void 0;
+exports.calcBreakoutWidthPx = calcBreakoutWidthPx;
+exports.calcWideWidth = void 0;
+exports.calculateBreakoutStyles = calculateBreakoutStyles;
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -11,6 +14,8 @@ var _BaseTheme = require("../ui/BaseTheme");
 
 var _WidthProvider = require("../ui/WidthProvider");
 
+var _dom = require("./dom");
+
 /**
  * Variables required to construct a context for breakout ssr inline script.
  *
@@ -24,6 +29,11 @@ var breakoutConsts = {
   wideLayoutWidth: _editorSharedStyles.akEditorWideLayoutWidth,
   mapBreakpointToLayoutMaxWidth: _BaseTheme.mapBreakpointToLayoutMaxWidth,
   getBreakpoint: _WidthProvider.getBreakpoint,
+
+  /**
+   * Consumers are opinionated that this will always return a string ending in
+   * `px` when called with `full-width` or `wide` as the layout parameter.
+   */
   calcBreakoutWidth: function calcBreakoutWidth(layout, containerWidth) {
     var effectiveFullWidth = containerWidth - breakoutConsts.padding;
 
@@ -76,4 +86,45 @@ exports.absoluteBreakoutWidth = absoluteBreakoutWidth;
 var calcWideWidth = breakoutConsts.calcWideWidth;
 exports.calcWideWidth = calcWideWidth;
 var calcBreakoutWidth = breakoutConsts.calcBreakoutWidth;
-exports.calcBreakoutWidth = calcBreakoutWidth;
+exports.calcBreakoutWidth = calcBreakoutWidth;
+
+function calculateBreakoutStyles(_ref) {
+  var mode = _ref.mode,
+      widthStateLineLength = _ref.widthStateLineLength,
+      widthStateWidth = _ref.widthStateWidth;
+  var breakoutWidth = calcBreakoutWidth(mode, widthStateWidth);
+  var breakoutWidthPx = (0, _dom.parsePx)(breakoutWidth);
+
+  if (!widthStateLineLength) {
+    // lineLength is not normally undefined when this is run for,
+    // consumers but can be in SSR, initial render or test (jsdom)
+    // environments.
+    //
+    // this approach doesn't work well with position: fixed, so
+    // it breaks things like sticky headers.
+    //
+    // It can also cause bluriness for some child content (such as iframes)
+    return {
+      type: 'line-length-unknown',
+      width: breakoutWidth,
+      transform: 'translateX(-50%)',
+      marginLeft: '50%'
+    };
+  } // NOTE
+  // At time of writing -- when toggling between full-width and
+  // full-page appearance modes. There is a slight delay before
+  // the widthState is updated.
+  // During this period -- the marginLeftPx will be incorrect.
+
+
+  var marginLeftPx = -(breakoutWidthPx - widthStateLineLength) / 2;
+  return {
+    type: 'line-length-known',
+    width: breakoutWidth,
+    marginLeft: "".concat(marginLeftPx, "px")
+  };
+}
+
+function calcBreakoutWidthPx(mode, widthStateWidth) {
+  return (0, _dom.parsePx)(calcBreakoutWidth(mode, widthStateWidth));
+}