@atlaskit/editor-common 66.0.5 → 68.0.0

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/Caption/index.js

@@ -17,9 +17,10 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { N200, N400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { messages } from './messages';
-var captionWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: 8px;\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), N400);
-var placeholderStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), N200);
+var captionWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: 8px;\n  text-align: center;\n  position: relative;\n  color: ", ";\n"])), token('color.text.subtle', N400));
+var placeholderStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])), token('color.text.subtlest', N200));
 export var CaptionComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(CaptionComponent, _React$Component);
 

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

@@ -13,6 +13,7 @@ import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, rel
 import * as colors from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { fontSize, gridSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 export var messages = defineMessages({
   collapseNode: {
     id: 'fabric.editor.collapseNode',
@@ -36,16 +37,16 @@ export var messages = defineMessages({
   }
 });
 var BORDER_RADIUS = gridSize() / 2;
-var EXPAND_COLLAPSED_BACKGROUND = 'transparent';
+var EXPAND_COLLAPSED_BACKGROUND = token('color.background.neutral.subtle', 'transparent');
 var EXPAND_SELECTED_BACKGROUND = themed({
-  light: 'rgba(255, 255, 255, 0.6)',
-  dark: 'rgba(9, 10, 11, 0.29)'
+  light: token('elevation.surface', 'rgba(255, 255, 255, 0.6)'),
+  dark: token('elevation.surface', 'rgba(9, 10, 11, 0.29)')
 });
-var EXPAND_FOCUSED_BORDER_COLOR = colors.B300;
+var EXPAND_FOCUSED_BORDER_COLOR = token('color.border.focused', colors.B300);
 var EXPAND_COLLAPSED_BORDER_COLOR = 'transparent';
 var EXPAND_EXPANDED_BORDER_COLOR = themed({
-  light: colors.N40A,
-  dark: colors.DN50
+  light: token('color.border', colors.N40A),
+  dark: token('color.border', colors.DN50)
 });
 export var ExpandIconWrapper = function ExpandIconWrapper(_ref) {
   var children = _ref.children,
@@ -59,9 +60,9 @@ export var ExpandIconWrapper = function ExpandIconWrapper(_ref) {
 
 var expandIconWrapperStyle = function expandIconWrapperStyle(props) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  display: flex;\n  color: ", ";\n  border-radius: ", "px;\n  width: 24px;\n  height: 24px;\n\n  &:hover {\n    background: ", ";\n  }\n\n  svg {\n    transition: transform 0.2s ", ";\n  }\n"])), themed({
-    light: colors.N90,
-    dark: '#d9dde3'
-  })(props), gridSize() / 2, colors.N30A, akEditorSwoopCubicBezier);
+    light: token('color.icon', colors.N90),
+    dark: token('color.icon', '#d9dde3')
+  })(props), gridSize() / 2, token('color.background.neutral.subtle.hovered', colors.N30A), akEditorSwoopCubicBezier);
 };
 
 var expandIconWrapperExpandedStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  svg {\n    transform: rotate(90deg);\n  }\n"])));
@@ -87,9 +88,9 @@ 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    &: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({
-      light: colors.N50A,
-      dark: colors.DN50
+    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({
+      light: token('color.border', colors.N50A),
+      dark: token('color.border', colors.DN50)
     })(themeProps), EXPAND_SELECTED_BACKGROUND(themeProps));
   };
 };
