@atlaskit/renderer 95.0.1 → 96.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/cjs/react/index.js +0 -2
  3. package/dist/cjs/react/nodes/embedCard.js +2 -5
  4. package/dist/cjs/react/nodes/inlineCard.js +5 -1
  5. package/dist/cjs/react/nodes/mediaInline.js +41 -4
  6. package/dist/cjs/react/nodes/mediaSingle/index.js +3 -7
  7. package/dist/cjs/react/nodes/table/colgroup.js +6 -12
  8. package/dist/cjs/react/nodes/table/sticky.js +2 -4
  9. package/dist/cjs/react/nodes/table/table.js +1 -3
  10. package/dist/cjs/react/nodes/table.js +20 -9
  11. package/dist/cjs/react/nodes/tableCell.js +5 -3
  12. package/dist/cjs/render-document.js +2 -2
  13. package/dist/cjs/ui/MediaCard.js +2 -2
  14. package/dist/cjs/ui/Renderer/breakout-ssr.js +6 -8
  15. package/dist/cjs/ui/Renderer/index.js +4 -12
  16. package/dist/cjs/ui/Renderer/style.js +3 -3
  17. package/dist/cjs/ui/annotations/hooks/use-events.js +4 -2
  18. package/dist/cjs/version.json +1 -1
  19. package/dist/es2019/react/index.js +0 -2
  20. package/dist/es2019/react/nodes/embedCard.js +4 -7
  21. package/dist/es2019/react/nodes/inlineCard.js +4 -1
  22. package/dist/es2019/react/nodes/mediaInline.js +36 -4
  23. package/dist/es2019/react/nodes/mediaSingle/index.js +5 -9
  24. package/dist/es2019/react/nodes/table/colgroup.js +2 -8
  25. package/dist/es2019/react/nodes/table/sticky.js +2 -4
  26. package/dist/es2019/react/nodes/table/table.js +1 -3
  27. package/dist/es2019/react/nodes/table.js +18 -9
  28. package/dist/es2019/react/nodes/tableCell.js +4 -1
  29. package/dist/es2019/render-document.js +1 -1
  30. package/dist/es2019/ui/MediaCard.js +1 -1
  31. package/dist/es2019/ui/Renderer/breakout-ssr.js +6 -8
  32. package/dist/es2019/ui/Renderer/index.js +3 -11
  33. package/dist/es2019/ui/Renderer/style.js +16 -3
  34. package/dist/es2019/ui/annotations/hooks/use-events.js +2 -2
  35. package/dist/es2019/version.json +1 -1
  36. package/dist/esm/react/index.js +0 -2
  37. package/dist/esm/react/nodes/embedCard.js +4 -7
  38. package/dist/esm/react/nodes/inlineCard.js +4 -1
  39. package/dist/esm/react/nodes/mediaInline.js +36 -4
  40. package/dist/esm/react/nodes/mediaSingle/index.js +5 -9
  41. package/dist/esm/react/nodes/table/colgroup.js +6 -12
  42. package/dist/esm/react/nodes/table/sticky.js +2 -4
  43. package/dist/esm/react/nodes/table/table.js +1 -3
  44. package/dist/esm/react/nodes/table.js +20 -9
  45. package/dist/esm/react/nodes/tableCell.js +5 -3
  46. package/dist/esm/render-document.js +1 -1
  47. package/dist/esm/ui/MediaCard.js +1 -1
  48. package/dist/esm/ui/Renderer/breakout-ssr.js +6 -8
  49. package/dist/esm/ui/Renderer/index.js +3 -11
  50. package/dist/esm/ui/Renderer/style.js +4 -3
  51. package/dist/esm/ui/annotations/hooks/use-events.js +4 -2
  52. package/dist/esm/version.json +1 -1
  53. package/dist/types/react/index.d.ts +0 -2
  54. package/dist/types/react/nodes/embedCard.d.ts +0 -1
  55. package/dist/types/react/nodes/extension.d.ts +6 -0
  56. package/dist/types/react/nodes/index.d.ts +1 -2
  57. package/dist/types/react/nodes/media.d.ts +0 -1
  58. package/dist/types/react/nodes/mediaInline.d.ts +6 -3
  59. package/dist/types/react/nodes/mediaSingle/index.d.ts +0 -1
  60. package/dist/types/react/nodes/table/sticky.d.ts +1 -2
  61. package/dist/types/react/nodes/table/table.d.ts +1 -1
  62. package/dist/types/react/nodes/table/types.d.ts +0 -1
  63. package/dist/types/react/types.d.ts +0 -1
  64. package/dist/types/renderer-context.d.ts +1 -0
  65. package/dist/types/ui/MediaCard.d.ts +1 -1
  66. package/dist/types/ui/Renderer/breakout-ssr.d.ts +2 -4
  67. package/dist/types/ui/renderer-props.d.ts +1 -0
  68. package/package.json +13 -12
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 96.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [`d8b3bc73330`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d8b3bc73330) - [ED-14507] Deprecate the allowDynamicTextSizing editor prop and remove all code related to it. This feature has been unused since 2020.
8
+
9
+ ### Minor Changes
10
+
11
+ - [`8949731bc6a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8949731bc6a) - ED-14608: Migrate adf-utils imports in atlassian-frontend to new child entry points to improve treeshaking
12
+ - [`b7b72b61dca`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b7b72b61dca) - ED-10337 Refactor overflow shadows using intersection observer to improve renderer performance on initial load and when scrolling contents of the tables and extensions horizontally.
13
+ This is affecting vertical shadows inside tables and extensions in renderer.
14
+ On the OverflowShadowOptions interface of the shadows component exported from editor-common we are also removing scrollableSelector option which is no longer used.
15
+
16
+ ### Patch Changes
17
+
18
+ - [`edc63f42fbb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/edc63f42fbb) - Fix: Media inline renderer sometimes stuck in loading view state
19
+ - [`b68e80d658f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b68e80d658f) - add hover previews feature flag
20
+ - [`d15a5a556af`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d15a5a556af) - ED-15037 fixed issue with extensions not showing correctly inside tables nested in expands
21
+ - [`27b079fa0a5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/27b079fa0a5) - [ED-14111] Allow spaces in input field in renderer table cell header
22
+ - [`789b211a5e5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/789b211a5e5) - Removed the use of :first-child and nth-child selectors in CSS
23
+ - [`420808687d2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/420808687d2) - EDM-3072: fix copy-paste of media inline stuck on loading and renderer copy-paste copying only text
24
+ - [`c5ef8dd9621`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c5ef8dd9621) - [ux] ED-14913 Fix expand text in renderer dark mode
25
+ - [`c4829f17445`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c4829f17445) - [ux] ED-10642 Fix null annotation ids in renderer
26
+ - Updated dependencies
27
+
3
28
  ## 95.0.1
