@atlaskit/renderer 109.30.1 → 109.30.2

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 (58) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/react/marks/alignment.js +1 -1
  3. package/dist/cjs/react/nodes/codeBlock/components/codeBlockContainer.js +1 -1
  4. package/dist/cjs/react/nodes/codeBlock/components/lightWeightCodeBlock.js +2 -2
  5. package/dist/cjs/react/nodes/media/index.js +2 -2
  6. package/dist/cjs/react/nodes/multiBodiedExtension.js +2 -2
  7. package/dist/cjs/react/nodes/panel.js +2 -2
  8. package/dist/cjs/react/nodes/table/colgroup.js +8 -8
  9. package/dist/cjs/ui/Expand.js +3 -3
  10. package/dist/cjs/ui/Renderer/index.js +1 -1
  11. package/dist/cjs/ui/Renderer/style.js +9 -9
  12. package/dist/cjs/ui/annotations/element/mark.js +1 -1
  13. package/dist/es2019/react/marks/alignment.js +2 -2
  14. package/dist/es2019/react/nodes/codeBlock/components/codeBlockContainer.js +26 -19
  15. package/dist/es2019/react/nodes/codeBlock/components/lightWeightCodeBlock.js +9 -9
  16. package/dist/es2019/react/nodes/media/index.js +14 -14
  17. package/dist/es2019/react/nodes/multiBodiedExtension.js +24 -24
  18. package/dist/es2019/react/nodes/panel.js +15 -15
  19. package/dist/es2019/react/nodes/table/colgroup.js +8 -8
  20. package/dist/es2019/ui/Expand.js +13 -13
  21. package/dist/es2019/ui/Renderer/index.js +1 -1
  22. package/dist/es2019/ui/Renderer/style.js +575 -585
  23. package/dist/es2019/ui/annotations/element/mark.js +10 -10
  24. package/dist/esm/react/marks/alignment.js +1 -1
  25. package/dist/esm/react/nodes/codeBlock/components/codeBlockContainer.js +1 -1
  26. package/dist/esm/react/nodes/codeBlock/components/lightWeightCodeBlock.js +2 -2
  27. package/dist/esm/react/nodes/media/index.js +2 -2
  28. package/dist/esm/react/nodes/multiBodiedExtension.js +2 -2
  29. package/dist/esm/react/nodes/panel.js +2 -2
  30. package/dist/esm/react/nodes/table/colgroup.js +8 -8
  31. package/dist/esm/ui/Expand.js +3 -3
  32. package/dist/esm/ui/Renderer/index.js +1 -1
  33. package/dist/esm/ui/Renderer/style.js +9 -9
  34. package/dist/esm/ui/annotations/element/mark.js +1 -1
  35. package/dist/types/actions.d.ts +1 -1
  36. package/dist/types/react/hooks/use-bidi-warnings.d.ts +1 -1
  37. package/dist/types/react/nodes/extension.d.ts +1 -2
  38. package/dist/types/react/nodes/table/colgroup.d.ts +1 -1
  39. package/dist/types/ui/RendererActionsContext/index.d.ts +1 -1
  40. package/dist/types/ui/SmartCardStorage.d.ts +1 -1
  41. package/dist/types/ui/TaskItemsFormatContext/TaskItemsFormatContext.d.ts +1 -4
  42. package/dist/types/ui/TaskItemsFormatContext/index.d.ts +1 -1
  43. package/dist/types/ui/active-header-id-provider.d.ts +1 -1
  44. package/dist/types/ui/annotations/contexts/AnnotationHoverContext.d.ts +1 -1
  45. package/dist/types/ui/annotations/hooks/use-events.d.ts +1 -1
  46. package/dist/types-ts4.5/actions.d.ts +1 -1
  47. package/dist/types-ts4.5/react/hooks/use-bidi-warnings.d.ts +1 -1
  48. package/dist/types-ts4.5/react/nodes/extension.d.ts +1 -2
  49. package/dist/types-ts4.5/react/nodes/table/colgroup.d.ts +1 -1
  50. package/dist/types-ts4.5/ui/RendererActionsContext/index.d.ts +1 -1
  51. package/dist/types-ts4.5/ui/SmartCardStorage.d.ts +1 -1
  52. package/dist/types-ts4.5/ui/TaskItemsFormatContext/index.d.ts +1 -1
  53. package/dist/types-ts4.5/ui/active-header-id-provider.d.ts +1 -1
  54. package/dist/types-ts4.5/ui/annotations/contexts/AnnotationHoverContext.d.ts +1 -1
  55. package/dist/types-ts4.5/ui/annotations/hooks/use-events.d.ts +1 -1
  56. package/docs/0-intro.tsx +12 -21
  57. package/package.json +2 -2
  58. package/report.api.md +478 -492
@@ -8,18 +8,18 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
8
8
 
9
9
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState` is not object-safe
10
10
  const markStyles = () => css`
11
- color: inherit;
12
- background-color: unset;
13
- -webkit-tap-highlight-color: transparent;
11
+ color: inherit;
12
+ background-color: unset;
13
+ -webkit-tap-highlight-color: transparent;
14
14
 
15
- &[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}'] {
16
- ${AnnotationSharedCSSByState().blur};
15
+ &[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}'] {
16
+ ${AnnotationSharedCSSByState().blur};
17
17
 