@@ -102,18 +103,18 @@ var contentStyles = function contentStyles(styleProps) {
 
 var titleInputStyles = function titleInputStyles(props) {
   return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  color: ", ";\n  background: transparent;\n  display: flex;\n  flex: 1;\n  padding: 0 0 0 ", "px;\n  width: 100%;\n\n  &::placeholder {\n    opacity: 0.6;\n    color: ", ";\n  }\n"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, themed({
-    light: colors.N200A,
-    dark: colors.DN600
+    light: token('color.text.subtlest', colors.N200A),
+    dark: token('color.text.subtlest', colors.DN600)
   })(props), gridSize() / 2, themed({
-    light: colors.N200A,
-    dark: colors.DN600
+    light: token('color.text.subtlest', colors.N200A),
+    dark: token('color.text.subtlest', colors.DN600)
   })(props));
 };
 
 var titleContainerStyles = function titleContainerStyles(props) {
   return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 0;\n  display: flex;\n  align-items: flex-start;\n  background: none;\n  border: none;\n  font-size: ", ";\n  width: 100%;\n  color: ", ";\n  overflow: hidden;\n  cursor: pointer;\n  // Prevent browser selection being inside the title container\n  user-select: none;\n\n  &:focus {\n    outline: 0;\n  }\n"])), relativeFontSizeToBase16(fontSize()), themed({
-    light: colors.N300A,
-    dark: colors.DN600
+    light: token('color.text.subtle', colors.N300A),
+    dark: token('color.text.subtle', colors.DN600)
   })(props));
 };
 

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

@@ -9,11 +9,12 @@ import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { G400, N200, R400 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { h200 } from '@atlaskit/theme/typography';
-var errorColor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), R400);
-var validColor = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), G400);
+import { token } from '@atlaskit/tokens';
+var errorColor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), token('color.text.danger', R400));
+var validColor = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), token('color.text.success', G400));
 
 var messageStyle = function messageStyle(props) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), h200(props), N200, gridSize() / 2);
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", "px;\n  display: flex;\n  justify-content: baseline;\n"])), h200(props), token('color.text.subtlest', N200), gridSize() / 2);
 };
 
 var iconWrapperStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: 4px;\n"])));

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

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