4
29
 
5
30
  ### Patch Changes
@@ -190,7 +190,6 @@ var ReactSerializer = /*#__PURE__*/function () {
190
190
  this.appearance = init.appearance;
191
191
  this.disableHeadingIDs = init.disableHeadingIDs;
192
192
  this.disableActions = init.disableActions;
193
- this.allowDynamicTextSizing = init.allowDynamicTextSizing;
194
193
  this.allowHeadingAnchorLinks = init.allowHeadingAnchorLinks;
195
194
  this.allowCopyToClipboard = init.allowCopyToClipboard;
196
195
  this.allowPlaceholderText = init.allowPlaceholderText;
@@ -561,7 +560,6 @@ var ReactSerializer = /*#__PURE__*/function () {
561
560
  rendererContext: this.rendererContext,
562
561
  serializer: this,
563
562
  content: node.content ? node.content.toJSON() : undefined,
564
- allowDynamicTextSizing: this.allowDynamicTextSizing,
565
563
  allowHeadingAnchorLinks: this.allowHeadingAnchorLinks,
566
564
  allowCopyToClipboard: this.allowCopyToClipboard,
567
565
  allowPlaceholderText: this.allowPlaceholderText,
@@ -44,7 +44,6 @@ function EmbedCard(props) {
44
44
  layout = props.layout,
45
45
  width = props.width,
46
46
  isInsideOfBlockNode = props.isInsideOfBlockNode,
47
- allowDynamicTextSizing = props.allowDynamicTextSizing,
48
47
  rendererAppearance = props.rendererAppearance;
49
48
  var embedIframeRef = (0, _react2.useRef)(null);
50
49
  var onClick = (0, _getCardClickHandler.getCardClickHandler)(eventHandlers, url);
@@ -123,10 +122,8 @@ function EmbedCard(props) {
123
122
  if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
124
123
  var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= _editorSharedStyles.akEditorDefaultLayoutWidth;
125
124
 
126
- if (isContainerSizeGreaterThanMaxFullPageWidth && allowDynamicTextSizing) {
127
- nonFullWidthSize = (0, _ui.mapBreakpointToLayoutMaxWidth)(breakpoint);
128
- } else if (isContainerSizeGreaterThanMaxFullPageWidth) {
129
- nonFullWidthSize = (0, _editorSharedStyles.getAkEditorFullPageMaxWidth)(allowDynamicTextSizing);
125
+ if (isContainerSizeGreaterThanMaxFullPageWidth) {
126
+ nonFullWidthSize = _editorSharedStyles.akEditorDefaultLayoutWidth;
130
127
  } else {
131
128
  nonFullWidthSize = containerWidth - padding;
132
129
  }
@@ -23,6 +23,8 @@ var _SmartCardStorage = require("../../ui/SmartCardStorage");
23
23
 
24
24
  var _getCardClickHandler = require("../utils/getCardClickHandler");
25
25
 
26
+ var _useFeatureFlags = require("../../use-feature-flags");
27
+
26
28
  var InlineCard = function InlineCard(props) {
27
29
  var url = props.url,
28
30
  data = props.data,
@@ -36,6 +38,7 @@ var InlineCard = function InlineCard(props) {
36
38
  onClick: onClick,
37
39
  container: portal
38
40
  };
41
+ var featureFlags = (0, _useFeatureFlags.useFeatureFlags)();
39
42
 
40
43
  if (smartLinks !== null && smartLinks !== void 0 && smartLinks.ssr && url) {
41
44
  return /*#__PURE__*/_react.default.createElement(_ssr.CardSSR, {
@@ -51,7 +54,8 @@ var InlineCard = function InlineCard(props) {
51
54
  }, /*#__PURE__*/_react.default.createElement(_fallback.CardErrorBoundary, (0, _extends2.default)({
52
55
  unsupportedComponent: _ui.UnsupportedInline
53
56
  }, cardProps), /*#__PURE__*/_react.default.createElement(_smartCard.Card, (0, _extends2.default)({
54
- appearance: "inline"
57
+ appearance: "inline",
58
+ showHoverPreview: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.showHoverPreview
55
59
  }, cardProps, {
56
60
  onResolve: function onResolve(data) {
57
61
  if (!data.url || !data.title) {
@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
9
9
  });
10
10
  exports.default = exports.RenderMediaInline = void 0;
11
11
 
12
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
+
12
14
  var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
13
15
 
14
16
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
@@ -19,8 +21,14 @@ var _react = _interopRequireWildcard(require("react"));
19
21
 
20
22
  var _mediaCard = require("@atlaskit/media-card");
21
23
 
24
+ var _mediaUi = require("@atlaskit/media-ui");
25
+
22
26
  var _providerFactory = require("@atlaskit/editor-common/provider-factory");
23
27
 
28
+ var _MediaCard = require("../../ui/MediaCard");
29
+
30
+ var _reactIntlNext = require("react-intl-next");
31
+
24
32
  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); }
25
33
 
26
34
  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; }
@@ -28,7 +36,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
28
36
  var RenderMediaInline = function RenderMediaInline(props) {
29
37
  var mediaProvider = props.mediaProvider;
30
38
 
31
- var _useState = (0, _react.useState)({}),
39
+ var _useState = (0, _react.useState)(),
32
40
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
33
41
  viewMediaClientConfigState = _useState2[0],
34
42
  setViewMediaClientConfigState = _useState2[1];
@@ -68,6 +76,18 @@ var RenderMediaInline = function RenderMediaInline(props) {
68
76
  return _ref.apply(this, arguments);
69
77
  };
70
78
  }();
79
+ /*
80
+ * Only show the loading view if the media provider is not ready
81
+ * prevents calling the media API before the provider is ready
82
+ */
83
+
84
+
85
+ if (!viewMediaClientConfigState) {
86
+ return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardLoadingView, {
87
+ message: "",
88
+ isSelected: false
89
+ });
90
+ }
71
91
 
72
92
  return /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
73
93
  identifier: props.identifier,
@@ -81,17 +101,33 @@ exports.RenderMediaInline = RenderMediaInline;
81
101
  var MediaInline = function MediaInline(props) {
82
102
  var collection = props.collection,
83
103
  id = props.id,
84
- providers = props.providers;
104
+ providers = props.providers,
105
+ intl = props.intl;
85
106
  var identifier = {
86
107
  id: id,
87
108
  mediaItemType: 'file',
88
109
  collectionName: collection
89
110
  };
90
- return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
111
+ var defaultIntl = (0, _reactIntlNext.createIntl)({
112
+ locale: 'en'
113
+ });
114
+ return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, (0, _MediaCard.getClipboardAttrs)({
115
+ id: id,
116
+ collection: collection
117
+ }), {
118
+ "data-node-type": "mediaInline"
119
+ }), /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
91
120
  providers: ['mediaProvider'],
92
121
  providerFactory: providers,
93
122
  renderNode: function renderNode(providers) {
94
123
  var mediaProvider = providers.mediaProvider;
124
+
125
+ if (!mediaProvider) {
126
+ return /*#__PURE__*/_react.default.createElement(_mediaUi.MediaInlineCardErroredView, {
127
+ message: (intl || defaultIntl).formatMessage(_mediaUi.messages.couldnt_load_file)
128
+ });
129
+ }
130
+
95
131
  return /*#__PURE__*/_react.default.createElement(RenderMediaInline, {
96
132
  identifier: identifier,
97
133
  mediaProvider: mediaProvider
@@ -100,5 +136,6 @@ var MediaInline = function MediaInline(props) {
100
136
  }));
101
137
  };
102
138
 
103
- var _default = MediaInline;
139
+ var _default = (0, _reactIntlNext.injectIntl)(MediaInline);
140
+
104
141
  exports.default = _default;
@@ -77,7 +77,6 @@ var MediaSingle = function MediaSingle(props) {
77
77
  var rendererAppearance = props.rendererAppearance,
78
78
  featureFlags = props.featureFlags,
79
79
  isInsideOfBlockNode = props.isInsideOfBlockNode,
80
- allowDynamicTextSizing = props.allowDynamicTextSizing,
81
80
  layout = props.layout,
82
81
  children = props.children,
83
82
  pctWidth = props.width;
@@ -157,7 +156,6 @@ var MediaSingle = function MediaSingle(props) {
157
156
 
158
157
  var calcDimensions = function calcDimensions(mediaContainerWidth, mediaBreakpoint) {
159
158
  var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
160
- var breakpoint = mediaBreakpoint || (0, _ui.getBreakpoint)(containerWidth);
161
159
  var maxWidth = containerWidth;
162
160
  var maxHeight = height / width * maxWidth;
163
161
  var cardDimensions = {
@@ -167,12 +165,10 @@ var MediaSingle = function MediaSingle(props) {
167
165
  var nonFullWidthSize = containerWidth;
168
166
 
169
167
  if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
170
- var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= (0, _editorSharedStyles.getAkEditorFullPageMaxWidth)(allowDynamicTextSizing);
168
+ var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= _editorSharedStyles.akEditorDefaultLayoutWidth;
171
169
 
172
- if (isContainerSizeGreaterThanMaxFullPageWidth && allowDynamicTextSizing) {
173
- nonFullWidthSize = (0, _ui.mapBreakpointToLayoutMaxWidth)(breakpoint);
174
- } else if (isContainerSizeGreaterThanMaxFullPageWidth) {
175
- nonFullWidthSize = (0, _editorSharedStyles.getAkEditorFullPageMaxWidth)(allowDynamicTextSizing);
170
+ if (isContainerSizeGreaterThanMaxFullPageWidth) {
171
+ nonFullWidthSize = _editorSharedStyles.akEditorDefaultLayoutWidth;
176
172
  } else {
177
173
  nonFullWidthSize = containerWidth - padding;
178
174
  }
@@ -27,11 +27,7 @@ var getTableLayoutWidth = function getTableLayoutWidth(layout, opts) {
27
27
  return _editorSharedStyles.akEditorWideLayoutWidth;
28
28
 
29
29
  default:
30
- var _ref = opts || {},
31
- containerWidth = _ref.containerWidth,
32
- isDynamicTextSizingEnabled = _ref.isDynamicTextSizingEnabled;
33
-
34
- return (0, _breakoutSsr.calcLineLength)(containerWidth, isDynamicTextSizingEnabled);
30
+ return (0, _breakoutSsr.calcLineLength)();
35
31
  }
36
32
  };
37
33
 
@@ -57,10 +53,10 @@ var fixColumnWidth = function fixColumnWidth(columnWidth, _tableWidth, _layoutWi
57
53
  columnWidth - _styles.tableCellBorderWidth, zeroWidthColumnsCount ? _editorSharedStyles.akEditorTableLegacyCellMinWidth : _styles.tableCellMinWidth);
58
54
  };
59
55
 
60
- var calcScalePercent = function calcScalePercent(_ref2) {
61
- var renderWidth = _ref2.renderWidth,
62
- tableWidth = _ref2.tableWidth,
63
- maxScale = _ref2.maxScale;
56
+ var calcScalePercent = function calcScalePercent(_ref) {
57
+ var renderWidth = _ref.renderWidth,
58
+ tableWidth = _ref.tableWidth,
59
+ maxScale = _ref.maxScale;
64
60
  var diffPercent = 1 - renderWidth / tableWidth;
65
61
  return diffPercent < maxScale ? diffPercent : maxScale;
66
62
  };
@@ -71,8 +67,7 @@ var Colgroup = function Colgroup(props) {
71
67
  var columnWidths = props.columnWidths,
72
68
  layout = props.layout,
73
69
  isNumberColumnEnabled = props.isNumberColumnEnabled,
74
- renderWidth = props.renderWidth,
75
- allowDynamicTextSizing = props.allowDynamicTextSizing;
70
+ renderWidth = props.renderWidth;
76
71
 
77
72
  if (!columnWidths || !isTableResized(columnWidths)) {
78
73
  return null;
@@ -80,7 +75,6 @@ var Colgroup = function Colgroup(props) {
80
75
 
81
76
 
82
77
  var layoutWidth = getTableLayoutWidth(layout, {
83
- isDynamicTextSizingEnabled: allowDynamicTextSizing,
84
78
  containerWidth: renderWidth
85
79
  });
86
80
  var maxTableWidth = renderWidth < layoutWidth ? renderWidth : layoutWidth; // If table has a layout of default, it is confined by the defined column width.
@@ -84,7 +84,6 @@ var StickyTable = function StickyTable(_ref) {
84
84
  children = _ref.children,
85
85
  columnWidths = _ref.columnWidths,
86
86
  renderWidth = _ref.renderWidth,
87
- allowDynamicTextSizing = _ref.allowDynamicTextSizing,
88
87
  rowHeight = _ref.rowHeight;
89
88
  return (0, _react2.jsx)("div", {
90
89
  css: {
@@ -97,7 +96,7 @@ var StickyTable = function StickyTable(_ref) {
97
96
  mode: rowHeight > 300 ? 'none' : mode,
98
97
  wrapperWidth: wrapperWidth
99
98
  }, (0, _react2.jsx)("div", {
100
- className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(shadowClassNames),
99
+ className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(shadowClassNames || ''),
101
100
  "data-layout": layout,
102
101
  style: {
103
102
  width: tableWidth
@@ -112,8 +111,7 @@ var StickyTable = function StickyTable(_ref) {
112
111
  columnWidths: columnWidths,
113
112
  layout: layout,
114
113
  isNumberColumnEnabled: isNumberColumnEnabled,
115
- renderWidth: renderWidth,
116
- allowDynamicTextSizing: allowDynamicTextSizing
114
+ renderWidth: renderWidth
117
115
  },
118
116
  /**
119
117
  * @see https://product-fabric.atlassian.net/browse/ED-10235
@@ -17,7 +17,6 @@ var Table = /*#__PURE__*/_react.default.memo(function (_ref) {
17
17
  columnWidths = _ref.columnWidths,
18
18
  layout = _ref.layout,
19
19
  renderWidth = _ref.renderWidth,
20
- allowDynamicTextSizing = _ref.allowDynamicTextSizing,
21
20
  children = _ref.children;
22
21
  return /*#__PURE__*/_react.default.createElement("table", {
23
22
  "data-number-column": isNumberColumnEnabled,
@@ -26,8 +25,7 @@ var Table = /*#__PURE__*/_react.default.memo(function (_ref) {
26
25
  columnWidths: columnWidths,
27
26
  layout: layout,
28
27
  isNumberColumnEnabled: isNumberColumnEnabled,
29
- renderWidth: renderWidth,
30
- allowDynamicTextSizing: allowDynamicTextSizing
28
+ renderWidth: renderWidth
31
29
  }), /*#__PURE__*/_react.default.createElement("tbody", null, children));
32
30
  });
33
31
 
@@ -307,13 +307,12 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
307
307
  isNumberColumnEnabled = _this$props.isNumberColumnEnabled,
308
308
  layout = _this$props.layout,
309
309
  renderWidth = _this$props.renderWidth,
310
- allowDynamicTextSizing = _this$props.allowDynamicTextSizing,
311
310
  columnWidths = _this$props.columnWidths,
312
311
  stickyHeaders = _this$props.stickyHeaders,
313
312
  tableNode = _this$props.tableNode;
314
313
  var stickyMode = this.state.stickyMode;
315
314
  var tableWidth = (0, _styles.calcTableWidth)(layout, renderWidth, false);
316
- var lineLength = (0, _breakoutSsr.calcLineLength)(renderWidth, allowDynamicTextSizing);
315
+ var lineLength = (0, _breakoutSsr.calcLineLength)();
317
316
  var left;
318
317
 
319
318
  if (canUseLinelength(this.props.rendererAppearance) && tableWidth !== 'inherit') {
@@ -338,10 +337,9 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
338
337
  innerRef: this.stickyWrapperRef,
339
338
  wrapperWidth: wrapperWidth,
340
339
  columnWidths: columnWidths,
341
- rowHeight: this.headerRowHeight,
342
- allowDynamicTextSizing: allowDynamicTextSizing
340
+ rowHeight: this.headerRowHeight
343
341
  }, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
344
- className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames),
342
+ className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
345
343
  "data-layout": layout,
346
344
  ref: this.props.handleRef,
347
345
  style: {
@@ -357,8 +355,7 @@ var TableContainer = /*#__PURE__*/function (_React$Component) {
357
355
  columnWidths: columnWidths,
358
356
  layout: layout,
359
357
  isNumberColumnEnabled: isNumberColumnEnabled,
360
- renderWidth: renderWidth,
361
- allowDynamicTextSizing: allowDynamicTextSizing
358
+ renderWidth: renderWidth
362
359
  }, this.grabFirstRowRef(children)))));
363
360
  }
364
361
  }]);
@@ -440,14 +437,28 @@ var TableProcessor = /*#__PURE__*/function (_React$Component2) {
440
437
 
441
438
  exports.TableProcessor = TableProcessor;
442
439
  var TableWithShadows = (0, _ui.overflowShadow)(TableProcessor, {
443
- overflowSelector: ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER)
440
+ overflowSelector: ".".concat(_styles.TableSharedCssClassName.TABLE_NODE_WRAPPER),
441
+ useShadowObserver: true
444
442
  });
445
443
 
446
444
  var TableWithWidth = function TableWithWidth(props) {
447
445
  return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
446
+ var _props$columnWidths;
447
+
448
448
  var width = _ref2.width;
449
449
  var renderWidth = props.rendererAppearance === 'full-page' ? width - _style.FullPagePadding * 2 : width;
450
- return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({
450
+ var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
451
+ return total + val;
452
+ }, 0)) || 0;
453
+
454
+ if (colWidthsSum) {
455
+ return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({
456
+ renderWidth: renderWidth
457
+ }, props));
458
+ } // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
459
+
460
+
461
+ return /*#__PURE__*/_react.default.createElement(TableProcessor, (0, _extends2.default)({
451
462
  renderWidth: renderWidth
452
463
  }, props));
453
464
  });
@@ -168,8 +168,10 @@ var withSortableColumn = function withSortableColumn(WrapperComponent) {
168
168
  _this = _super2.call(this, props);
169
169
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyPress", function (event) {
170
170
  var keys = [' ', 'Enter', 'Spacebar'];
171
+ var _ref = event.target,
172
+ tagName = _ref.tagName; // trigger sorting if space or enter are clicked but not when in an input field (template variables)
171
173
 
172
- if (keys.includes(event.key)) {
174
+ if (keys.includes(event.key) && !IgnoreSorting.includes(tagName)) {
173
175
  event.preventDefault();
174
176
 
175
177
  _this.onClick(event);
@@ -177,8 +179,8 @@ var withSortableColumn = function withSortableColumn(WrapperComponent) {
177
179
  });
178
180
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClick", function (event) {
179
181
  // ignore sorting when specific elements are clicked
180
- var _ref = event.target,
181
- tagName = _ref.tagName;
182
+ var _ref2 = event.target,
183
+ tagName = _ref2.tagName;
182
184
 
183
185
  if (IgnoreSorting.includes(tagName)) {
184
186
  return;
@@ -23,7 +23,7 @@ var _events = require("./analytics/events");
23
23
 
24
24
  var _unsupportedContent = require("./analytics/unsupported-content");
25
25
 
26
- var _adfUtils = require("@atlaskit/adf-utils");
26
+ var _transforms = require("@atlaskit/adf-utils/transforms");
27
27
 
28
28
  var SUPPORTS_HIRES_TIMER_API = !!(window.performance && performance.now);
29
29
 
@@ -44,7 +44,7 @@ var _validation = function _validation(doc, schema, adfStage, useSpecBasedValida
44
44
  if (useSpecBasedValidator) {
45
45
  // link mark on mediaSingle is deprecated, need to move link mark to child media node
46
46
  // https://product-fabric.atlassian.net/browse/ED-14043
47
- var _transformMediaLinkMa = (0, _adfUtils.transformMediaLinkMarks)(doc),
47
+ var _transformMediaLinkMa = (0, _transforms.transformMediaLinkMarks)(doc),
48
48
  transformedAdf = _transformMediaLinkMa.transformedAdf,
49
49
  isTransformed = _transformMediaLinkMa.isTransformed;
50
50
 
@@ -29,7 +29,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
29
29
 
30
30
  var _react = _interopRequireWildcard(require("react"));
31
31
 
32
- var _adfUtils = require("@atlaskit/adf-utils");
32
+ var _traverse = require("@atlaskit/adf-utils/traverse");
33
33
 
34
34
  var _mediaCard = require("@atlaskit/media-card");
35
35
 
@@ -56,7 +56,7 @@ var getListOfIdentifiersFromDoc = function getListOfIdentifiersFromDoc(doc) {
56
56
  return [];
57
57
  }
58
58
 
59
- return (0, _adfUtils.filter)(doc, function (node) {
59
+ return (0, _traverse.filter)(doc, function (node) {
60
60
  return node.type === 'media';
61
61
  }).reduce(function (identifierList, mediaNode) {
62
62
  if (mediaNode.attrs) {
@@ -19,9 +19,7 @@ var _utils = require("@atlaskit/editor-common/utils");
19
19
  *
20
20
  * More info: https://product-fabric.atlassian.net/wiki/spaces/E/pages/1216218119/Renderer+SSR+for+Breakout+Nodes
21
21
  */
22
- function BreakoutSSRInlineScript(_ref) {
23
- var allowDynamicTextSizing = _ref.allowDynamicTextSizing;
24
-
22
+ function BreakoutSSRInlineScript() {
25
23
  /**
26
24
  * Should only inline this script while SSR,
27
25
  * not needed on the client side.
@@ -31,7 +29,7 @@ function BreakoutSSRInlineScript(_ref) {
31
29
  }
32
30
 
33
31
  var id = Math.floor(Math.random() * (9999999999 - 9999 + 1)) + 9999;
34
- var context = createBreakoutInlineScript(id, allowDynamicTextSizing);
32
+ var context = createBreakoutInlineScript(id);
35
33
  return /*#__PURE__*/_react.default.createElement("script", {
36
34
  "data-breakout-script-id": id,
37
35
  dangerouslySetInnerHTML: {
@@ -40,14 +38,14 @@ function BreakoutSSRInlineScript(_ref) {
40
38
  });
41
39
  }
42
40
 
43
- function createBreakoutInlineScript(id, allowDynamicTextSizing) {
44
- return "\n (function(window){\n ".concat(breakoutInlineScriptContext, ";\n (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", ").concat(allowDynamicTextSizing, ", breakoutConsts);\n })(window);\n");
41
+ function createBreakoutInlineScript(id) {
42
+ return "\n (function(window){\n ".concat(breakoutInlineScriptContext, ";\n (").concat(applyBreakoutAfterSSR.toString(), ")(\"").concat(id, "\", breakoutConsts);\n })(window);\n");
45
43
  }
46
44
 
47
45
  var breakoutInlineScriptContext = "\n var breakoutConsts = ".concat(JSON.stringify(_utils.breakoutConsts), ";\n breakoutConsts.mapBreakpointToLayoutMaxWidth = ").concat(_utils.breakoutConsts.mapBreakpointToLayoutMaxWidth.toString(), ";\n breakoutConsts.getBreakpoint = ").concat(_utils.breakoutConsts.getBreakpoint.toString(), ";\n breakoutConsts.calcBreakoutWidth = ").concat(_utils.breakoutConsts.calcBreakoutWidth.toString(), ";\n breakoutConsts.calcLineLength = ").concat(_utils.breakoutConsts.calcLineLength.toString(), ";\n breakoutConsts.calcWideWidth = ").concat(_utils.breakoutConsts.calcWideWidth.toString(), ";\n");
48
46
  exports.breakoutInlineScriptContext = breakoutInlineScriptContext;
49
47
 
50
- function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
48
+ function applyBreakoutAfterSSR(id, breakoutConsts) {
51
49
  var MEDIA_NODE_TYPE = 'mediaSingle';
52
50
  var WIDE_LAYOUT_MODES = ['full-width', 'wide'];
53
51
 
@@ -101,7 +99,7 @@ function applyBreakoutAfterSSR(id, allowDynamicTextSizing, breakoutConsts) {
101
99
  // https://bitbucket.org/atlassian/atlassian-frontend/src/77938aee0c140d02ff99b98a03849be1236865b4/packages/editor/renderer/src/react/nodes/table.tsx#table.tsx-235:245
102
100
 
103
101
  if (node.classList.contains('pm-table-container')) {
104
- var lineLength = breakoutConsts.calcLineLength(renderer.offsetWidth, allowDynamicTextSizing);
102
+ var lineLength = breakoutConsts.calcLineLength();
105
103
  var left = lineLength / 2 - parseInt(width) / 2;
106
104
 
107
105
  if (left < 0) {
@@ -31,7 +31,7 @@ var _react2 = require("@emotion/react");
31
31
 
32
32
  var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
33
33
 
34
- var _adfUtils = require("@atlaskit/adf-utils");
34
+ var _traverse = require("@atlaskit/adf-utils/traverse");
35
35
 
36
36
  var _providerFactory = require("@atlaskit/editor-common/provider-factory");
37
37
 
@@ -224,7 +224,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
224
224
  platform: _events.PLATFORM.WEB,
225
225
  duration: duration,
226
226
  ttfb: (0, _utils.getResponseEndTime)(),
227
- nodes: (0, _adfUtils.reduce)(_this2.props.document, function (acc, node) {
227
+ nodes: (0, _traverse.reduce)(_this2.props.document, function (acc, node) {
228
228
  acc[node.type] = (acc[node.type] || 0) + 1;
229
229
  return acc;
230
230
  }, {}),
@@ -266,7 +266,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
266
266
  appearance: props.appearance,
267
267
  disableHeadingIDs: props.disableHeadingIDs,
268
268
  disableActions: props.disableActions,
269
- allowDynamicTextSizing: props.allowDynamicTextSizing,
270
269
  allowHeadingAnchorLinks: props.allowHeadingAnchorLinks,
271
270
  allowColumnSorting: props.allowColumnSorting,
272
271
  fireAnalyticsEvent: this.fireAnalyticsEvent,
@@ -295,7 +294,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
295
294
  onError = _this$props.onError,
296
295
  appearance = _this$props.appearance,
297
296
  adfStage = _this$props.adfStage,
298
- allowDynamicTextSizing = _this$props.allowDynamicTextSizing,
299
297
  truncated = _this$props.truncated,
300
298
  maxHeight = _this$props.maxHeight,
301
299
  fadeOutHeight = _this$props.fadeOutHeight,
@@ -377,7 +375,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
377
375
  }
378
376
  }, (0, _react2.jsx)(_SmartCardStorage.Provider, null, (0, _react2.jsx)(RendererWrapper, {
379
377
  appearance: appearance,
380
- dynamicTextSizing: !!allowDynamicTextSizing,
381
378
  allowNestedHeaderLinks: allowNestedHeaderLinks,
382
379
  allowColumnSorting: allowColumnSorting,
383
380
  allowCopyToClipboard: allowCopyToClipboard,
@@ -386,9 +383,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
386
383
  innerRef: this.editorRef,
387
384
  onClick: handleWrapperOnClick,
388
385
  onMouseDown: this.onMouseDownEditView
389
- }, enableSsrInlineScripts ? (0, _react2.jsx)(_breakoutSsr.BreakoutSSRInlineScript, {
390
- allowDynamicTextSizing: !!allowDynamicTextSizing
391
- }) : null, (0, _react2.jsx)(RendererActionsInternalUpdater, {
386
+ }, enableSsrInlineScripts ? (0, _react2.jsx)(_breakoutSsr.BreakoutSSRInlineScript, null) : null, (0, _react2.jsx)(RendererActionsInternalUpdater, {
392
387
  doc: pmDoc,
393
388
  schema: schema,
394
389
  onAnalyticsEvent: this.fireAnalyticsEvent
@@ -413,7 +408,6 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
413
408
 
414
409
  return (0, _react2.jsx)(RendererWrapper, {
415
410
  appearance: appearance,
416
- dynamicTextSizing: !!allowDynamicTextSizing,
417
411
  allowCopyToClipboard: allowCopyToClipboard,
418
412
  allowPlaceholderText: allowPlaceholderText,
419
413
  allowColumnSorting: allowColumnSorting,
@@ -469,7 +463,6 @@ var RendererWithAnalytics = /*#__PURE__*/_react.default.memo(function (props) {
469
463
 
470
464
  var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
471
465
  var allowColumnSorting = props.allowColumnSorting,
472
- dynamicTextSizing = props.dynamicTextSizing,
473
466
  allowNestedHeaderLinks = props.allowNestedHeaderLinks,
474
467
  innerRef = props.innerRef,
475
468
  appearance = props.appearance,
@@ -479,8 +472,7 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
479
472
  return (0, _react2.jsx)(_ui.WidthProvider, {
480
473
  className: "ak-renderer-wrapper"
481
474
  }, (0, _react2.jsx)(_ui.BaseTheme, {
482
- dynamicTextSizing: dynamicTextSizing,
483
- baseFontSize: !dynamicTextSizing && appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
475
+ baseFontSize: appearance && appearance !== 'comment' ? _editorSharedStyles.akEditorFullPageDefaultFontSize : undefined
484
476
  }, (0, _react2.jsx)("div", {
485
477
  ref: innerRef,
486
478
  onClick: onClick,