18
- &:focus,
19
- &[data-has-focus='true'] {
20
- ${AnnotationSharedCSSByState().focus};
21
- }
22
- }
18
+ &:focus,
19
+ &[data-has-focus='true'] {
20
+ ${AnnotationSharedCSSByState().focus};
21
+ }
22
+ }
23
23
  `;
24
24
  export const MarkComponent = ({
25
25
  annotationParentIds,
@@ -7,7 +7,7 @@ import { css, jsx } from '@emotion/react';
7
7
  import { alignmentPositionMap } from '@atlaskit/adf-schema';
8
8
  var MarkWrapper = function MarkWrapper(props) {
9
9
  var styles = props['data-align'] ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
10
- css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n text-align: ", ";\n "])), alignmentPositionMap[props['data-align']]) : '';
10
+ css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\ttext-align: ", ";\n\t\t\t"])), alignmentPositionMap[props['data-align']]) : '';
11
11
  return (
12
12
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
13
13
  jsx("div", _extends({
@@ -9,7 +9,7 @@ import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
9
9
  import CodeBlockButtonContainer from './codeBlockButtonContainer';
10
10
 
11
11
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
12
- var codeBlockStyleOverrides = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n tab-size: 4;\n background-color: ", ";\n\n &:hover {\n button {\n opacity: 1;\n }\n }\n\n button {\n opacity: 0;\n transition: opacity 0.2s ease 0s;\n }\n\n ", " {\n font-size: ", ";\n line-height: 1.5rem;\n background-image: ", ";\n background-attachment: local, local, local, local, scroll, scroll, scroll,\n scroll;\n background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n }\n"])), "var(--ds-surface-raised, ".concat(N20, ")"), CodeBlockSharedCssClassName.DS_CODEBLOCK, relativeFontSizeToBase16(fontSize()), overflowShadow({
12
+ var codeBlockStyleOverrides = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\ttab-size: 4;\n\tbackground-color: ", ";\n\n\t&:hover {\n\t\tbutton {\n\t\t\topacity: 1;\n\t\t}\n\t}\n\n\tbutton {\n\t\topacity: 0;\n\t\ttransition: opacity 0.2s ease 0s;\n\t}\n\n\t", " {\n\t\tfont-size: ", ";\n\t\tline-height: 1.5rem;\n\t\tbackground-image: ", ";\n\t\tbackground-attachment: local, local, local, local, scroll, scroll, scroll, scroll;\n\t\tbackground-position:\n\t\t\t0 0,\n\t\t\t0 0,\n\t\t\t100% 0,\n\t\t\t100% 0,\n\t\t\t100% 0,\n\t\t\t100% 0,\n\t\t\t0 0,\n\t\t\t0 0;\n\t}\n"])), "var(--ds-surface-raised, ".concat(N20, ")"), CodeBlockSharedCssClassName.DS_CODEBLOCK, relativeFontSizeToBase16(fontSize()), overflowShadow({
13
13
  leftCoverWidth: "var(--ds-space-300, 24px)"
14
14
  }));
15
15
  var CodeBlockContainer = function CodeBlockContainer(_ref) {
@@ -8,7 +8,7 @@ import { codeBlockSharedStyles, CodeBlockSharedCssClassName } from '@atlaskit/ed
8
8
  import { useBidiWarnings } from '../../../hooks/use-bidi-warnings';
9
9
  import { RendererCssClassName } from '../../../../consts';
10
10
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
11
- var lightWeightCodeBlockStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .", " {\n cursor: text;\n }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER);
11
+ var lightWeightCodeBlockStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tcursor: text;\n\t}\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER);
12
12
  export var LightWeightCodeBlockCssClassName = {
13
13
  CONTAINER: 'light-weight-code-block'
14
14
  };
@@ -20,7 +20,7 @@ export var getLightWeightCodeBlockStylesForRootRendererStyleSheet = function get
20
20
  // NOTE: This must be added after other .code-block styles in the root
21
21
  // Renderer stylesheet.
22
22
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
23
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .", "\n > .", "\n .", " {\n margin-top: ", ";\n }\n "])), RendererCssClassName.DOCUMENT, LightWeightCodeBlockCssClassName.CONTAINER, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, blockNodesVerticalMargin);
23
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t.", "\n\t\t\t> .", "\n\t\t\t.", " {\n\t\t\tmargin-top: ", ";\n\t\t}\n\t"])), RendererCssClassName.DOCUMENT, LightWeightCodeBlockCssClassName.CONTAINER, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, blockNodesVerticalMargin);
24
24
  };
25
25
  var LightWeightCodeBlock = /*#__PURE__*/forwardRef(function (_ref, ref) {
26
26
  var text = _ref.text,
@@ -35,9 +35,9 @@ import { CommentBadge as CommentBadgeComponent } from '@atlaskit/editor-common/m
35
35
  import { injectIntl } from 'react-intl-next';
36
36
  import { useInlineCommentSubscriberContext, useInlineCommentsFilter } from '../../../ui/annotations/hooks';
37
37
  import { AnnotationUpdateEvent } from '@atlaskit/editor-common/types';
38
- export var linkStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: absolute;\n background: transparent;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n cursor: pointer;\n width: 100% !important;\n height: 100% !important;\n"])));
38
+ export var linkStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tposition: absolute;\n\tbackground: transparent;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tcursor: pointer;\n\twidth: 100% !important;\n\theight: 100% !important;\n"])));
39
39
  export var borderStyle = function borderStyle(color, width) {
40
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n width: 100% !important;\n height: 100% !important;\n border-radius: ", "px;\n box-shadow: 0 0 0 ", "px ", ";\n"])), width, width, color);
40
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\tposition: absolute;\n\twidth: 100% !important;\n\theight: 100% !important;\n\tborder-radius: ", "px;\n\tbox-shadow: 0 0 0 ", "px ", ";\n"])), width, width, color);
41
41
  };
42
42
  var MediaBorder = function MediaBorder(_ref) {
43
43
  var _mark$attrs$color, _mark$attrs$size;
@@ -44,7 +44,7 @@ var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_re
44
44
  };
45
45
 
46
46
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
47
- var navigationCssExtended = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", ";\n margin-left: 0 !important;\n margin-right: 0 !important;\n .mbe-add-tab-button,\n .mbe-remove-tab {\n display: none;\n }\n"])), sharedMultiBodiedExtensionStyles.mbeNavigation);
47
+ var navigationCssExtended = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t", ";\n\tmargin-left: 0 !important;\n\tmargin-right: 0 !important;\n\t.mbe-add-tab-button,\n\t.mbe-remove-tab {\n\t\tdisplay: none;\n\t}\n"])), sharedMultiBodiedExtensionStyles.mbeNavigation);
48
48
  var MultiBodiedExtension = function MultiBodiedExtension(props) {
49
49
  var children = props.children,
50
50
  _props$layout = props.layout,
@@ -73,7 +73,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
73
73
  children: children
74
74
  });
75
75
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
76
- var containerCssExtended = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", ";\n .ak-renderer-extension {\n margin-top: 0 !important;\n }\n\n [data-layout='full-width'],\n [data-layout='wide'] {\n .multiBodiedExtension-navigation {\n border-right: 3px solid ", " !important;\n }\n }\n\n .multiBodiedExtension--frames\n > [data-extension-frame='true']:nth-of-type(", ") {\n ", "\n margin-left: 0;\n margin-right: 0;\n }\n "])), sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(N40, ")"), activeChildIndex + 1, sharedMultiBodiedExtensionStyles.extensionFrameContent);
76
+ var containerCssExtended = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t", ";\n\t\t.ak-renderer-extension {\n\t\t\tmargin-top: 0 !important;\n\t\t}\n\n\t\t[data-layout='full-width'],\n\t\t[data-layout='wide'] {\n\t\t\t.multiBodiedExtension-navigation {\n\t\t\t\tborder-right: 3px solid ", " !important;\n\t\t\t}\n\t\t}\n\n\t\t.multiBodiedExtension--frames\n\t\t\t> [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\t", "\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\t"])), sharedMultiBodiedExtensionStyles.mbeExtensionContainer, "var(--ds-border, ".concat(N40, ")"), activeChildIndex + 1, sharedMultiBodiedExtensionStyles.extensionFrameContent);
77
77
  var isTopLevel = path.length < 1;
78
78
  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
79
79
  function renderMbeContent(width) {
@@ -18,10 +18,10 @@ var PanelStyled = function PanelStyled(_ref) {
18
18
  hasIcon = _ref.hasIcon,
19
19
  props = _objectWithoutProperties(_ref, _excluded);
20
20
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- nested css mixins are violations
21
- var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n &.", " {\n ", "\n\n &[data-panel-type=", "] {\n ", "\n }\n }\n "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(), PanelType.CUSTOM, hasIcon ? '' : 'padding-left: 12px;padding-right: 12px;');
21
+ var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t&.", " {\n\t\t\t", "\n\n\t\t\t&[data-panel-type=", "] {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(), PanelType.CUSTOM, hasIcon ? '' : 'padding-left: 12px;padding-right: 12px;');
22
22
  if (props['data-panel-type'] === PanelType.CUSTOM && backgroundColor) {
23
23
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- nested css mixins are violations
24
- styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &.", " {\n ", "\n }\n\n &[data-panel-type=", "] {\n background-color: ", ";\n ", "\n }\n "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(), PanelType.CUSTOM, hexToEditorBackgroundPaletteColor(backgroundColor) || backgroundColor, hasIcon ? '' : 'padding-left: 12px;padding-right: 12px;');
24
+ styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t&.", " {\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t&[data-panel-type=", "] {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\t", "\n\t\t\t}\n\t\t"])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(), PanelType.CUSTOM, hexToEditorBackgroundPaletteColor(backgroundColor) || backgroundColor, hasIcon ? '' : 'padding-left: 12px;padding-right: 12px;');
25
25
  }
26
26
  return jsx("div", _extends({
27
27
  css: styles
@@ -73,20 +73,20 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
73
73
  }
74
74
  var sumOfColumns = colWidthSum(columnWidths);
75
75
 
76
- // A bug was released that caused col resizing in editor to be off by 2px, so using 2 here
77
- var isTableSmallerThanContainer = sumOfColumns < tableContainerWidth - 2;
78
- var forceScaleForNumColumn = getBooleanFF('platform.editor.scale-table-when-number-column-in-table-resized_y4qh2') && isTableScalingEnabled && isNumberColumnEnabled && tableResized &&
79
- // if table col widths are smaller than container, then ignore. Most likely was created before custom table widths, where
80
- // col widths could be smaller than container width (width was enforced by breakout buttons)
81
- !isTableSmallerThanContainer;
76
+ // tables in the wild may be smaller than table container width (col resizing bugs, created before custom widths etc.)
77
+ // this causes issues with num column scaling as we add a new table column in renderer
78
+ var isTableSmallerThanContainer = sumOfColumns < tableContainerWidth - 1;
79
+ var forceScaleForNumColumn = getBooleanFF('platform.editor.scale-table-when-number-column-in-table-resized_y4qh2') && isTableScalingEnabled && isNumberColumnEnabled && tableResized;
82
80
 
83
81
  // when table resized and number column is enabled, we need to scale down the table in render
84
82
  if (forceScaleForNumColumn) {
85
- var scalePercentage = +((tableContainerWidth - akEditorTableNumberColumnWidth) / tableContainerWidth).toFixed(2);
83
+ var scalePercentage = +((tableContainerWidth - akEditorTableNumberColumnWidth) / tableContainerWidth);
86
84
  var targetMaxWidth = tableContainerWidth - akEditorTableNumberColumnWidth;
87
85
  var totalWidthAfterScale = 0;
88
86
  var newScaledTargetWidths = columnWidths.map(function (width) {
89
- var newWidth = Math.floor(width * scalePercentage);
87
+ // we need to scale each column UP, to ensure total width of table matches table container
88
+ var patchedWidth = isTableSmallerThanContainer ? width / sumOfColumns * (tableContainerWidth - 1) : width;
89
+ var newWidth = Math.floor(patchedWidth * scalePercentage);
90
90
  totalWidthAfterScale += newWidth;
91
91
  return newWidth;
92
92
  });
@@ -37,7 +37,7 @@ var Container = function Container(props) {
37
37
 
38
38
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
39
39
  var styles = function styles() {
40
- return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n padding: 0;\n padding-bottom: ", ";\n "])), sharedContainerStyles(), paddingBottom);
40
+ return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t", "\n\t\tpadding: 0;\n\t\tpadding-bottom: ", ";\n\t"])), sharedContainerStyles(), paddingBottom);
41
41
  };
42
42
  return (
43
43
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
@@ -51,7 +51,7 @@ var TitleContainer = function TitleContainer(props) {
51
51
 
52
52
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
53
53
  var styles = function styles() {
54
- return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n padding: ", ";\n padding-bottom: ", ";\n "])), sharedExpandStyles.titleContainerStyles(), "var(--ds-space-100, 8px)", paddingBottom);
54
+ return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t", "\n\t\tpadding: ", ";\n\t\tpadding-bottom: ", ";\n\t"])), sharedExpandStyles.titleContainerStyles(), "var(--ds-space-100, 8px)", paddingBottom);
55
55
  };
56
56
  var expanded = props.expanded,
57
57
  buttonProps = _objectWithoutProperties(props, _excluded);
@@ -70,7 +70,7 @@ var ContentContainer = function ContentContainer(props) {
70
70
 
71
71
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
72
72
  var styles = function styles() {
73
- return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", ";\n padding-right: ", ";\n padding-left: ", ";\n visibility: ", ";\n "])), sharedContentStyles(), "var(--ds-space-200, 16px)", "var(--ds-space-400, 32px)", visibility);
73
+ return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t", ";\n\t\tpadding-right: ", ";\n\t\tpadding-left: ", ";\n\t\tvisibility: ", ";\n\t"])), sharedContentStyles(), "var(--ds-space-200, 16px)", "var(--ds-space-400, 32px)", visibility);
74
74
  };
75
75
  return (
76
76
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
@@ -47,7 +47,7 @@ import { nodeToReact } from '../../react/nodes';
47
47
  export var NORMAL_SEVERITY_THRESHOLD = 2000;
48
48
  export var DEGRADED_SEVERITY_THRESHOLD = 3000;
49
49
  var packageName = "@atlaskit/renderer";
50
- var packageVersion = "109.30.1";
50
+ var packageVersion = "109.30.2";
51
51
  export var defaultNodeComponents = nodeToReact;
52
52
  export var Renderer = /*#__PURE__*/function (_PureComponent) {
53
53
  _inherits(Renderer, _PureComponent);
@@ -24,7 +24,7 @@ var tableShadowWidth = 32;
24
24
  export var TELEPOINTER_ID = 'ai-streaming-telepointer';
25
25
  var telepointerStyles = function telepointerStyles(colorMode) {
26
26
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
27
- return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n #", " {\n display: inline-block;\n position: relative;\n width: 1.5px;\n height: 25px;\n background: linear-gradient(\n 45deg,\n ", " -12.02%,\n ", " 19.18%,\n ", " 71.87%\n );\n margin-left: ", ";\n\n &::after {\n content: 'AI';\n position: absolute;\n display: block;\n top: 0;\n left: 0;\n font-size: 10px;\n font-weight: 700;\n width: 12.5px;\n height: 13px;\n padding-top: 1px;\n padding-left: 1.5px;\n line-height: initial;\n border-radius: 0px 2px 2px 0px;\n color: ", ";\n background: linear-gradient(\n 45deg,\n ", " -57%,\n ", " 71.87%\n );\n }\n }\n "])), TELEPOINTER_ID, colorMode === 'dark' ? '#f5cd47' : '#f8e6a0', colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4', "var(--ds-space-025, 2px)", "var(--ds-text-inverse, white)", colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4');
27
+ return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t#", " {\n\t\t\tdisplay: inline-block;\n\t\t\tposition: relative;\n\t\t\twidth: 1.5px;\n\t\t\theight: 25px;\n\t\t\tbackground: linear-gradient(\n\t\t\t\t45deg,\n\t\t\t\t", " -12.02%,\n\t\t\t\t", " 19.18%,\n\t\t\t\t", " 71.87%\n\t\t\t);\n\t\t\tmargin-left: ", ";\n\n\t\t\t&::after {\n\t\t\t\tcontent: 'AI';\n\t\t\t\tposition: absolute;\n\t\t\t\tdisplay: block;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\tfont-size: 10px;\n\t\t\t\tfont-weight: 700;\n\t\t\t\twidth: 12.5px;\n\t\t\t\theight: 13px;\n\t\t\t\tpadding-top: 1px;\n\t\t\t\tpadding-left: 1.5px;\n\t\t\t\tline-height: initial;\n\t\t\t\tborder-radius: 0px 2px 2px 0px;\n\t\t\t\tcolor: ", ";\n\t\t\t\tbackground: linear-gradient(\n\t\t\t\t\t45deg,\n\t\t\t\t\t", " -57%,\n\t\t\t\t\t", " 71.87%\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t"])), TELEPOINTER_ID, colorMode === 'dark' ? '#f5cd47' : '#f8e6a0', colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4', "var(--ds-space-025, 2px)", "var(--ds-text-inverse, white)", colorMode === 'dark' ? '#60c6d2' : '#8bdbe5', colorMode === 'dark' ? '#388bff' : '#0c66e4');
28
28
  };
29
29
  var getLineHeight = function getLineHeight(fontCode) {
30
30
  return headingSizesImport[fontCode].lineHeight / headingSizesImport[fontCode].size;
@@ -51,7 +51,7 @@ export var headingSizes = {
51
51
  };
52
52
  var headingAnchorStyle = function headingAnchorStyle(headingTag) {
53
53
  return (// TODO Delete this comment after verifying space token -> previous value `margin-left: 6px`
54
- css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n /**\n * The copy link button doesn't reserve space in the DOM so that\n * the text alignment isn't impacted by the button/icon's space.\n */\n .", " {\n position: absolute;\n height: ", "em;\n\n margin-left: ", ";\n\n button {\n padding-left: 0;\n padding-right: 0;\n }\n }\n\n /**\n * Applies hover effects to the heading anchor link button\n * to fade in when the user rolls over the heading.\n *\n * The link is persistent on mobile, so we use feature detection\n * to enable hover effects for systems that support it (desktop).\n *\n * @see https://caniuse.com/mdn-css_at-rules_media_hover\n */\n @media (hover: hover) and (pointer: fine) {\n .", " {\n > button {\n opacity: 0;\n transform: translate(-8px, 0px);\n transition:\n opacity 0.2s ease 0s,\n transform 0.2s ease 0s;\n }\n }\n\n &:hover {\n .", " > button {\n opacity: 1;\n transform: none !important;\n }\n }\n }\n\n /**\n * Adds the visibility of the button when in focus through keyboard navigation.\n */\n .", " {\n button:focus {\n opacity: 1;\n transform: none !important;\n }\n }\n "])), HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, "var(--ds-space-075, 6px)", HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName)
54
+ css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t/**\n * The copy link button doesn't reserve space in the DOM so that\n * the text alignment isn't impacted by the button/icon's space.\n */\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\theight: ", "em;\n\n\t\t\tmargin-left: ", ";\n\n\t\t\tbutton {\n\t\t\t\tpadding-left: 0;\n\t\t\t\tpadding-right: 0;\n\t\t\t}\n\t\t}\n\n\t\t/**\n * Applies hover effects to the heading anchor link button\n * to fade in when the user rolls over the heading.\n *\n * The link is persistent on mobile, so we use feature detection\n * to enable hover effects for systems that support it (desktop).\n *\n * @see https://caniuse.com/mdn-css_at-rules_media_hover\n */\n\t\t@media (hover: hover) and (pointer: fine) {\n\t\t\t.", " {\n\t\t\t\t> button {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\ttransform: translate(-8px, 0px);\n\t\t\t\t\ttransition:\n\t\t\t\t\t\topacity 0.2s ease 0s,\n\t\t\t\t\t\ttransform 0.2s ease 0s;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t.", " > button {\n\t\t\t\t\topacity: 1;\n\t\t\t\t\ttransform: none !important;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t/**\n * Adds the visibility of the button when in focus through keyboard navigation.\n */\n\t\t.", " {\n\t\t\tbutton:focus {\n\t\t\t\topacity: 1;\n\t\t\t\ttransform: none !important;\n\t\t\t}\n\t\t}\n\t"])), HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, "var(--ds-space-075, 6px)", HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName)
55
55
  );
56
56
  };
57
57
  var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
@@ -60,7 +60,7 @@ var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
60
60
  return '';
61
61
  }
62
62
  // TODO Delete this comment after verifying space token -> previous value `margin: 6px`
63
- return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .fabric-editor-block-mark[data-align] > {\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n position: relative;\n }\n }\n\n /**\n * For right-alignment we flip the link to be before the heading\n * text so that the text is flush up against the edge of the editor's\n * container edge.\n */\n .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n > {\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n // Using right to left text to achieve the inverse effect\n // of where the copy link button icon sits for left/center\n // alignment.\n // Although this is unorthodox it's the only approach which\n // allows the button to sit flush against the left edge of\n // bottom line of text.\n direction: rtl;\n\n // By default RTL will negatively impact the layout of special\n // characters within the heading text, and potentially other\n // nested inline nodes. To prevent this we insert pseudo elements\n // containing HTML entities to retain LTR for all heading content\n // except for the copy link button.\n > *:not(.", "):not(br) {\n ::before {\n // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n content: '\u202A';\n }\n ::after {\n // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n content: '\u202C';\n }\n }\n }\n }\n .", " {\n margin: 0 ", " 0 0;\n }\n\n @media (hover: hover) and (pointer: fine) {\n .", " > button {\n transform: translate(8px, 0px);\n }\n }\n }\n "], ["\n .fabric-editor-block-mark[data-align] > {\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n position: relative;\n }\n }\n\n /**\n * For right-alignment we flip the link to be before the heading\n * text so that the text is flush up against the edge of the editor's\n * container edge.\n */\n .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n > {\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n // Using right to left text to achieve the inverse effect\n // of where the copy link button icon sits for left/center\n // alignment.\n // Although this is unorthodox it's the only approach which\n // allows the button to sit flush against the left edge of\n // bottom line of text.\n direction: rtl;\n\n // By default RTL will negatively impact the layout of special\n // characters within the heading text, and potentially other\n // nested inline nodes. To prevent this we insert pseudo elements\n // containing HTML entities to retain LTR for all heading content\n // except for the copy link button.\n > *:not(.", "):not(br) {\n ::before {\n // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n content: '\\u202A';\n }\n ::after {\n // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n content: '\\u202C';\n }\n }\n }\n }\n .", " {\n margin: 0 ", " 0 0;\n }\n\n @media (hover: hover) and (pointer: fine) {\n .", " > button {\n transform: translate(8px, 0px);\n }\n }\n }\n "])), HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName, "var(--ds-space-075, 6px)", HeadingAnchorWrapperClassName);
63
+ return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t.fabric-editor-block-mark[data-align] > {\n\t\t\th1,\n\t\t\th2,\n\t\t\th3,\n\t\t\th4,\n\t\t\th5,\n\t\t\th6 {\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t}\n\n\t\t/**\n * For right-alignment we flip the link to be before the heading\n * text so that the text is flush up against the edge of the editor's\n * container edge.\n */\n\t\t.fabric-editor-block-mark:not([data-align='center'])[data-align] {\n\t\t\t> {\n\t\t\t\th1,\n\t\t\t\th2,\n\t\t\t\th3,\n\t\t\t\th4,\n\t\t\t\th5,\n\t\t\t\th6 {\n\t\t\t\t\t// Using right to left text to achieve the inverse effect\n\t\t\t\t\t// of where the copy link button icon sits for left/center\n\t\t\t\t\t// alignment.\n\t\t\t\t\t// Although this is unorthodox it's the only approach which\n\t\t\t\t\t// allows the button to sit flush against the left edge of\n\t\t\t\t\t// bottom line of text.\n\t\t\t\t\tdirection: rtl;\n\n\t\t\t\t\t// By default RTL will negatively impact the layout of special\n\t\t\t\t\t// characters within the heading text, and potentially other\n\t\t\t\t\t// nested inline nodes. To prevent this we insert pseudo elements\n\t\t\t\t\t// containing HTML entities to retain LTR for all heading content\n\t\t\t\t\t// except for the copy link button.\n\t\t\t\t\t> *:not(.", "):not(br) {\n\t\t\t\t\t\t::before {\n\t\t\t\t\t\t\t// Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n\t\t\t\t\t\t\tcontent: '\u202A';\n\t\t\t\t\t\t}\n\t\t\t\t\t\t::after {\n\t\t\t\t\t\t\t// Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n\t\t\t\t\t\t\tcontent: '\u202C';\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", " 0 0;\n\t\t\t}\n\n\t\t\t@media (hover: hover) and (pointer: fine) {\n\t\t\t\t.", " > button {\n\t\t\t\t\ttransform: translate(8px, 0px);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"], ["\n\t\t.fabric-editor-block-mark[data-align] > {\n\t\t\th1,\n\t\t\th2,\n\t\t\th3,\n\t\t\th4,\n\t\t\th5,\n\t\t\th6 {\n\t\t\t\tposition: relative;\n\t\t\t}\n\t\t}\n\n\t\t/**\n * For right-alignment we flip the link to be before the heading\n * text so that the text is flush up against the edge of the editor's\n * container edge.\n */\n\t\t.fabric-editor-block-mark:not([data-align='center'])[data-align] {\n\t\t\t> {\n\t\t\t\th1,\n\t\t\t\th2,\n\t\t\t\th3,\n\t\t\t\th4,\n\t\t\t\th5,\n\t\t\t\th6 {\n\t\t\t\t\t// Using right to left text to achieve the inverse effect\n\t\t\t\t\t// of where the copy link button icon sits for left/center\n\t\t\t\t\t// alignment.\n\t\t\t\t\t// Although this is unorthodox it's the only approach which\n\t\t\t\t\t// allows the button to sit flush against the left edge of\n\t\t\t\t\t// bottom line of text.\n\t\t\t\t\tdirection: rtl;\n\n\t\t\t\t\t// By default RTL will negatively impact the layout of special\n\t\t\t\t\t// characters within the heading text, and potentially other\n\t\t\t\t\t// nested inline nodes. To prevent this we insert pseudo elements\n\t\t\t\t\t// containing HTML entities to retain LTR for all heading content\n\t\t\t\t\t// except for the copy link button.\n\t\t\t\t\t> *:not(.", "):not(br) {\n\t\t\t\t\t\t::before {\n\t\t\t\t\t\t\t// Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n\t\t\t\t\t\t\tcontent: '\\u202A';\n\t\t\t\t\t\t}\n\t\t\t\t\t\t::after {\n\t\t\t\t\t\t\t// Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n\t\t\t\t\t\t\tcontent: '\\u202C';\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", " 0 0;\n\t\t\t}\n\n\t\t\t@media (hover: hover) and (pointer: fine) {\n\t\t\t\t.", " > button {\n\t\t\t\t\ttransform: translate(8px, 0px);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName, "var(--ds-space-075, 6px)", HeadingAnchorWrapperClassName);
64
64
  };
65
65
  var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
66
66
  var allowColumnSorting = _ref2.allowColumnSorting,
@@ -72,7 +72,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
72
72
  if (allowNestedHeaderLinks) {
73
73
  headingsCss = "\n /**\n * When the sort button is enabled we want the heading's copy link button\n * to reserve space so that it can prematurely wrap to avoid the button\n * being displayed underneath the sort button (hidden or obscured).\n *\n * The two buttons fight each other since the sort button is displayed\n * on hover of the <th /> and the copy link button is displayed on hover\n * of the heading.\n *\n * Note that this can break the WYSIWYG experience in the case where\n * a heading fills the width of the table cell and the only thing which\n * wraps is the copy link button. This is hopefully a rare fringe case.\n */\n .".concat(HeadingAnchorWrapperClassName, " {\n position: unset;\n }\n > {\n h1, h2, h3, h4, h5, h6 {\n margin-right: 30px;\n }\n }\n ");
74
74
  }
75
- return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n .", " {\n padding: 0;\n\n .", " {\n width: 100%;\n height: 100%;\n padding: ", "px;\n border-width: 1.5px;\n border-style: solid;\n border-color: transparent;\n\n > *:first-child {\n margin-top: 0;\n }\n\n > .ProseMirror-gapcursor:first-child + *,\n > style:first-child + .ProseMirror-gapcursor + * {\n margin-top: 0;\n }\n\n > .ProseMirror-gapcursor:first-child + span + *,\n > style:first-child + .ProseMirror-gapcursor + span + * {\n margin-top: 0;\n }\n\n @supports selector(:focus-visible) {\n &:focus {\n outline: unset;\n }\n &:focus-visible {\n border-color: ", ";\n }\n }\n\n ", "\n }\n\n .", " {\n margin: 0;\n .", " {\n opacity: 1;\n transition: opacity 0.2s ease-in-out;\n }\n }\n\n .", " {\n .", " {\n opacity: 0;\n &:focus {\n opacity: 1;\n }\n }\n }\n\n &:hover {\n .", " {\n .", " {\n opacity: 1;\n }\n }\n }\n }\n "])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME);
75
+ return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t.", " {\n\t\t\tpadding: 0;\n\n\t\t\t.", " {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tpadding: ", "px;\n\t\t\t\tborder-width: 1.5px;\n\t\t\t\tborder-style: solid;\n\t\t\t\tborder-color: transparent;\n\n\t\t\t\t> *:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t@supports selector(:focus-visible) {\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\toutline: unset;\n\t\t\t\t\t}\n\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin: 0;\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 1;\n\t\t\t\t\ttransition: opacity 0.2s ease-in-out;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\t.", " {\n\t\t\t\t\topacity: 0;\n\t\t\t\t\t&:focus {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\t.", " {\n\t\t\t\t\t.", " {\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t"])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME);
76
76
  };
77
77
  var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
78
78
  var appearance = _ref3.appearance;
@@ -80,20 +80,20 @@ var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
80
80
  if (appearance !== 'full-page' && appearance !== 'mobile') {
81
81
  return '';
82
82
  }
83
- return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n max-width: ", ";\n margin: 0 auto;\n padding: 0 ", "px;\n "])), theme && theme.layoutMaxWidth ? "".concat(theme.layoutMaxWidth, "px") : 'none', appearance === 'full-page' ? FullPagePadding : 0);
83
+ return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t\tmax-width: ", ";\n\t\tmargin: 0 auto;\n\t\tpadding: 0 ", "px;\n\t"])), theme && theme.layoutMaxWidth ? "".concat(theme.layoutMaxWidth, "px") : 'none', appearance === 'full-page' ? FullPagePadding : 0);
84
84
  };
85
85
  var fullWidthStyles = function fullWidthStyles(_ref5) {
86
86
  var appearance = _ref5.appearance;
87
87
  if (appearance !== 'full-width') {
88
88
  return '';
89
89
  }
90
- return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n max-width: ", "px;\n margin: 0 auto;\n\n .fabric-editor-breakout-mark,\n .ak-renderer-extension {\n width: 100% !important;\n }\n\n ", "\n "])), akEditorFullWidthLayoutWidth, isTableResizingEnabled(appearance) ? '' : "\n .pm-table-container {\n width: 100% !important;\n }\n ");
90
+ return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t\tmax-width: ", "px;\n\t\tmargin: 0 auto;\n\n\t\t.fabric-editor-breakout-mark,\n\t\t.ak-renderer-extension {\n\t\t\twidth: 100% !important;\n\t\t}\n\n\t\t", "\n\t"])), akEditorFullWidthLayoutWidth, isTableResizingEnabled(appearance) ? '' : "\n .pm-table-container {\n width: 100% !important;\n }\n ");
91
91
  };
92
92
  var breakoutWidthStyle = function breakoutWidthStyle() {
93
- return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n *:not([data-mark-type='fragment'])\n .", " {\n // TODO - improve inline style logic on table container so important styles aren't required here\n width: 100% !important;\n left: 0 !important;\n }\n\n [data-mark-type='fragment'] * .", " {\n // TODO - improve inline style logic on table container so important styles aren't required here\n width: 100% !important;\n left: 0 !important;\n }\n "])), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
93
+ return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t\t*:not([data-mark-type='fragment']) .", " {\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\n\t\t[data-mark-type='fragment'] * .", " {\n\t\t\t// TODO - improve inline style logic on table container so important styles aren't required here\n\t\t\twidth: 100% !important;\n\t\t\tleft: 0 !important;\n\t\t}\n\t"])), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
94
94
  };
95
95
  var getShadowOverrides = function getShadowOverrides() {
96
- return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n /** Shadow overrides */\n &.", "::after,\n &.", "::before {\n width: ", "px;\n background: linear-gradient(\n to left,\n transparent 0,\n ", " 140%\n ),\n linear-gradient(\n to right,\n ", " 0px,\n transparent 1px\n );\n }\n\n &.", "::after {\n background: linear-gradient(\n to right,\n transparent 0,\n ", " 140%\n ),\n linear-gradient(\n to left,\n ", " 0px,\n transparent 1px\n );\n right: 0px;\n }\n "])), shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableShadowWidth, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", shadowClassNames.RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)");
96
+ return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t\t/** Shadow overrides */\n\t\t&.", "::after, &.", "::before {\n\t\t\twidth: ", "px;\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t}\n\n\t\t&.", "::after {\n\t\t\tbackground: linear-gradient(\n\t\t\t\t\tto right,\n\t\t\t\t\ttransparent 0,\n\t\t\t\t\t", " 140%\n\t\t\t\t),\n\t\t\t\tlinear-gradient(\n\t\t\t\t\tto left,\n\t\t\t\t\t", " 0px,\n\t\t\t\t\ttransparent 1px\n\t\t\t\t);\n\t\t\tright: 0px;\n\t\t}\n\t"])), shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableShadowWidth, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", shadowClassNames.RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)");
97
97
  };
98
98
  export var rendererStyles = function rendererStyles(wrapperProps) {
99
99
  return function (theme) {
@@ -106,7 +106,7 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
106
106
  var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock;
107
107
 
108
108
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression
109
- return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n font-size: ", "px;\n line-height: 1.5rem;\n color: ", ";\n\n .", "::after {\n // we add a clearfix after ak-renderer-document in order to\n // contain internal floats (such as media images that are \"wrap-left\")\n // to just the renderer (and not spill outside of it)\n content: '';\n visibility: hidden;\n display: block;\n height: 0;\n clear: both;\n }\n\n ", "\n ", "\n\n .", " {\n ", "\n }\n\n & h1 {\n ", "\n }\n\n & h2 {\n ", "\n }\n\n & h3 {\n ", "\n }\n\n & h4 {\n ", "\n }\n\n & h5 {\n ", "\n }\n\n & h6 {\n ", "\n }\n\n & span.akActionMark {\n color: ", ";\n text-decoration: none;\n\n &:hover {\n color: ", ";\n text-decoration: underline;\n }\n\n &:active {\n color: ", ";\n }\n }\n\n & span.akActionMark {\n cursor: pointer;\n }\n\n & span[data-placeholder] {\n color: ", ";\n }\n\n ", "\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", "\n\n & .UnknownBlock {\n font-family: ", ";\n font-size: ", ";\n font-weight: 400;\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n & span.date-node {\n background: ", ";\n border-radius: ", ";\n color: ", ";\n padding: ", " ", ";\n margin: 0 1px;\n transition: background 0.3s;\n }\n\n & span.date-node-highlighted {\n background: ", ";\n color: ", ";\n }\n\n & .renderer-image {\n max-width: 100%;\n display: block;\n margin: ", " 0;\n }\n\n .", ".rich-media-wrapped\n + .", ":not(.rich-media-wrapped) {\n clear: both;\n }\n\n & .code-block,\n & blockquote,\n & hr,\n & > div > div:not(.rich-media-wrapped),\n .", ".rich-media-wrapped\n + .rich-media-wrapped\n + *:not(.rich-media-wrapped),\n .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n .", ".image-align-start,\n .", ".image-center,\n .", ".image-align-end {\n clear: both;\n }\n\n & .rich-media-wrapped {\n & + h1,\n & + h2,\n & + h3,\n & + h4,\n & + h5,\n & + h6 {\n margin-top: ", ";\n }\n }\n\n ", "\n /* plugin styles */\n ", " &\n div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n margin-left: 0;\n margin-right: 0;\n }\n\n /* Breakout for tables and extensions */\n .", " > {\n ", "\n\n * .", " {\n overflow-x: auto;\n }\n\n & .", ":first-child {\n margin-top: 0;\n }\n }\n\n .", " {\n .", " {\n margin-top: ", ";\n }\n\n .", " {\n margin-left: 50%;\n transform: translateX(-50%);\n }\n\n .", " {\n overflow-x: auto;\n }\n\n .", "\n .", " {\n display: flex;\n }\n }\n\n ", "\n\n .", " .", " {\n z-index: 0;\n transition: all 0.1s linear;\n display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n /** Shadow overrides */\n &.", "::after,\n &.", "::before {\n top: ", "px;\n height: calc(100% - ", "px);\n z-index: ", ";\n }\n\n ", "\n\n &\n .", ",\n &\n .", " {\n height: calc(100% - ", "px);\n }\n\n /**\n * A hack for making all the <th /> heights equal in case some have shorter\n * content than others.\n *\n * This is done to make sort buttons fill entire <th />.\n */\n table {\n height: 1px; /* will be ignored */\n ", ";\n margin-left: 0;\n margin-right: 0;\n }\n\n table tr:first-of-type {\n height: 100%;\n\n td,\n th {\n position: relative;\n }\n }\n\n table[data-number-column='true'] {\n .", " {\n background-color: ", ";\n border-right: 1px solid\n ", ";\n width: ", "px;\n text-align: center;\n color: ", ";\n font-size: ", ";\n }\n\n .fixed .", " {\n border-right: 0px none;\n }\n }\n }\n\n tr[data-header-row].fixed {\n position: fixed !important;\n display: flex;\n overflow: hidden;\n z-index: ", ";\n\n border-right: 1px solid\n ", ";\n border-bottom: 1px solid\n ", ";\n\n /* this is to compensate for the table border */\n transform: translateX(-1px);\n }\n\n .sticky > th {\n z-index: ", ";\n position: sticky !important;\n top: 0;\n }\n\n /* Make the number column header sticky */\n .sticky > td {\n position: sticky !important;\n top: 0;\n }\n\n /* add border for position: sticky\n and work around background-clip: padding-box\n bug for FF causing box-shadow bug in Chrome */\n .sticky th,\n .sticky td {\n box-shadow:\n 0px 1px\n ", ",\n 0px -0.5px ", ",\n inset -1px 0px ", ",\n 0px -1px ", ";\n }\n\n /* this will remove jumpiness caused in Chrome for sticky headers */\n .fixed + tr {\n min-height: 0px;\n }\n\n /*\n * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n * See ED-4159.\n */\n & .code-block {\n max-width: 100%;\n /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n display: block;\n /* stylelint-enable */\n\n position: relative;\n border-radius: ", ";\n\n /*\n * The overall renderer has word-wrap: break; which causes issues with\n * code block line numbers in Safari / iOS.\n */\n word-wrap: normal;\n }\n\n & .MediaGroup,\n & .code-block {\n margin-top: ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n\n ", "\n\n ", "\n\n ", ";\n & [data-layout-section] {\n margin-top: ", ";\n & > div + div {\n margin-left: ", ";\n }\n\n @media screen and (max-width: ", "px) {\n & > div + div {\n margin-left: 0;\n }\n }\n\n & .MediaGroup,\n & .code-block {\n margin-top: ", ";\n\n &:first-child {\n margin-top: 0;\n }\n }\n }\n\n & li {\n > .code-block {\n margin: ", " 0 0 0;\n }\n > .code-block:first-child {\n margin-top: 0;\n }\n\n > div:last-of-type.code-block {\n margin-bottom: ", ";\n }\n }\n\n &:not([data-node-type='decisionList']) > li,\n // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n &:not(.", ") > li {\n ", "\n }\n "])), editorFontSize(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), RendererCssClassName.DOCUMENT, mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles(colorMode), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(), ruleSharedStyles(), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(), shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles(colorMode), tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, breakoutWidthStyle(), RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, shadowObserverClassNames.SHADOW_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, getShadowOverrides(), shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, tableSortableColumnStyle(wrapperProps), RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), relativeFontSizeToBase16(fontSize()), RendererCssClassName.NUMBER_COLUMN, akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), getLightWeightCodeBlockStylesForRootRendererStyleSheet(), columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", gridMediumMaxWidth, blockNodesVerticalMargin, blockNodesVerticalMargin, blockNodesVerticalMargin, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, browser.safari ? codeBlockInListSafariFix : '');
109
+ return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t\tfont-size: ", "px;\n\t\tline-height: 1.5rem;\n\t\tcolor: ", ";\n\n\t\t.", "::after {\n\t\t\t// we add a clearfix after ak-renderer-document in order to\n\t\t\t// contain internal floats (such as media images that are \"wrap-left\")\n\t\t\t// to just the renderer (and not spill outside of it)\n\t\t\tcontent: '';\n\t\t\tvisibility: hidden;\n\t\t\tdisplay: block;\n\t\t\theight: 0;\n\t\t\tclear: both;\n\t\t}\n\n\t\t", "\n\t\t", "\n\n .", " {\n\t\t\t", "\n\t\t}\n\n\t\t& h1 {\n\t\t\t", "\n\t\t}\n\n\t\t& h2 {\n\t\t\t", "\n\t\t}\n\n\t\t& h3 {\n\t\t\t", "\n\t\t}\n\n\t\t& h4 {\n\t\t\t", "\n\t\t}\n\n\t\t& h5 {\n\t\t\t", "\n\t\t}\n\n\t\t& h6 {\n\t\t\t", "\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcolor: ", ";\n\t\t\ttext-decoration: none;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ", ";\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\n\t\t\t&:active {\n\t\t\t\tcolor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t& span.akActionMark {\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t& span[data-placeholder] {\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t", "\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", "\n\n\t\t& .UnknownBlock {\n\t\t\tfont-family: ", ";\n\t\t\tfont-size: ", ";\n\t\t\tfont-weight: 400;\n\t\t\twhite-space: pre-wrap;\n\t\t\tword-wrap: break-word;\n\t\t}\n\n\t\t& span.date-node {\n\t\t\tbackground: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tcolor: ", ";\n\t\t\tpadding: ", " ", ";\n\t\t\tmargin: 0 1px;\n\t\t\ttransition: background 0.3s;\n\t\t}\n\n\t\t& span.date-node-highlighted {\n\t\t\tbackground: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\n\t\t& .renderer-image {\n\t\t\tmax-width: 100%;\n\t\t\tdisplay: block;\n\t\t\tmargin: ", " 0;\n\t\t}\n\n\t\t.", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .code-block,\n\t\t& blockquote,\n\t\t& hr,\n\t\t& > div > div:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n\t\t.", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n\t\t.", ".image-align-start,\n\t\t\t.", ".image-center,\n\t\t\t.", ".image-align-end {\n\t\t\tclear: both;\n\t\t}\n\n\t\t& .rich-media-wrapped {\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t\t/* plugin styles */\n ", " &\n div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n\t\t\tmargin-left: 0;\n\t\t\tmargin-right: 0;\n\t\t}\n\n\t\t/* Breakout for tables and extensions */\n\t\t.", " > {\n\t\t\t", "\n\n\t\t\t* .", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t& .", ":first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\t.", " {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\tmargin-left: 50%;\n\t\t\t\ttransform: translateX(-50%);\n\t\t\t}\n\n\t\t\t.", " {\n\t\t\t\toverflow-x: auto;\n\t\t\t}\n\n\t\t\t.", " .", " {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tz-index: 0;\n\t\t\ttransition: all 0.1s linear;\n\t\t\tdisplay: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n\t\t\t/** Shadow overrides */\n\t\t\t&.", "::after, &.", "::before {\n\t\t\t\ttop: ", "px;\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\tz-index: ", ";\n\t\t\t}\n\n\t\t\t", "\n\n\t\t\t&\n .", ",\n &\n .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t}\n\n\t\t\t/**\n * A hack for making all the <th /> heights equal in case some have shorter\n * content than others.\n *\n * This is done to make sort buttons fill entire <th />.\n */\n\t\t\ttable {\n\t\t\t\theight: 1px; /* will be ignored */\n\t\t\t\t", ";\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\n\t\t\ttable tr:first-of-type {\n\t\t\t\theight: 100%;\n\n\t\t\t\ttd,\n\t\t\t\tth {\n\t\t\t\t\tposition: relative;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\ttable[data-number-column='true'] {\n\t\t\t\t.", " {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-right: 1px solid\n\t\t\t\t\t\t", ";\n\t\t\t\t\twidth: ", "px;\n\t\t\t\t\ttext-align: center;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t}\n\n\t\t\t\t.fixed .", " {\n\t\t\t\t\tborder-right: 0px none;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttr[data-header-row].fixed {\n\t\t\tposition: fixed !important;\n\t\t\tdisplay: flex;\n\t\t\toverflow: hidden;\n\t\t\tz-index: ", ";\n\n\t\t\tborder-right: 1px solid ", ";\n\t\t\tborder-bottom: 1px solid ", ";\n\n\t\t\t/* this is to compensate for the table border */\n\t\t\ttransform: translateX(-1px);\n\t\t}\n\n\t\t.sticky > th {\n\t\t\tz-index: ", ";\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* Make the number column header sticky */\n\t\t.sticky > td {\n\t\t\tposition: sticky !important;\n\t\t\ttop: 0;\n\t\t}\n\n\t\t/* add border for position: sticky\n and work around background-clip: padding-box\n bug for FF causing box-shadow bug in Chrome */\n\t\t.sticky th,\n\t\t.sticky td {\n\t\t\tbox-shadow:\n\t\t\t\t0px 1px ", ",\n\t\t\t\t0px -0.5px ", ",\n\t\t\t\tinset -1px 0px ", ",\n\t\t\t\t0px -1px ", ";\n\t\t}\n\n\t\t/* this will remove jumpiness caused in Chrome for sticky headers */\n\t\t.fixed + tr {\n\t\t\tmin-height: 0px;\n\t\t}\n\n\t\t/*\n * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n * See ED-4159.\n */\n\t\t& .code-block {\n\t\t\tmax-width: 100%;\n\t\t\t/* -ms- properties are necessary until MS supports the latest version of the grid spec */\n\t\t\t/* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n\t\t\tdisplay: block;\n\t\t\t/* stylelint-enable */\n\n\t\t\tposition: relative;\n\t\t\tborder-radius: ", ";\n\n\t\t\t/*\n * The overall renderer has word-wrap: break; which causes issues with\n * code block line numbers in Safari / iOS.\n */\n\t\t\tword-wrap: normal;\n\t\t}\n\n\t\t& .MediaGroup,\n\t\t& .code-block {\n\t\t\tmargin-top: ", ";\n\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t", "\n\n ", ";\n\t\t& [data-layout-section] {\n\t\t\tmargin-top: ", ";\n\t\t\t& > div + div {\n\t\t\t\tmargin-left: ", ";\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t& > div + div {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t& .MediaGroup,\n\t\t\t& .code-block {\n\t\t\t\tmargin-top: ", ";\n\n\t\t\t\t&:first-child {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t& li {\n\t\t\t> .code-block {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\t\t\t> .code-block:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\n\t\t\t> div:last-of-type.code-block {\n\t\t\t\tmargin-bottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t"])), editorFontSize(themeProps), "var(--ds-text, ".concat(colors.N800, ")"), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), RendererCssClassName.DOCUMENT, mediaInlineImageStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), "var(--ds-text-subtlest, ".concat(colors.N200, ")"), telepointerStyles(colorMode), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(), ruleSharedStyles(), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(), shadowSharedStyle, dateSharedStyle, textColorStyles, backgroundColorStyles(colorMode), tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), "var(--ds-background-neutral, ".concat(colors.N30A, ")"), "var(--ds-border-radius-100, 3px)", "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-space-100, 8px)", alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, breakoutWidthStyle(), RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, shadowObserverClassNames.SHADOW_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, getShadowOverrides(), shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, tableSortableColumnStyle(wrapperProps), RendererCssClassName.NUMBER_COLUMN, "var(--ds-background-neutral, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorTableNumberColumnWidth, "var(--ds-text-subtlest, ".concat(colors.N200, ")"), relativeFontSizeToBase16(fontSize()), RendererCssClassName.NUMBER_COLUMN, akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), akEditorStickyHeaderZIndex, "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableToolbar, ")"), "var(--ds-border-radius-100, 3px)", blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), getLightWeightCodeBlockStylesForRootRendererStyleSheet(), columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", gridMediumMaxWidth, blockNodesVerticalMargin, blockNodesVerticalMargin, blockNodesVerticalMargin, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, browser.safari ? codeBlockInListSafariFix : '');
110
110
  };
111
111
  };
112
112
  var useGridRenderForCodeBlock = function useGridRenderForCodeBlock(codeBlockRenderAsBlock) {
@@ -14,7 +14,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
14
14
 
15
15
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState` is not object-safe
16
16
  var markStyles = function markStyles() {
17
- return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n color: inherit;\n background-color: unset;\n -webkit-tap-highlight-color: transparent;\n\n &[data-mark-annotation-state='", "'] {\n ", ";\n\n &:focus,\n &[data-has-focus='true'] {\n ", ";\n }\n }\n"])), AnnotationMarkStates.ACTIVE, AnnotationSharedCSSByState().blur, AnnotationSharedCSSByState().focus);
17
+ return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tcolor: inherit;\n\tbackground-color: unset;\n\t-webkit-tap-highlight-color: transparent;\n\n\t&[data-mark-annotation-state='", "'] {\n\t\t", ";\n\n\t\t&:focus,\n\t\t&[data-has-focus='true'] {\n\t\t\t", ";\n\t\t}\n\t}\n"])), AnnotationMarkStates.ACTIVE, AnnotationSharedCSSByState().blur, AnnotationSharedCSSByState().focus);
18
18
  };