@@ -0,0 +1,98 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+export var ShadowKeys;
+
+(function (ShadowKeys) {
+  ShadowKeys["SHOW_LEFT_SHADOW"] = "showLeftShadow";
+  ShadowKeys["SHOW_RIGHT_SHADOW"] = "showRightShadow";
+})(ShadowKeys || (ShadowKeys = {}));
+
+export var shadowObserverClassNames = {
+  SENTINEL_LEFT: 'sentinel-left',
+  SENTINEL_RIGHT: 'sentinel-right',
+  SHADOW_CONTAINER: 'with-shadow-observer'
+};
+
+var requestIdleCallback = function requestIdleCallback(fn) {
+  return window.requestIdleCallback ? window.requestIdleCallback(fn) : window.requestAnimationFrame(fn);
+};
+
+var cancelIdleCallback = function cancelIdleCallback(id) {
+  return window.cancelIdleCallback ? window.cancelIdleCallback(id) : window.cancelAnimationFrame(id);
+};
+
+export var ShadowObserver = /*#__PURE__*/function () {
+  function ShadowObserver(_ref) {
+    var _defineProperty2,
+        _this = this;
+
+    var scrollContainer = _ref.scrollContainer,
+        onUpdateShadows = _ref.onUpdateShadows;
+
+    _classCallCheck(this, ShadowObserver);
+
+    _defineProperty(this, "sentinels", {});
+
+    _defineProperty(this, "shadowStates", (_defineProperty2 = {}, _defineProperty(_defineProperty2, ShadowKeys.SHOW_LEFT_SHADOW, false), _defineProperty(_defineProperty2, ShadowKeys.SHOW_RIGHT_SHADOW, false), _defineProperty2));
+
+    _defineProperty(this, "init", function () {
+      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(function (entries, _) {
+        entries.forEach(_this.onIntersect);
+      }, {
+        root: _this.scrollContainer
+      });
+
+      _this.intersectionObserver.observe(_this.sentinels.left);
+
+      _this.intersectionObserver.observe(_this.sentinels.right);
+    });
+
+    _defineProperty(this, "onIntersect", function (entry) {
+      _this.requestCallbackId = requestIdleCallback(function () {
+        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();
+  }
+
+  _createClass(ShadowObserver, [{
+    key: "dispose",
+    value: function dispose() {
+      if (this.intersectionObserver) {
+        this.intersectionObserver.disconnect();
+        this.intersectionObserver = undefined;
+        this.requestCallbackId && cancelIdleCallback(this.requestCallbackId);
+      }
+    }
+  }]);
+
+  return ShadowObserver;
+}();

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

@@ -10,12 +10,13 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
 import { N30, N50 } from '@atlaskit/theme/colors';
 import { borderRadius, fontSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import { unsupportedContentMessages } from '../../messages/unsupportedContent';
 import { ACTION_SUBJECT_ID } from '../../utils/analytics';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
-var blockNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), N30, N50, borderRadius(), relativeFontSizeToBase16(fontSize()));
+var blockNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: flex;\n  font-size: ", ";\n  margin: 10px 0;\n  min-height: 24px;\n  padding: 10px;\n  text-align: center;\n  vertical-align: text-bottom;\n  min-width: 120px;\n  align-items: center;\n  justify-content: center;\n"])), token('color.background.disabled', N30), token('color.border.disabled', N50), borderRadius(), relativeFontSizeToBase16(fontSize()));
 
 var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var node = _ref.node,

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

@@ -10,12 +10,13 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
 import { N30, N50 } from '@atlaskit/theme/colors';
 import { borderRadius, fontSize } from '@atlaskit/theme/constants';
+import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import { unsupportedContentMessages } from '../../messages/unsupportedContent';
 import { ACTION_SUBJECT_ID } from '../../utils/analytics';
 import { trackUnsupportedContentTooltipDisplayedFor } from '../../utils/track-unsupported-content';
 import { getUnsupportedContent } from '../unsupported-content-helper';
-var inlineNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 10px;\n  vertical-align: middle;\n  white-space: nowrap;\n"])), N30, N50, borderRadius(), relativeFontSizeToBase16(fontSize()));
+var inlineNodeStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  background: ", ";\n  border: 1px dashed ", ";\n  border-radius: ", "px;\n  box-sizing: border-box;\n  cursor: default;\n  display: inline-flex;\n  font-size: ", ";\n  margin: 0 2px;\n  min-height: 24px;\n  padding: 0 10px;\n  vertical-align: middle;\n  white-space: nowrap;\n"])), token('color.background.disabled', N30), token('color.border.disabled', N50), borderRadius(), relativeFontSizeToBase16(fontSize()));
 
 var UnsupportedInlineNode = function UnsupportedInlineNode(_ref) {
   var node = _ref.node,

package/dist/esm/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/esm/utils/breakout.js

@@ -29,8 +29,8 @@ var breakoutConsts = {
         return '100%';
     }
   },
-  calcLineLength: function calcLineLength(containerWidth, allowDynamicTextSizing) {
-    return allowDynamicTextSizing && containerWidth ? breakoutConsts.mapBreakpointToLayoutMaxWidth(breakoutConsts.getBreakpoint(containerWidth)) : breakoutConsts.defaultLayoutWidth;
+  calcLineLength: function calcLineLength() {
+    return breakoutConsts.defaultLayoutWidth;
   },
   calcWideWidth: function calcWideWidth() {
     var containerWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : breakoutConsts.defaultLayoutWidth;

package/dist/esm/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 var UNSUPPORTED_CONTENT_LEVEL_SEVERITY;
 
 (function (UNSUPPORTED_CONTENT_LEVEL_SEVERITY) {

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

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

package/dist/esm/version.json

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

package/dist/types/extensions/manifest-helpers.d.ts

@@ -1,4 +1,4 @@
-import { ADFEntity } from '@atlaskit/adf-utils';
+import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import { ExtensionKey, ExtensionManifest, ExtensionModuleAction, ExtensionModuleActionObject, ExtensionType, Module } from './types/extension-manifest';
 export declare const FORGE_EXTENSION_TYPE = "com.atlassian.ecosystem";
 export declare const getExtensionKeyAndNodeKey: (extensionKey: ExtensionKey, extensionType: ExtensionType) => string[];

package/dist/types/extensions/module-helpers.d.ts

@@ -1,4 +1,4 @@
-import { ADFEntity } from '@atlaskit/adf-utils';
+import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import { ExtensionAPI, ExtensionAutoConvertHandler, ExtensionManifest, ExtensionModule, ExtensionProvider, ExtensionToolbarButton, MenuItem } from './types';
 export declare const groupBy: <T>(arr: T[], attr: keyof T, keyRenamer: (key: T[keyof T]) => string) => {
     [k: string]: T;

package/dist/types/extensions/types/extension-handler.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ADFEntity } from '@atlaskit/adf-utils';
+import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import { Parameters } from './extension-parameters';
 export interface ExtensionParams<T extends Parameters> {
     extensionKey: string;

package/dist/types/extensions/types/extension-manifest-toolbar-item.d.ts

@@ -1,4 +1,4 @@
-import { ADFEntity } from '@atlaskit/adf-utils';
+import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import { ExtensionAPI } from './extension-handler';
 import { ExtensionIconModule } from './extension-manifest-common';
 export declare type ToolbarButtonAction = (contextNode: ADFEntity, api: ExtensionAPI) => Promise<void>;

package/dist/types/extensions/types/extension-manifest.d.ts

@@ -1,5 +1,5 @@
 import { ComponentType } from 'react';
-import { ADFEntity } from '@atlaskit/adf-utils';
+import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import { ExtensionParams, UpdateExtension } from './extension-handler';
 import { ExtensionIconModule, MaybeESModule } from './extension-manifest-common';
 import { ContextualToolbar } from './extension-manifest-toolbar-item';

package/dist/types/extensions/types/utils.d.ts

@@ -1,4 +1,4 @@
-import { ADFEntity } from '@atlaskit/adf-utils';
+import type { ADFEntity } from '@atlaskit/adf-utils/types';
 import { ExtensionModuleActionHandler, ExtensionType, Icon } from './extension-manifest';
 export declare type MenuItem = {
     key: string;

package/dist/types/provider-factory/autoformatting-provider.d.ts

@@ -1,4 +1,4 @@
-import { ADFEntity } from '@atlaskit/adf-utils';
+import type { ADFEntity } from '@atlaskit/adf-utils/types';
 export declare type AutoformatReplacement = ADFEntity;
 export declare type AutoformatHandler = (match: Array<string>) => Promise<AutoformatReplacement>;
 export declare type AutoformatRuleset = {

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

@@ -3,15 +3,13 @@ import { Breakpoints } from '../WidthProvider';
 export declare function mapBreakpointToLayoutMaxWidth(breakpoint: Breakpoints): 760 | 850 | 680;
 declare type BaseThemeWrapperProps = {
     breakpoint: Breakpoints;
-    dynamicTextSizing?: boolean;
     children: React.ReactNode;
     baseFontSize?: number;
 };
-export declare function BaseThemeWrapper({ breakpoint, dynamicTextSizing, baseFontSize, children, }: BaseThemeWrapperProps): JSX.Element;
+export declare function BaseThemeWrapper({ baseFontSize, children, }: BaseThemeWrapperProps): JSX.Element;
 declare type BaseThemeProps = {
     children: React.ReactNode;
-    dynamicTextSizing?: boolean;
     baseFontSize?: number;
 };
-export declare function BaseTheme({ children, dynamicTextSizing, baseFontSize, }: BaseThemeProps): JSX.Element;
+export declare function BaseTheme({ children, baseFontSize }: BaseThemeProps): JSX.Element;
 export {};

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

@@ -1,11 +1,12 @@
 import React from 'react';
+import { ShadowObserver } from './shadowObserver';
 export declare const shadowClassNames: {
     RIGHT_SHADOW: string;
     LEFT_SHADOW: string;
 };
 export interface OverflowShadowProps {
-    handleRef: (ref: HTMLElement | null) => void;
-    shadowClassNames: string;
+    handleRef?: (ref: HTMLElement | null) => void;
+    shadowClassNames?: string;
 }
 export interface OverflowShadowState {
     showLeftShadow: boolean;
@@ -13,12 +14,14 @@ export interface OverflowShadowState {
 }
 export interface OverflowShadowOptions {
     overflowSelector: string;
-    scrollableSelector?: string;
+    useShadowObserver?: boolean;
 }
 export default function overflowShadow<P>(Component: React.ComponentType<P & OverflowShadowProps> | React.StatelessComponent<P & OverflowShadowProps>, options: OverflowShadowOptions): {
     new (props: Readonly<P>): {
         overflowContainer?: HTMLElement | null | undefined;
         container?: HTMLElement | undefined;
+        shadowObserver?: ShadowObserver | undefined;
+        overflowContainerWidth: number;
         scrollable?: NodeList | undefined;
         diff?: number | undefined;
         state: {
@@ -33,6 +36,7 @@ export default function overflowShadow<P>(Component: React.ComponentType<P & Ove
         calcOverflowDiff: () => number;
         calcScrollableWidth: () => number;
         handleContainer: (container: HTMLElement | null) => void;
+        initShadowObserver(): void;
         render(): JSX.Element;
         context: any;
         setState<K extends keyof OverflowShadowState>(state: OverflowShadowState | ((prevState: Readonly<OverflowShadowState>, props: Readonly<P>) => OverflowShadowState | Pick<OverflowShadowState, K> | null) | Pick<OverflowShadowState, K> | null, callback?: (() => void) | undefined): void;
@@ -57,6 +61,8 @@ export default function overflowShadow<P>(Component: React.ComponentType<P & Ove
     new (props: P, context?: any): {
         overflowContainer?: HTMLElement | null | undefined;
         container?: HTMLElement | undefined;
+        shadowObserver?: ShadowObserver | undefined;
+        overflowContainerWidth: number;
         scrollable?: NodeList | undefined;
         diff?: number | undefined;
         state: {
@@ -71,6 +77,7 @@ export default function overflowShadow<P>(Component: React.ComponentType<P & Ove
         calcOverflowDiff: () => number;
         calcScrollableWidth: () => number;
         handleContainer: (container: HTMLElement | null) => void;
+        initShadowObserver(): void;
         render(): JSX.Element;
         context: any;
         setState<K extends keyof OverflowShadowState>(state: OverflowShadowState | ((prevState: Readonly<OverflowShadowState>, props: Readonly<P>) => OverflowShadowState | Pick<OverflowShadowState, K> | null) | Pick<OverflowShadowState, K> | null, callback?: (() => void) | undefined): void;

package/dist/types/ui/OverflowShadow/shadowObserver.d.ts

@@ -0,0 +1,27 @@
+export declare enum ShadowKeys {
+    SHOW_LEFT_SHADOW = "showLeftShadow",
+    SHOW_RIGHT_SHADOW = "showRightShadow"
+}
+export declare type ShadowsStates = {
+    [ShadowKey in ShadowKeys]: boolean;
+};
+export declare const shadowObserverClassNames: {
+    SENTINEL_LEFT: string;
+    SENTINEL_RIGHT: string;
+    SHADOW_CONTAINER: string;
+};
+export declare class ShadowObserver {
+    private intersectionObserver?;
+    private scrollContainer;
+    private onUpdateShadows;
+    private sentinels;
+    private requestCallbackId?;
+    readonly shadowStates: ShadowsStates;
+    constructor({ scrollContainer, onUpdateShadows, }: {
+        scrollContainer: HTMLElement;
+        onUpdateShadows: (eventData: ShadowsStates) => void;
+    });
+    private init;
+    private onIntersect;
+    dispose(): void;
+}

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

@@ -16,6 +16,7 @@ export { WidthConsumer, WidthProvider, getBreakpoint } from './WidthProvider';
 export type { WidthConsumerContext, Breakpoints } from './WidthProvider';
 export { default as overflowShadow, shadowClassNames } from './OverflowShadow';
 export type { OverflowShadowOptions, OverflowShadowProps, OverflowShadowState, } from './OverflowShadow';
+export { shadowObserverClassNames, ShadowObserver, } from './OverflowShadow/shadowObserver';
 export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';
 export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, expandLayoutWrapperStyle, ExpandLayoutWrapperWithRef, } from './Expand';
 export type { StyleProps as ExpandStyleProps } from './Expand';