@atlaskit/editor-common 67.0.0 → 68.0.1

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

@@ -4,20 +4,6 @@ import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { CHANNEL, fontSize } from '@atlaskit/theme/constants';
 import { WidthConsumer } from '../WidthProvider';
-
-function mapBreakpointToFontSize(breakpoint) {
-  switch (breakpoint) {
-    case 'M':
-      return fontSize() + 2;
-
-    case 'L':
-      return fontSize() + 4;
-
-    default:
-      return fontSize();
-  }
-}
-
 export function mapBreakpointToLayoutMaxWidth(breakpoint) {
   switch (breakpoint) {
     case 'M':
@@ -31,8 +17,6 @@ export function mapBreakpointToLayoutMaxWidth(breakpoint) {
   }
 }
 export function BaseThemeWrapper({
-  breakpoint,
-  dynamicTextSizing,
   baseFontSize,
   children
 }) {
@@ -40,26 +24,24 @@ export function BaseThemeWrapper({
     mode
   } = useGlobalTheme();
   const memoizedTheme = useMemo(() => ({
-    baseFontSize: dynamicTextSizing ? mapBreakpointToFontSize(breakpoint) : baseFontSize || mapBreakpointToFontSize('S'),
-    layoutMaxWidth: dynamicTextSizing ? mapBreakpointToLayoutMaxWidth(breakpoint) : akEditorDefaultLayoutWidth,
+    baseFontSize: baseFontSize || fontSize(),
+    layoutMaxWidth: akEditorDefaultLayoutWidth,
     // Below is used for editor dark mode.
     [CHANNEL]: {
       mode
     }
-  }), [breakpoint, dynamicTextSizing, baseFontSize, mode]);
+  }), [baseFontSize, mode]);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: memoizedTheme
   }, children);
 }
 export function BaseTheme({
   children,
-  dynamicTextSizing,
   baseFontSize
 }) {
   return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
     breakpoint
   }) => /*#__PURE__*/React.createElement(BaseThemeWrapper, {
-    dynamicTextSizing: dynamicTextSizing,
     breakpoint: breakpoint,
     baseFontSize: baseFontSize
   }, /*#__PURE__*/React.createElement(React.Fragment, null, children)));

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

@@ -127,7 +127,8 @@ const containerStyles = styleProps => {
       background: ${EXPAND_SELECTED_BACKGROUND(themeProps)};
     }
 