19
19
  export var MarkComponent = function MarkComponent(_ref) {
20
20
  var annotationParentIds = _ref.annotationParentIds,
@@ -1,4 +1,4 @@
1
1
  import { RendererActionsContext, RendererActionsContextConsumer } from './ui/RendererActionsContext';
2
2
  import { WithRendererActions } from './ui/RendererActionsContext/WithRendererActions';
3
3
  export type { default as RendererActions } from './actions/';
4
- export { RendererActionsContext, RendererActionsContextConsumer, WithRendererActions, };
4
+ export { RendererActionsContext, RendererActionsContextConsumer, WithRendererActions };
@@ -6,5 +6,5 @@ interface Result {
6
6
  renderBidiWarnings: (text: string) => ReactNode;
7
7
  warningLabel: string;
8
8
  }
9
- export declare const useBidiWarnings: ({ enableWarningTooltip, }: Config) => Result;
9
+ export declare const useBidiWarnings: ({ enableWarningTooltip }: Config) => Result;
10
10
  export {};
@@ -68,8 +68,7 @@ declare const _default: {
68
68
  UNSAFE_componentWillUpdate?(nextProps: Readonly<Props>, nextState: Readonly<import("@atlaskit/editor-common/ui").OverflowShadowState>, nextContext: any): void;
69
69
  };
70
70
  new (props: Props, context: any): {
71
- overflowContainer?: HTMLElement | null | undefined; /** We don't want this error to block renderer */
72
- /** We keep rendering the default content */
71
+ overflowContainer?: HTMLElement | null | undefined;
73
72
  container?: HTMLElement | undefined;
74
73
  shadowObserver?: import("@atlaskit/editor-common/ui").ShadowObserver | undefined;
75
74
  overflowContainerWidth: number;
@@ -5,5 +5,5 @@ export interface ScaleOptions {
5
5
  tableWidth: number;
6
6
  maxScale: number;
7
7
  }
8
- export declare const calcScalePercent: ({ renderWidth, tableWidth, maxScale, }: ScaleOptions) => number;
8
+ export declare const calcScalePercent: ({ renderWidth, tableWidth, maxScale }: ScaleOptions) => number;
9
9
  export declare const Colgroup: (props: SharedTableProps) => JSX.Element | null;
@@ -4,6 +4,6 @@ export declare const RendererContext: React.Context<RendererActions>;
4
4
  type RendererActionsContextProps = PropsWithChildren<{
5
5
  context?: RendererActions;
6
6
  }>;
7
- export declare function RendererActionsContext({ children, context, }: RendererActionsContextProps): JSX.Element;
7
+ export declare function RendererActionsContext({ children, context }: RendererActionsContextProps): JSX.Element;
8
8
  export declare const RendererActionsContextConsumer: React.Consumer<RendererActions>;
9
9
  export {};
@@ -4,7 +4,7 @@ export interface WithSmartCardStorageProps {
4
4
  smartCardStorage: Map<string, string>;
5
5
  }
6
6
  export declare const Context: React.Context<Map<string, string>>;
7
- export declare const Provider: ({ children, }: React.PropsWithChildren<unknown>) => JSX.Element;
7
+ export declare const Provider: ({ children }: React.PropsWithChildren<unknown>) => JSX.Element;
8
8
  export declare const withSmartCardStorage: <Props extends WithSmartCardStorageProps>(WrappedComponent: React.ComponentType<React.PropsWithChildren<Props>>) => {
9
9
  new (props: Diff<Props, WithSmartCardStorageProps> | Readonly<Diff<Props, WithSmartCardStorageProps>>): {
10
10
  render(): JSX.Element;
@@ -1,9 +1,6 @@
1
1
  import React, { type ReactNode } from 'react';
2
2
  export type TaskItemsDone = boolean | undefined;
3
- export type TaskItemsStateContext = [
4
- TaskItemsDone,
5
- React.Dispatch<TaskItemsFormatReducerAction>
6
- ];
3
+ export type TaskItemsStateContext = [TaskItemsDone, React.Dispatch<TaskItemsFormatReducerAction>];
7
4
  export declare const TaskItemsFormatContext: React.Context<TaskItemsStateContext>;
8
5
  export type TaskItemsFormatReducerAction = boolean | undefined;
9
6
  export declare function TaskItemsFormatProvider({ children }: {
@@ -1,2 +1,2 @@
1
1
  export { TaskItemsFormatProvider, TaskItemsFormatConsumer, useTaskItemsFormatContext, } from './TaskItemsFormatContext';
2
- export type { TaskItemsDone, TaskItemsFormatReducerAction, } from './TaskItemsFormatContext';
2
+ export type { TaskItemsDone, TaskItemsFormatReducerAction } from './TaskItemsFormatContext';
@@ -14,5 +14,5 @@ type Props = {
14
14
  * By exposing `onNestedHeaderIdMatch` here we can control when will consumers be notified:
15
15
  * only when a `newActiveHeaderId` comes in from the Provider and the list of header ids includes it.
16
16
  */
17
- declare const ActiveHeaderIdConsumer: ({ nestedHeaderIds, onNestedHeaderIdMatch, }: Props) => JSX.Element;
17
+ declare const ActiveHeaderIdConsumer: ({ nestedHeaderIds, onNestedHeaderIdMatch }: Props) => JSX.Element;
18
18
  export { Provider as ActiveHeaderIdProvider, ActiveHeaderIdConsumer };
@@ -7,7 +7,7 @@ export interface AnnotationHoverDispatchContext {
7
7
  initiateTimeout: () => void;
8
8
  setIsWithinRange: (isWithinRange: boolean) => void;
9
9
  }
10
- export declare const AnnotationHoverContext: ({ children, }: {
10
+ export declare const AnnotationHoverContext: ({ children }: {
11
11
  children?: ReactNode;
12
12
  }) => JSX.Element;
13
13
  export declare const useAnnotationHoverContext: () => AnnotationHoverStateContext;
@@ -12,7 +12,7 @@ type UseAnnotationUpdateSatteByEventProps = {
12
12
  updateSubscriber: AnnotationUpdateEmitter | null;
13
13
  };
14
14
  export declare const useAnnotationStateByTypeEvent: ({ type, updateSubscriber, }: UseAnnotationUpdateSatteByEventProps) => Record<string, AnnotationMarkStates | null>;
15
- export declare const useHasFocusEvent: ({ id, updateSubscriber, }: ListenEventProps) => boolean;
15
+ export declare const useHasFocusEvent: ({ id, updateSubscriber }: ListenEventProps) => boolean;
16
16
  type AnnotationsWithClickTarget = Pick<InlineCommentViewComponentProps, 'annotations' | 'clickElementTarget'> | null;
17
17
  export declare const useAnnotationClickEvent: (props: Pick<ListenEventProps, "createAnalyticsEvent" | "updateSubscriber"> & {
18
18
  isCommentsOnMediaAnalyticsEnabled?: boolean | undefined;
@@ -1,4 +1,4 @@
1
1
  import { RendererActionsContext, RendererActionsContextConsumer } from './ui/RendererActionsContext';
2
2
  import { WithRendererActions } from './ui/RendererActionsContext/WithRendererActions';
3
3
  export type { default as RendererActions } from './actions/';
4
- export { RendererActionsContext, RendererActionsContextConsumer, WithRendererActions, };
4
+ export { RendererActionsContext, RendererActionsContextConsumer, WithRendererActions };
@@ -6,5 +6,5 @@ interface Result {
6
6
  renderBidiWarnings: (text: string) => ReactNode;
7
7
  warningLabel: string;
8
8
  }
9
- export declare const useBidiWarnings: ({ enableWarningTooltip, }: Config) => Result;
9
+ export declare const useBidiWarnings: ({ enableWarningTooltip }: Config) => Result;
10
10
  export {};
@@ -68,8 +68,7 @@ declare const _default: {
68
68
  UNSAFE_componentWillUpdate?(nextProps: Readonly<Props>, nextState: Readonly<import("@atlaskit/editor-common/ui").OverflowShadowState>, nextContext: any): void;
69
69
  };
70
70
  new (props: Props, context: any): {
71
- overflowContainer?: HTMLElement | null | undefined; /** We don't want this error to block renderer */
72
- /** We keep rendering the default content */
71
+ overflowContainer?: HTMLElement | null | undefined;
73
72
  container?: HTMLElement | undefined;
74
73
  shadowObserver?: import("@atlaskit/editor-common/ui").ShadowObserver | undefined;
75
74
  overflowContainerWidth: number;
@@ -5,5 +5,5 @@ export interface ScaleOptions {
5
5
  tableWidth: number;
6
6
  maxScale: number;
7
7
  }
8
- export declare const calcScalePercent: ({ renderWidth, tableWidth, maxScale, }: ScaleOptions) => number;
8
+ export declare const calcScalePercent: ({ renderWidth, tableWidth, maxScale }: ScaleOptions) => number;
9
9
  export declare const Colgroup: (props: SharedTableProps) => JSX.Element | null;
@@ -4,6 +4,6 @@ export declare const RendererContext: React.Context<RendererActions>;
4
4
  type RendererActionsContextProps = PropsWithChildren<{
5
5
  context?: RendererActions;
6
6
  }>;
7
- export declare function RendererActionsContext({ children, context, }: RendererActionsContextProps): JSX.Element;
7
+ export declare function RendererActionsContext({ children, context }: RendererActionsContextProps): JSX.Element;
8
8
  export declare const RendererActionsContextConsumer: React.Consumer<RendererActions>;
9
9
  export {};
@@ -4,7 +4,7 @@ export interface WithSmartCardStorageProps {
4
4
  smartCardStorage: Map<string, string>;
5
5
  }
6
6
  export declare const Context: React.Context<Map<string, string>>;
7
- export declare const Provider: ({ children, }: React.PropsWithChildren<unknown>) => JSX.Element;
7
+ export declare const Provider: ({ children }: React.PropsWithChildren<unknown>) => JSX.Element;
8
8
  export declare const withSmartCardStorage: <Props extends WithSmartCardStorageProps>(WrappedComponent: React.ComponentType<React.PropsWithChildren<Props>>) => {
9
9
  new (props: Diff<Props, WithSmartCardStorageProps> | Readonly<Diff<Props, WithSmartCardStorageProps>>): {
10
10
  render(): JSX.Element;
@@ -1,2 +1,2 @@
1
1
  export { TaskItemsFormatProvider, TaskItemsFormatConsumer, useTaskItemsFormatContext, } from './TaskItemsFormatContext';
2
- export type { TaskItemsDone, TaskItemsFormatReducerAction, } from './TaskItemsFormatContext';
2
+ export type { TaskItemsDone, TaskItemsFormatReducerAction } from './TaskItemsFormatContext';
@@ -14,5 +14,5 @@ type Props = {
14
14
  * By exposing `onNestedHeaderIdMatch` here we can control when will consumers be notified:
15
15
  * only when a `newActiveHeaderId` comes in from the Provider and the list of header ids includes it.
16
16
  */
17
- declare const ActiveHeaderIdConsumer: ({ nestedHeaderIds, onNestedHeaderIdMatch, }: Props) => JSX.Element;
17
+ declare const ActiveHeaderIdConsumer: ({ nestedHeaderIds, onNestedHeaderIdMatch }: Props) => JSX.Element;
18
18
  export { Provider as ActiveHeaderIdProvider, ActiveHeaderIdConsumer };
@@ -7,7 +7,7 @@ export interface AnnotationHoverDispatchContext {
7
7
  initiateTimeout: () => void;
8
8
  setIsWithinRange: (isWithinRange: boolean) => void;
9
9
  }
10
- export declare const AnnotationHoverContext: ({ children, }: {
10
+ export declare const AnnotationHoverContext: ({ children }: {
11
11
  children?: ReactNode;
12
12
  }) => JSX.Element;
13
13
  export declare const useAnnotationHoverContext: () => AnnotationHoverStateContext;
@@ -12,7 +12,7 @@ type UseAnnotationUpdateSatteByEventProps = {
12
12
  updateSubscriber: AnnotationUpdateEmitter | null;
13
13
  };
14
14
  export declare const useAnnotationStateByTypeEvent: ({ type, updateSubscriber, }: UseAnnotationUpdateSatteByEventProps) => Record<string, AnnotationMarkStates | null>;
15
- export declare const useHasFocusEvent: ({ id, updateSubscriber, }: ListenEventProps) => boolean;
15
+ export declare const useHasFocusEvent: ({ id, updateSubscriber }: ListenEventProps) => boolean;
16
16
  type AnnotationsWithClickTarget = Pick<InlineCommentViewComponentProps, 'annotations' | 'clickElementTarget'> | null;
17
17
  export declare const useAnnotationClickEvent: (props: Pick<ListenEventProps, "createAnalyticsEvent" | "updateSubscriber"> & {
18
18
  isCommentsOnMediaAnalyticsEnabled?: boolean | undefined;