-    td > &:first-child {
+    td > :not(style):first-child,
+    td > style:first-child + * {
       margin-top: 0;
     }
   `;

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

@@ -1,24 +1,25 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import browser from '../../utils/browser';
+import { ShadowObserver, shadowObserverClassNames } from './shadowObserver';
 export const shadowClassNames = {
   RIGHT_SHADOW: 'right-shadow',
   LEFT_SHADOW: 'left-shadow'
 };
-const isIE11 = browser.ie_version === 11;
 export default function overflowShadow(Component, options) {
   return class OverflowShadow extends React.Component {
     constructor(...args) {
       super(...args);
 
+      _defineProperty(this, "overflowContainerWidth", 0);
+
       _defineProperty(this, "state", {
         showLeftShadow: false,
         showRightShadow: false
       });
 
       _defineProperty(this, "handleScroll", event => {
-        if (!this.overflowContainer || event.target !== this.overflowContainer) {
+        if (!this.overflowContainer || event.target !== this.overflowContainer || options.useShadowObserver) {
           return;
         }
 
@@ -26,6 +27,10 @@ export default function overflowShadow(Component, options) {
       });
 
       _defineProperty(this, "updateShadows", () => {
+        if (options.useShadowObserver) {
+          return;
+        }
+
         this.setState(prevState => {
           if (!this.overflowContainer) {
             return;
@@ -90,20 +95,22 @@ export default function overflowShadow(Component, options) {
           this.overflowContainer = container;
         }
 
-        if (options.scrollableSelector) {
-          this.scrollable = container.querySelectorAll(options.scrollableSelector);
+        if (options.useShadowObserver) {
+          this.initShadowObserver();
+          return;
         }
 
         this.updateShadows();
-
-        if (!isIE11) {
-          this.overflowContainer.addEventListener('scroll', this.handleScroll);
-        }
+        this.overflowContainer.addEventListener('scroll', this.handleScroll);
       });
     }
 
     componentWillUnmount() {
-      if (this.overflowContainer && !isIE11) {
+      if (options.useShadowObserver) {
+        return this.shadowObserver && this.shadowObserver.dispose();
+      }
+
+      if (this.overflowContainer) {
         this.overflowContainer.removeEventListener('scroll', this.handleScroll);
       }
 
@@ -111,7 +118,36 @@ export default function overflowShadow(Component, options) {
     }
 
     componentDidUpdate() {
-      this.updateShadows();
+      if (!options.useShadowObserver) {
+        this.updateShadows();
+      }
+    }
+
+    initShadowObserver() {
+      if (this.shadowObserver || !this.overflowContainer) {
+        return;
+      }
+
+      this.shadowObserver = new ShadowObserver({
+        scrollContainer: this.overflowContainer,
+        onUpdateShadows: shadowStates => {
+          this.setState(prevState => {
+            const {
+              showLeftShadow,
+              showRightShadow
+            } = shadowStates;
+
+            if (showLeftShadow !== prevState.showLeftShadow || showRightShadow !== prevState.showRightShadow) {
+              return {
+                showLeftShadow,
+                showRightShadow
+              };
+            }
+
+            return null;
+          });
+        }
+      });
     }
 
     render() {
@@ -119,7 +155,7 @@ export default function overflowShadow(Component, options) {
         showLeftShadow,
         showRightShadow
       } = this.state;
-      const classNames = [showRightShadow && shadowClassNames.RIGHT_SHADOW, showLeftShadow && shadowClassNames.LEFT_SHADOW].filter(Boolean).join(' ');
+      let classNames = [showRightShadow && shadowClassNames.RIGHT_SHADOW, showLeftShadow && shadowClassNames.LEFT_SHADOW, options.useShadowObserver && shadowObserverClassNames.SHADOW_CONTAINER].filter(Boolean).join(' ');
       return /*#__PURE__*/React.createElement(Component, _extends({
         handleRef: this.handleContainer,
         shadowClassNames: classNames

package/dist/es2019/ui/OverflowShadow/shadowObserver.js

@@ -0,0 +1,82 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+export let ShadowKeys;
+
+(function (ShadowKeys) {
+  ShadowKeys["SHOW_LEFT_SHADOW"] = "showLeftShadow";
+  ShadowKeys["SHOW_RIGHT_SHADOW"] = "showRightShadow";
+})(ShadowKeys || (ShadowKeys = {}));
+
+export const shadowObserverClassNames = {
+  SENTINEL_LEFT: 'sentinel-left',
+  SENTINEL_RIGHT: 'sentinel-right',
+  SHADOW_CONTAINER: 'with-shadow-observer'
+};
+
+const requestIdleCallback = fn => {
+  return window.requestIdleCallback ? window.requestIdleCallback(fn) : window.requestAnimationFrame(fn);
+};
+
+const cancelIdleCallback = id => {
+  return window.cancelIdleCallback ? window.cancelIdleCallback(id) : window.cancelAnimationFrame(id);
+};
+
+export class ShadowObserver {
+  constructor({
+    scrollContainer,
+    onUpdateShadows
+  }) {
+    _defineProperty(this, "sentinels", {});
+
+    _defineProperty(this, "shadowStates", {
+      [ShadowKeys.SHOW_LEFT_SHADOW]: false,
+      [ShadowKeys.SHOW_RIGHT_SHADOW]: false
+    });
+
+    _defineProperty(this, "init", () => {
+      if (!this.scrollContainer || this.intersectionObserver) {
+        return;
+      }
+
+      this.sentinels.right = document.createElement('div');
+      this.sentinels.right.classList.add(shadowObserverClassNames.SENTINEL_RIGHT);
+      this.scrollContainer.appendChild(this.sentinels.right);
+      this.sentinels.left = document.createElement('div');
+      this.sentinels.left.classList.add(shadowObserverClassNames.SENTINEL_LEFT);
+      this.scrollContainer.prepend(this.sentinels.left);
+      this.intersectionObserver = new IntersectionObserver((entries, _) => {
+        entries.forEach(this.onIntersect);
+      }, {
+        root: this.scrollContainer
+      });
+      this.intersectionObserver.observe(this.sentinels.left);
+      this.intersectionObserver.observe(this.sentinels.right);
+    });
+
+    _defineProperty(this, "onIntersect", entry => {
+      this.requestCallbackId = requestIdleCallback(() => {
+        if (entry.target.classList.contains(shadowObserverClassNames.SENTINEL_LEFT)) {
+          this.shadowStates[ShadowKeys.SHOW_LEFT_SHADOW] = !entry.isIntersecting;
+        }
+
+        if (entry.target.classList.contains(shadowObserverClassNames.SENTINEL_RIGHT)) {
+          this.shadowStates[ShadowKeys.SHOW_RIGHT_SHADOW] = !entry.isIntersecting;
+        }
+
+        this.onUpdateShadows(this.shadowStates);
+      });
+    });
+
+    this.scrollContainer = scrollContainer;
+    this.onUpdateShadows = onUpdateShadows;
+    this.init();
+  }
+
+  dispose() {
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect();
+      this.intersectionObserver = undefined;
+      this.requestCallbackId && cancelIdleCallback(this.requestCallbackId);
+    }
+  }
+
+}

package/dist/es2019/ui/index.js

@@ -10,6 +10,7 @@ export { BaseTheme, mapBreakpointToLayoutMaxWidth } from './BaseTheme';
 export { default as withOuterListeners } from './with-outer-listeners';
 export { WidthConsumer, WidthProvider, getBreakpoint } from './WidthProvider';
 export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
+export { shadowObserverClassNames, ShadowObserver } from './OverflowShadow/shadowObserver';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';
 export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, expandLayoutWrapperStyle, ExpandLayoutWrapperWithRef } from './Expand';
 export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';

package/dist/es2019/utils/breakout.js

@@ -29,7 +29,7 @@ const breakoutConsts = {
         return '100%';
     }
   },
-  calcLineLength: (containerWidth, allowDynamicTextSizing) => allowDynamicTextSizing && containerWidth ? breakoutConsts.mapBreakpointToLayoutMaxWidth(breakoutConsts.getBreakpoint(containerWidth)) : breakoutConsts.defaultLayoutWidth,
+  calcLineLength: () => breakoutConsts.defaultLayoutWidth,
   calcWideWidth: (containerWidth = breakoutConsts.defaultLayoutWidth, maxWidth = Infinity, fallback = '100%') => {
     const effectiveFullWidth = containerWidth - breakoutConsts.padding;
     const layoutMaxWidth = breakoutConsts.mapBreakpointToLayoutMaxWidth(breakoutConsts.getBreakpoint(containerWidth));

package/dist/es2019/utils/unsupportedContent/get-unsupported-content-level-data.js

@@ -1,4 +1,4 @@
-import { traverse } from '@atlaskit/adf-utils';
+import { traverse } from '@atlaskit/adf-utils/traverse';
 export let UNSUPPORTED_CONTENT_LEVEL_SEVERITY;
 
 (function (UNSUPPORTED_CONTENT_LEVEL_SEVERITY) {

package/dist/es2019/utils/validate-using-spec.js

@@ -1,4 +1,4 @@
-import { validator } from '@atlaskit/adf-utils';
+import { validator } from '@atlaskit/adf-utils/validator';
 export const UNSUPPORTED_NODE_ATTRIBUTE = 'unsupportedNodeAttribute';
 import { ACTION_SUBJECT_ID } from './analytics';
 import { fireUnsupportedEvent } from './track-unsupported-content';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "67.0.0",
+	"version": "68.0.1",
 	"sideEffects": false
 }

package/dist/esm/styles/shared/block-marks.js

@@ -3,4 +3,4 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import { css } from '@emotion/react';
-export var blockMarksSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /**\n   * We need to remove margin-top from first item\n   * inside doc, tableCell, tableHeader, blockquote, etc.\n   */\n  *:not(.fabric-editor-block-mark) >,\n  /* For nested block marks */\n  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-child {\n    p,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    .heading-wrapper {\n      &:first-child {\n        margin-top: 0;\n      }\n    }\n  }\n"])));
+export var blockMarksSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /**\n   * We need to remove margin-top from first item\n   * inside doc, tableCell, tableHeader, blockquote, etc.\n   */\n  *:not(.fabric-editor-block-mark) >,\n  /* For nested block marks */\n  *:not(.fabric-editor-block-mark) > div.fabric-editor-block-mark:first-of-type {\n    p,\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6,\n    .heading-wrapper {\n      :first-child:not(style),\n      style:first-child + * {\n        margin-top: 0;\n      }\n    }\n  }\n"])));

package/dist/esm/styles/shared/column-layout.js

@@ -4,5 +4,5 @@ var _templateObject;
 
 import { css } from '@emotion/react';
 import { gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
-var columnLayoutSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-layout-section] {\n    display: flex;\n    flex-direction: row;\n    & > * {\n      flex: 1;\n      min-width: 0;\n    }\n\n    & > .unsupportedBlockView-content-wrap {\n      min-width: initial;\n    }\n\n    @media screen and (max-width: ", "px) {\n      flex-direction: column;\n    }\n  }\n"])), gridMediumMaxWidth);
+var columnLayoutSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [data-layout-section] {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    & > * {\n      flex: 1;\n      min-width: 0;\n    }\n\n    & > .unsupportedBlockView-content-wrap {\n      min-width: initial;\n    }\n\n    @media screen and (max-width: ", "px) {\n      flex-direction: column;\n    }\n  }\n"])), gridMediumMaxWidth);
 export { columnLayoutSharedStyle };

package/dist/esm/styles/shared/shadow.js

@@ -8,6 +8,7 @@ import { css } from '@emotion/react';
 import { akEditorShadowZIndex } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
 import { shadowClassNames } from '../../ui/OverflowShadow';
+import { shadowObserverClassNames } from '../../ui/OverflowShadow/shadowObserver';
 var shadowWidth = 8;
 /**
  * TODO: This is close to working and removes a tone of JS from OverflowShadow component
@@ -23,5 +24,5 @@ var shadowWidth = 8;
  *      background-attachment: local, local, scroll, scroll;
  */
 
-var shadowSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &\n    .", "::before,\n    .", "::after,\n    .", "::before,\n    .", "::after {\n    display: none;\n    position: absolute;\n    pointer-events: none;\n    z-index: ", ";\n    width: ", "px;\n    content: '';\n    /* Scrollbar is outside the content in IE, inset in other browsers. */\n    height: calc(100%);\n  }\n\n  & .", ", .", " {\n    position: relative;\n  }\n\n  & .", "::before {\n    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ", " 100%);\n    top: 0px;\n    left: 0;\n    display: block;\n  }\n\n  & .", "::after {\n    background: linear-gradient(\n      to right,\n      rgba(99, 114, 130, 0) 0,\n      ", " 100%\n    );\n    left: calc(100% - ", "px);\n    top: 0px;\n    display: block;\n  }\n"])), shadowClassNames.RIGHT_SHADOW, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, shadowClassNames.LEFT_SHADOW, akEditorShadowZIndex, shadowWidth, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, shadowClassNames.LEFT_SHADOW, N40A, shadowClassNames.RIGHT_SHADOW, N40A, shadowWidth);
+var shadowSharedStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &\n    .", "::before,\n    .", "::after,\n    .", "::before,\n    .", "::after {\n    display: none;\n    position: absolute;\n    pointer-events: none;\n    z-index: ", ";\n    width: ", "px;\n    content: '';\n    /* Scrollbar is outside the content in IE, inset in other browsers. */\n    height: calc(100%);\n  }\n\n  & .", ", .", " {\n    position: relative;\n  }\n\n  & .", "::before {\n    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ", " 100%);\n    top: 0px;\n    left: 0;\n    display: block;\n  }\n\n  & .", "::after {\n    background: linear-gradient(\n      to right,\n      rgba(99, 114, 130, 0) 0,\n      ", " 100%\n    );\n    left: calc(100% - ", "px);\n    top: 0px;\n    display: block;\n  }\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n\n  & .", " {\n    height: 100%;\n    width: 0px;\n    min-width: 0px;\n  }\n"])), shadowClassNames.RIGHT_SHADOW, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, shadowClassNames.LEFT_SHADOW, akEditorShadowZIndex, shadowWidth, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, shadowClassNames.LEFT_SHADOW, N40A, shadowClassNames.RIGHT_SHADOW, N40A, shadowWidth, shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT);
 export { shadowSharedStyle };

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

@@ -36,7 +36,7 @@ export var TableSharedCssClassName = {
 };
 
 var tableSharedStyle = function tableSharedStyle(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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-child > 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 {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + 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, 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, themed({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, 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, themed({
     light: token('color.border', akEditorTableBorder),
     dark: token('color.border', akEditorTableBorderDark)
   })(props), token('color.background.neutral.subtle', 'white'), tableCellMinWidth, themed({

package/dist/esm/styles/shared/task-decision.js

@@ -7,4 +7,4 @@ import { akEditorTableCellMinWidth } from '@atlaskit/editor-shared-styles';
 export var TaskDecisionSharedCssClassName = {
   DECISION_CONTAINER: 'decisionItemView-content-wrap'
 };
-export var tasksAndDecisionsStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .taskItemView-content-wrap,\n    .", " {\n      position: relative;\n      min-width: ", "px;\n    }\n\n    .", " {\n      margin-top: 0;\n    }\n  }\n\n  div[data-task-list-local-id] {\n    margin: 12px 0 0 0;\n  }\n\n  div[data-task-list-local-id]:first-child {\n    margin-top: 0;\n  }\n\n  div[data-task-list-local-id] div[data-task-list-local-id] {\n    margin-top: 0px;\n    margin-left: 24px;\n  }\n"])), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorTableCellMinWidth, TaskDecisionSharedCssClassName.DECISION_CONTAINER);
+export var tasksAndDecisionsStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ProseMirror {\n    .taskItemView-content-wrap,\n    .", " {\n      position: relative;\n      min-width: ", "px;\n    }\n\n    .", " {\n      margin-top: 0;\n    }\n  }\n\n  div[data-task-list-local-id] {\n    margin: 12px 0 0 0;\n  }\n\n  // If task list is first in the document then set margin top to zero.\n  div[data-task-list-local-id]:first-child,\n  style:first-child + div[data-task-list-local-id] {\n    margin-top: 0;\n  }\n\n  div[data-task-list-local-id] div[data-task-list-local-id] {\n    margin-top: 0px;\n    margin-left: 24px;\n  }\n"])), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorTableCellMinWidth, TaskDecisionSharedCssClassName.DECISION_CONTAINER);

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

@@ -5,20 +5,6 @@ import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { CHANNEL, fontSize } from '@atlaskit/theme/constants';
 import { WidthConsumer } from '../WidthProvider';
-
-function mapBreakpointToFontSize(breakpoint) {
-  switch (breakpoint) {
-    case 'M':
-      return fontSize() + 2;
-
-    case 'L':
-      return fontSize() + 4;
-
-    default:
-      return fontSize();
-  }
-}
-
 export function mapBreakpointToLayoutMaxWidth(breakpoint) {
   switch (breakpoint) {
     case 'M':
@@ -32,9 +18,7 @@ export function mapBreakpointToLayoutMaxWidth(breakpoint) {
   }
 }
 export function BaseThemeWrapper(_ref) {
-  var breakpoint = _ref.breakpoint,
-      dynamicTextSizing = _ref.dynamicTextSizing,
-      baseFontSize = _ref.baseFontSize,
+  var baseFontSize = _ref.baseFontSize,
       children = _ref.children;
 
   var _useGlobalTheme = useGlobalTheme(),
@@ -42,24 +26,22 @@ export function BaseThemeWrapper(_ref) {
 
   var memoizedTheme = useMemo(function () {
     return _defineProperty({
-      baseFontSize: dynamicTextSizing ? mapBreakpointToFontSize(breakpoint) : baseFontSize || mapBreakpointToFontSize('S'),
-      layoutMaxWidth: dynamicTextSizing ? mapBreakpointToLayoutMaxWidth(breakpoint) : akEditorDefaultLayoutWidth
+      baseFontSize: baseFontSize || fontSize(),
+      layoutMaxWidth: akEditorDefaultLayoutWidth
     }, CHANNEL, {
       mode: mode
     });
-  }, [breakpoint, dynamicTextSizing, baseFontSize, mode]);
+  }, [baseFontSize, mode]);
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: memoizedTheme
   }, children);
 }
 export function BaseTheme(_ref3) {
   var children = _ref3.children,
-      dynamicTextSizing = _ref3.dynamicTextSizing,
       baseFontSize = _ref3.baseFontSize;
   return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref4) {
     var breakpoint = _ref4.breakpoint;
     return /*#__PURE__*/React.createElement(BaseThemeWrapper, {
-      dynamicTextSizing: dynamicTextSizing,
       breakpoint: breakpoint,
       baseFontSize: baseFontSize
     }, /*#__PURE__*/React.createElement(React.Fragment, null, children));

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

@@ -88,7 +88,7 @@ var containerStyles = function containerStyles(styleProps) {
   var marginHorizontal = styleProps['data-node-type'] === 'expand' ? "-".concat(akLayoutGutterOffset, "px") : 0;
   var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
   return function (themeProps) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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 > &: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, akEditorSwoopCubicBezier, akEditorSwoopCubicBezier, gridSize(), themed({
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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, akEditorSwoopCubicBezier, akEditorSwoopCubicBezier, gridSize(), themed({
       light: token('color.border', colors.N50A),
       dark: token('color.border', colors.DN50)
     })(themeProps), EXPAND_SELECTED_BACKGROUND(themeProps));

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

@@ -12,12 +12,11 @@ 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; } }
 
 import React from 'react';
-import browser from '../../utils/browser';
+import { ShadowObserver, shadowObserverClassNames } from './shadowObserver';
 export var shadowClassNames = {
   RIGHT_SHADOW: 'right-shadow',
   LEFT_SHADOW: 'left-shadow'
 };
-var isIE11 = browser.ie_version === 11;
 export default function overflowShadow(Component, options) {
   return /*#__PURE__*/function (_React$Component) {
     _inherits(OverflowShadow, _React$Component);
@@ -35,13 +34,15 @@ export default function overflowShadow(Component, options) {
 
       _this = _super.call.apply(_super, [this].concat(args));
 
+      _defineProperty(_assertThisInitialized(_this), "overflowContainerWidth", 0);
+
       _defineProperty(_assertThisInitialized(_this), "state", {
         showLeftShadow: false,
         showRightShadow: false
       });
 
       _defineProperty(_assertThisInitialized(_this), "handleScroll", function (event) {
-        if (!_this.overflowContainer || event.target !== _this.overflowContainer) {
+        if (!_this.overflowContainer || event.target !== _this.overflowContainer || options.useShadowObserver) {
           return;
         }
 
@@ -49,6 +50,10 @@ export default function overflowShadow(Component, options) {
       });
 
       _defineProperty(_assertThisInitialized(_this), "updateShadows", function () {
+        if (options.useShadowObserver) {
+          return;
+        }
+
         _this.setState(function (prevState) {
           if (!_this.overflowContainer) {
             return;
@@ -115,15 +120,15 @@ export default function overflowShadow(Component, options) {
           _this.overflowContainer = container;
         }
 
-        if (options.scrollableSelector) {
-          _this.scrollable = container.querySelectorAll(options.scrollableSelector);
+        if (options.useShadowObserver) {
+          _this.initShadowObserver();
+
+          return;
         }
 
         _this.updateShadows();
 
-        if (!isIE11) {
-          _this.overflowContainer.addEventListener('scroll', _this.handleScroll);
-        }
+        _this.overflowContainer.addEventListener('scroll', _this.handleScroll);
       });
 
       return _this;
@@ -132,7 +137,11 @@ export default function overflowShadow(Component, options) {
     _createClass(OverflowShadow, [{
       key: "componentWillUnmount",
       value: function componentWillUnmount() {
-        if (this.overflowContainer && !isIE11) {
+        if (options.useShadowObserver) {
+          return this.shadowObserver && this.shadowObserver.dispose();
+        }
+
+        if (this.overflowContainer) {
           this.overflowContainer.removeEventListener('scroll', this.handleScroll);
         }
 
@@ -141,7 +150,37 @@ export default function overflowShadow(Component, options) {
     }, {
       key: "componentDidUpdate",
       value: function componentDidUpdate() {
-        this.updateShadows();
+        if (!options.useShadowObserver) {
+          this.updateShadows();
+        }
+      }
+    }, {
+      key: "initShadowObserver",
+      value: function initShadowObserver() {
+        var _this2 = this;
+
+        if (this.shadowObserver || !this.overflowContainer) {
+          return;
+        }
+
+        this.shadowObserver = new ShadowObserver({
+          scrollContainer: this.overflowContainer,
+          onUpdateShadows: function onUpdateShadows(shadowStates) {
+            _this2.setState(function (prevState) {
+              var showLeftShadow = shadowStates.showLeftShadow,
+                  showRightShadow = shadowStates.showRightShadow;
+
+              if (showLeftShadow !== prevState.showLeftShadow || showRightShadow !== prevState.showRightShadow) {
+                return {
+                  showLeftShadow: showLeftShadow,
+                  showRightShadow: showRightShadow
+                };
+              }
+
+              return null;
+            });
+          }
+        });
       }
     }, {
       key: "render",
@@ -149,7 +188,7 @@ export default function overflowShadow(Component, options) {
         var _this$state = this.state,
             showLeftShadow = _this$state.showLeftShadow,
             showRightShadow = _this$state.showRightShadow;
-        var classNames = [showRightShadow && shadowClassNames.RIGHT_SHADOW, showLeftShadow && shadowClassNames.LEFT_SHADOW].filter(Boolean).join(' ');
+        var classNames = [showRightShadow && shadowClassNames.RIGHT_SHADOW, showLeftShadow && shadowClassNames.LEFT_SHADOW, options.useShadowObserver && shadowObserverClassNames.SHADOW_CONTAINER].filter(Boolean).join(' ');
         return /*#__PURE__*/React.createElement(Component, _extends({
           handleRef: this.handleContainer,
           shadowClassNames: classNames