@atlaskit/renderer 102.0.0 → 103.0.1

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 (162) hide show
  1. package/CHANGELOG.md +27 -0
  2. package/dist/cjs/consts.js +2 -2
  3. package/dist/cjs/i18n/cs.js +4 -4
  4. package/dist/cjs/i18n/da.js +4 -4
  5. package/dist/cjs/i18n/de.js +4 -4
  6. package/dist/cjs/i18n/en.js +4 -4
  7. package/dist/cjs/i18n/en_GB.js +4 -4
  8. package/dist/cjs/i18n/es.js +4 -4
  9. package/dist/cjs/i18n/fi.js +4 -4
  10. package/dist/cjs/i18n/fr.js +4 -4
  11. package/dist/cjs/i18n/hu.js +4 -4
  12. package/dist/cjs/i18n/it.js +4 -4
  13. package/dist/cjs/i18n/ja.js +4 -4
  14. package/dist/cjs/i18n/ko.js +4 -4
  15. package/dist/cjs/i18n/nb.js +4 -4
  16. package/dist/cjs/i18n/nl.js +4 -4
  17. package/dist/cjs/i18n/pl.js +4 -4
  18. package/dist/cjs/i18n/pt_BR.js +4 -4
  19. package/dist/cjs/i18n/ru.js +4 -4
  20. package/dist/cjs/i18n/sv.js +4 -4
  21. package/dist/cjs/i18n/th.js +4 -4
  22. package/dist/cjs/i18n/tr.js +4 -4
  23. package/dist/cjs/i18n/uk.js +4 -4
  24. package/dist/cjs/i18n/vi.js +4 -4
  25. package/dist/cjs/i18n/zh.js +4 -4
  26. package/dist/cjs/i18n/zh_TW.js +4 -4
  27. package/dist/cjs/messages.js +1 -1
  28. package/dist/cjs/react/nodes/panel.js +19 -10
  29. package/dist/cjs/react/nodes/tableCell.js +8 -26
  30. package/dist/cjs/ui/ExtensionRenderer.js +9 -2
  31. package/dist/cjs/ui/Renderer/index.js +1 -1
  32. package/dist/cjs/ui/Renderer/style.js +5 -3
  33. package/dist/cjs/ui/SortingIcon.js +55 -28
  34. package/dist/cjs/version.json +1 -1
  35. package/dist/es2019/consts.js +2 -2
  36. package/dist/es2019/i18n/cs.js +4 -4
  37. package/dist/es2019/i18n/da.js +4 -4
  38. package/dist/es2019/i18n/de.js +4 -4
  39. package/dist/es2019/i18n/en.js +4 -4
  40. package/dist/es2019/i18n/en_GB.js +4 -4
  41. package/dist/es2019/i18n/es.js +4 -4
  42. package/dist/es2019/i18n/fi.js +4 -4
  43. package/dist/es2019/i18n/fr.js +4 -4
  44. package/dist/es2019/i18n/hu.js +4 -4
  45. package/dist/es2019/i18n/it.js +4 -4
  46. package/dist/es2019/i18n/ja.js +4 -4
  47. package/dist/es2019/i18n/ko.js +4 -4
  48. package/dist/es2019/i18n/nb.js +4 -4
  49. package/dist/es2019/i18n/nl.js +4 -4
  50. package/dist/es2019/i18n/pl.js +4 -4
  51. package/dist/es2019/i18n/pt_BR.js +4 -4
  52. package/dist/es2019/i18n/ru.js +4 -4
  53. package/dist/es2019/i18n/sv.js +4 -4
  54. package/dist/es2019/i18n/th.js +4 -4
  55. package/dist/es2019/i18n/tr.js +4 -4
  56. package/dist/es2019/i18n/uk.js +4 -4
  57. package/dist/es2019/i18n/vi.js +4 -4
  58. package/dist/es2019/i18n/zh.js +4 -4
  59. package/dist/es2019/i18n/zh_TW.js +4 -4
  60. package/dist/es2019/messages.js +1 -1
  61. package/dist/es2019/react/nodes/panel.js +16 -6
  62. package/dist/es2019/react/nodes/tableCell.js +8 -27
  63. package/dist/es2019/ui/ExtensionRenderer.js +7 -2
  64. package/dist/es2019/ui/Renderer/index.js +1 -1
  65. package/dist/es2019/ui/Renderer/style.js +37 -16
  66. package/dist/es2019/ui/SortingIcon.js +89 -32
  67. package/dist/es2019/version.json +1 -1
  68. package/dist/esm/consts.js +2 -2
  69. package/dist/esm/i18n/cs.js +4 -4
  70. package/dist/esm/i18n/da.js +4 -4
  71. package/dist/esm/i18n/de.js +4 -4
  72. package/dist/esm/i18n/en.js +4 -4
  73. package/dist/esm/i18n/en_GB.js +4 -4
  74. package/dist/esm/i18n/es.js +4 -4
  75. package/dist/esm/i18n/fi.js +4 -4
  76. package/dist/esm/i18n/fr.js +4 -4
  77. package/dist/esm/i18n/hu.js +4 -4
  78. package/dist/esm/i18n/it.js +4 -4
  79. package/dist/esm/i18n/ja.js +4 -4
  80. package/dist/esm/i18n/ko.js +4 -4
  81. package/dist/esm/i18n/nb.js +4 -4
  82. package/dist/esm/i18n/nl.js +4 -4
  83. package/dist/esm/i18n/pl.js +4 -4
  84. package/dist/esm/i18n/pt_BR.js +4 -4
  85. package/dist/esm/i18n/ru.js +4 -4
  86. package/dist/esm/i18n/sv.js +4 -4
  87. package/dist/esm/i18n/th.js +4 -4
  88. package/dist/esm/i18n/tr.js +4 -4
  89. package/dist/esm/i18n/uk.js +4 -4
  90. package/dist/esm/i18n/vi.js +4 -4
  91. package/dist/esm/i18n/zh.js +4 -4
  92. package/dist/esm/i18n/zh_TW.js +4 -4
  93. package/dist/esm/messages.js +1 -1
  94. package/dist/esm/react/nodes/panel.js +18 -10
  95. package/dist/esm/react/nodes/tableCell.js +8 -26
  96. package/dist/esm/ui/ExtensionRenderer.js +9 -2
  97. package/dist/esm/ui/Renderer/index.js +1 -1
  98. package/dist/esm/ui/Renderer/style.js +5 -4
  99. package/dist/esm/ui/SortingIcon.js +55 -27
  100. package/dist/esm/version.json +1 -1
  101. package/dist/types/consts.d.ts +2 -2
  102. package/dist/types/i18n/cs.d.ts +2 -2
  103. package/dist/types/i18n/da.d.ts +2 -2
  104. package/dist/types/i18n/de.d.ts +2 -2
  105. package/dist/types/i18n/en.d.ts +2 -2
  106. package/dist/types/i18n/en_GB.d.ts +2 -2
  107. package/dist/types/i18n/es.d.ts +2 -2
  108. package/dist/types/i18n/fi.d.ts +2 -2
  109. package/dist/types/i18n/fr.d.ts +2 -2
  110. package/dist/types/i18n/hu.d.ts +2 -2
  111. package/dist/types/i18n/it.d.ts +2 -2
  112. package/dist/types/i18n/ja.d.ts +2 -2
  113. package/dist/types/i18n/ko.d.ts +2 -2
  114. package/dist/types/i18n/nb.d.ts +2 -2
  115. package/dist/types/i18n/nl.d.ts +2 -2
  116. package/dist/types/i18n/pl.d.ts +2 -2
  117. package/dist/types/i18n/pt_BR.d.ts +2 -2
  118. package/dist/types/i18n/ru.d.ts +2 -2
  119. package/dist/types/i18n/sv.d.ts +2 -2
  120. package/dist/types/i18n/th.d.ts +2 -2
  121. package/dist/types/i18n/tr.d.ts +2 -2
  122. package/dist/types/i18n/uk.d.ts +2 -2
  123. package/dist/types/i18n/vi.d.ts +2 -2
  124. package/dist/types/i18n/zh.d.ts +2 -2
  125. package/dist/types/i18n/zh_TW.d.ts +2 -2
  126. package/dist/types/react/nodes/bodiedExtension.d.ts +2 -1
  127. package/dist/types/react/nodes/extension.d.ts +2 -1
  128. package/dist/types/react/nodes/inlineExtension.d.ts +2 -0
  129. package/dist/types/ui/ExtensionRenderer.d.ts +2 -0
  130. package/dist/types/ui/SortingIcon.d.ts +4 -1
  131. package/dist/types-ts4.0/consts.d.ts +2 -2
  132. package/dist/types-ts4.0/i18n/cs.d.ts +2 -2
  133. package/dist/types-ts4.0/i18n/da.d.ts +2 -2
  134. package/dist/types-ts4.0/i18n/de.d.ts +2 -2
  135. package/dist/types-ts4.0/i18n/en.d.ts +2 -2
  136. package/dist/types-ts4.0/i18n/en_GB.d.ts +2 -2
  137. package/dist/types-ts4.0/i18n/es.d.ts +2 -2
  138. package/dist/types-ts4.0/i18n/fi.d.ts +2 -2
  139. package/dist/types-ts4.0/i18n/fr.d.ts +2 -2
  140. package/dist/types-ts4.0/i18n/hu.d.ts +2 -2
  141. package/dist/types-ts4.0/i18n/it.d.ts +2 -2
  142. package/dist/types-ts4.0/i18n/ja.d.ts +2 -2
  143. package/dist/types-ts4.0/i18n/ko.d.ts +2 -2
  144. package/dist/types-ts4.0/i18n/nb.d.ts +2 -2
  145. package/dist/types-ts4.0/i18n/nl.d.ts +2 -2
  146. package/dist/types-ts4.0/i18n/pl.d.ts +2 -2
  147. package/dist/types-ts4.0/i18n/pt_BR.d.ts +2 -2
  148. package/dist/types-ts4.0/i18n/ru.d.ts +2 -2
  149. package/dist/types-ts4.0/i18n/sv.d.ts +2 -2
  150. package/dist/types-ts4.0/i18n/th.d.ts +2 -2
  151. package/dist/types-ts4.0/i18n/tr.d.ts +2 -2
  152. package/dist/types-ts4.0/i18n/uk.d.ts +2 -2
  153. package/dist/types-ts4.0/i18n/vi.d.ts +2 -2
  154. package/dist/types-ts4.0/i18n/zh.d.ts +2 -2
  155. package/dist/types-ts4.0/i18n/zh_TW.d.ts +2 -2
  156. package/dist/types-ts4.0/react/nodes/bodiedExtension.d.ts +2 -1
  157. package/dist/types-ts4.0/react/nodes/extension.d.ts +2 -1
  158. package/dist/types-ts4.0/react/nodes/inlineExtension.d.ts +2 -0
  159. package/dist/types-ts4.0/ui/ExtensionRenderer.d.ts +2 -0
  160. package/dist/types-ts4.0/ui/SortingIcon.d.ts +4 -1
  161. package/package.json +20 -16
  162. package/report.api.md +359 -255
@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
11
11
 
12
12
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
13
 
14
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
15
+
14
16
  var _react = _interopRequireDefault(require("react"));
15
17
 
16
18
  var _react2 = require("@emotion/react");
@@ -31,24 +33,30 @@ var _icons = require("@atlaskit/editor-common/icons");
31
33
 
32
34
  var _templateObject, _templateObject2;
33
35
 
34
- var PanelStyled = function PanelStyled(props) {
36
+ var _excluded = ["backgroundColor", "hasIcon"];
37
+
38
+ var PanelStyled = function PanelStyled(_ref) {
39
+ var backgroundColor = _ref.backgroundColor,
40
+ hasIcon = _ref.hasIcon,
41
+ props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
42
+
35
43
  var styles = function styles(theme) {
36
- return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n &.", " {\n ", "\n }\n "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)({
44
+ return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n &.", " {\n ", "\n\n &[data-panel-type=", "] {\n ", "\n }\n }\n "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)({
37
45
  theme: theme
38
- }));
46
+ }), _adfSchema.PanelType.CUSTOM, hasIcon ? '' : 'padding: 12px;');
39
47
  };
40
48
 
41
- if (props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && props.backgroundColor) {
49
+ if (props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && backgroundColor) {
42
50
  styles = function styles(theme) {
43
51
  var customStyle = (0, _theme.themed)({
44
52
  dark: _panel.getPanelBackgroundDarkModeColors,
45
- light: "background-color: ".concat(props.backgroundColor, ";")
53
+ light: "background-color: ".concat(backgroundColor, ";")
46
54
  })({
47
55
  theme: theme
48
56
  });
49
- return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n &.", " {\n ", "\n }\n\n &[data-panel-type=", "] {\n ", ";\n }\n "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)({
57
+ return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n &.", " {\n ", "\n }\n\n &[data-panel-type=", "] {\n ", ";\n ", "\n }\n "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)({
50
58
  theme: theme
51
- }), _adfSchema.PanelType.CUSTOM, customStyle);
59
+ }), _adfSchema.PanelType.CUSTOM, customStyle, hasIcon ? '' : 'padding: 12px;');
52
60
  };
53
61
  }
54
62
 
@@ -101,9 +109,9 @@ var Panel = function Panel(props) {
101
109
  });
102
110
  };
103
111
 
104
- var renderIcon = function renderIcon() {
105
- var icon = getIcon();
112
+ var icon = getIcon();
106
113
 
114
+ var renderIcon = function renderIcon() {
107
115
  if (icon) {
108
116
  return (0, _react2.jsx)("div", {
109
117
  className: _panel.PanelSharedCssClassName.icon
@@ -118,7 +126,8 @@ var Panel = function Panel(props) {
118
126
  "data-panel-icon": panelIcon,
119
127
  "data-panel-icon-id": panelIconId,
120
128
  "data-panel-icon-text": panelIconText,
121
- backgroundColor: panelColor
129
+ backgroundColor: panelColor,
130
+ hasIcon: Boolean(icon)
122
131
  }, renderIcon(), (0, _react2.jsx)("div", {
123
132
  className: _panel.PanelSharedCssClassName.content
124
133
  }, children));
@@ -174,18 +174,10 @@ var withSortableColumn = function withSortableColumn(WrapperComponent) {
174
174
  if (keys.includes(event.key) && !IgnoreSorting.includes(tagName)) {
175
175
  event.preventDefault();
176
176
 
177
- _this.onClick(event);
177
+ _this.sort();
178
178
  }
179
179
  });
180
- (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClick", function (event) {
181
- // ignore sorting when specific elements are clicked
182
- var _ref2 = event.target,
183
- tagName = _ref2.tagName;
184
-
185
- if (IgnoreSorting.includes(tagName)) {
186
- return;
187
- }
188
-
180
+ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "sort", function () {
189
181
  var _this$props2 = _this.props,
190
182
  fireAnalyticsEvent = _this$props2.fireAnalyticsEvent,
191
183
  onSorting = _this$props2.onSorting,
@@ -237,28 +229,18 @@ var withSortableColumn = function withSortableColumn(WrapperComponent) {
237
229
  return /*#__PURE__*/_react.default.createElement(WrapperComponent, this.props);
238
230
  }
239
231
 
240
- var className = _consts.RendererCssClassName.SORTABLE_COLUMN;
241
-
242
- if (!onSorting) {
243
- className = "".concat(className, " ").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED);
244
- }
245
-
246
232
  return /*#__PURE__*/_react.default.createElement(WrapperComponent, (0, _extends2.default)({}, this.props, {
247
- className: className,
233
+ className: _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER,
248
234
  ariaSort: getSortOrderLabel(intl, sortOrdered)
249
235
  }), /*#__PURE__*/_react.default.createElement("div", {
250
- className: _consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON,
251
- role: "button",
252
- tabIndex: onSorting ? 0 : -1,
253
- onClick: this.onClick,
254
- onKeyDown: this.onKeyPress,
255
- "aria-disabled": !onSorting
236
+ className: _consts.RendererCssClassName.SORTABLE_COLUMN
256
237
  }, children, /*#__PURE__*/_react.default.createElement("figure", {
257
- "aria-hidden": true,
258
- className: "".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON, " ").concat(sortOrderedClassName)
238
+ className: "".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, " ").concat(sortOrderedClassName)
259
239
  }, /*#__PURE__*/_react.default.createElement(_SortingIcon.default, {
260
240
  isSortingAllowed: !!onSorting,
261
- sortOrdered: sortOrdered
241
+ sortOrdered: sortOrdered,
242
+ onClick: this.sort,
243
+ onKeyDown: this.onKeyPress
262
244
  }))));
263
245
  }
264
246
  }]);
@@ -63,6 +63,8 @@ var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
63
63
  });
64
64
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNodeRenderer", (0, _memoizeOne.default)(_extensions.getNodeRenderer));
65
65
  (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderExtensionNode", function (extensionProvider) {
66
+ var _marks$find, _marks$find$attrs;
67
+
66
68
  var _this$props = _this.props,
67
69
  extensionHandlers = _this$props.extensionHandlers,
68
70
  rendererContext = _this$props.rendererContext,
@@ -72,14 +74,19 @@ var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
72
74
  content = _this$props.content,
73
75
  text = _this$props.text,
74
76
  type = _this$props.type,
75
- localId = _this$props.localId;
77
+ localId = _this$props.localId,
78
+ marks = _this$props.marks;
79
+ var fragmentLocalId = marks === null || marks === void 0 ? void 0 : (_marks$find = marks.find(function (m) {
80
+ return m.type.name === 'fragment';
81
+ })) === null || _marks$find === void 0 ? void 0 : (_marks$find$attrs = _marks$find.attrs) === null || _marks$find$attrs === void 0 ? void 0 : _marks$find$attrs.localId;
76
82
  var node = {
77
83
  type: type,
78
84
  extensionKey: extensionKey,
79
85
  extensionType: extensionType,
80
86
  parameters: parameters,
81
87
  content: content || text,
82
- localId: localId
88
+ localId: localId,
89
+ fragmentLocalId: fragmentLocalId
83
90
  };
84
91
  var result = null;
85
92
 
@@ -102,7 +102,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
102
102
  var DEGRADED_SEVERITY_THRESHOLD = 3000;
103
103
  exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
104
104
  var packageName = "@atlaskit/renderer";
105
- var packageVersion = "102.0.0";
105
+ var packageVersion = "103.0.1";
106
106
 
107
107
  var Renderer = /*#__PURE__*/function (_PureComponent) {
108
108
  (0, _inherits2.default)(Renderer, _PureComponent);
@@ -27,6 +27,8 @@ var _styles = require("@atlaskit/editor-common/styles");
27
27
 
28
28
  var _ui = require("@atlaskit/editor-common/ui");
29
29
 
30
+ var _utils = require("@atlaskit/editor-common/utils");
31
+
30
32
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
31
33
 
32
34
  var _consts = require("../../consts");
@@ -98,7 +100,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
98
100
  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(_headingAnchor.HeadingAnchorWrapperClassName, " {\n position: unset;\n }\n > {\n h1, h2, h3, h4, h5, h6 {\n margin-right: 30px;\n }\n }\n ");
99
101
  }
100
102
 
101
- return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n .", " {\n padding: 0;\n\n .", " {\n width: 100%;\n height: 100%;\n cursor: pointer;\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.-right:first-of-type + * {\n margin-top: 0;\n }\n\n > .ProseMirror-gapcursor:first-of-type + 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 .", " {\n cursor: default;\n }\n\n .", " {\n margin: 0;\n opacity: 1;\n transition: opacity 0.2s ease-in-out;\n }\n\n .", " {\n opacity: 0;\n }\n\n &:hover {\n .", " {\n opacity: 1;\n }\n }\n }\n "])), _consts.RendererCssClassName.SORTABLE_COLUMN, _consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, _styles.tableCellPadding, (0, _tokens.token)('color.border.focused', colors.B300), headingsCss, _consts.RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED, _consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER);
103
+ return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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 "])), _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN, _styles.tableCellPadding, (0, _tokens.token)('color.border.focused', colors.B300), headingsCss, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
102
104
  };
103
105
 
104
106
  var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
@@ -128,7 +130,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
128
130
  var themeProps = {
129
131
  theme: theme
130
132
  };
131
- return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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 & 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 & .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: ", "px;\n color: ", ";\n padding: 2px 4px;\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: ", "px 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: 8px;\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 width: 100% !important;\n left: 0 !important;\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 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: 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: -ms-grid;\n display: grid;\n -ms-grid-columns: auto 1fr;\n /* stylelint-enable */\n\n grid-template-columns: minmax(0, 1fr);\n position: relative;\n border-radius: ", "px;\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 & > span {\n /* stylelint-disable value-no-vendor-prefix */\n -ms-grid-row: 1;\n -ms-grid-column: 2;\n /* stylelint-enable */\n grid-column: 1;\n }\n }\n\n & .MediaGroup,\n & .code-block {\n margin-top: ", ";\n\n &:first-child {\n margin-top: 0;\n }\n\n &:hover button.copy-to-clipboard,\n .copy-to-clipboard:focus {\n opacity: 1;\n position: absolute;\n height: 32px;\n width: 32px;\n right: 6px;\n top: 4px;\n padding: 2px;\n }\n }\n\n ", "\n\n ", ";\n & [data-layout-section] {\n margin-top: ", "px;\n & > div + div {\n margin-left: ", "px;\n }\n\n @media screen and (max-width: ", "px) {\n & > div + div {\n margin-left: 0;\n }\n }\n }\n "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
133
+ return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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 & 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 & .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: ", "px;\n color: ", ";\n padding: 2px 4px;\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: ", "px 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: 8px;\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 width: 100% !important;\n left: 0 !important;\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 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: 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: -ms-grid;\n display: grid;\n -ms-grid-columns: auto 1fr;\n /* stylelint-enable */\n\n grid-template-columns: minmax(0, 1fr);\n position: relative;\n border-radius: ", "px;\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 & > span {\n /* stylelint-disable value-no-vendor-prefix */\n -ms-grid-row: 1;\n -ms-grid-column: 2;\n /* stylelint-enable */\n grid-column: 1;\n }\n }\n\n & .MediaGroup,\n & .code-block {\n margin-top: ", ";\n\n &:first-child {\n margin-top: 0;\n }\n\n &:hover button.copy-to-clipboard,\n .copy-to-clipboard:focus {\n opacity: 1;\n position: absolute;\n height: 32px;\n width: 32px;\n right: 6px;\n top: 4px;\n padding: 2px;\n }\n }\n\n ", "\n\n ", ";\n & [data-layout-section] {\n margin-top: ", "px;\n & > div + div {\n margin-left: ", "px;\n }\n\n @media screen and (max-width: ", "px) {\n & > div + div {\n margin-left: 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 }\n "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
132
134
  light: (0, _tokens.token)('color.text', colors.N800),
133
135
  dark: (0, _tokens.token)('color.text', '#B8C7E0')
134
136
  })(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), (0, _tokens.token)('color.link', colors.B400), (0, _tokens.token)('color.link', colors.B300), (0, _tokens.token)('color.link.pressed', colors.B500), colors.placeholderText(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(themeProps), (0, _styles.ruleSharedStyles)(themeProps), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(themeProps), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
@@ -164,7 +166,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
164
166
  })(themeProps), (0, _components.themed)({
165
167
  light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableToolbar),
166
168
  dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableToolbarDark)
167
- })(themeProps), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth);
169
+ })(themeProps), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
168
170
  };
169
171
  };
170
172
 
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.default = exports.TableSortIconDataUrl = exports.StatusClassNames = void 0;
8
+ exports.default = exports.StatusClassNames = void 0;
9
9
 
10
10
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
11
 
@@ -25,17 +25,11 @@ var _reactIntlNext = require("react-intl-next");
25
25
 
26
26
  var _tokens = require("@atlaskit/tokens");
27
27
 
28
- var _templateObject, _templateObject2;
28
+ var _consts = require("../consts");
29
29
 
30
- // We use data url here because of this issue:
31
- // https://product-fabric.atlassian.net/browse/ED-8001
32
- // Remove this workaround if Firefox has fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
33
- // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4136
34
- var TableSortIconDataUrl = "data:image/svg+xml;utf8,".concat(encodeURIComponent("<svg xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M-8-6h24v24H-8z\"></path><path d=\"M3 8.509V1c0-.552.449-1 1-1 .552 0 1 .448 1 1V8.51l1.217-1.206a1.05 1.05 0 011.477 0 1.03 1.03 0 01.004 1.463l-.003.002-2.956 2.93a1.053 1.053 0 01-1.478 0L.305 8.767a1.03 1.03 0 01.001-1.464 1.05 1.05 0 011.477 0L3 8.508z\" fill=\"#42526E\"></path></g></svg>"));
35
- exports.TableSortIconDataUrl = TableSortIconDataUrl;
36
- var TABLE_SORTING_ICON_CLASS = 'table-sorting-icon';
37
- var StatusClassNames; // TODO: get design to check border
30
+ var _templateObject, _templateObject2, _templateObject3;
38
31
 
32
+ var StatusClassNames;
39
33
  exports.StatusClassNames = StatusClassNames;
40
34
 
41
35
  (function (StatusClassNames) {
@@ -45,23 +39,34 @@ exports.StatusClassNames = StatusClassNames;
45
39
  StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
46
40
  })(StatusClassNames || (exports.StatusClassNames = StatusClassNames = {}));
47
41
 
48
- var wrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n display: flex;\n height: 28px;\n width: 28px;\n margin: 6px;\n right: 0;\n top: 0;\n border: 2px solid ", ";\n border-radius: ", "px;\n background-color: ", ";\n justify-content: center;\n align-items: center;\n\n &:hover {\n background-color: ", ";\n }\n\n &.", " {\n cursor: not-allowed;\n }\n"])), (0, _tokens.token)('color.border.inverse', '#fff'), (0, _constants.gridSize)() / 2, (0, _tokens.token)('color.background.neutral.subtle', _colors.N20), (0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N30), StatusClassNames.SORTING_NOT_ALLOWED);
49
- var tableSortingIconStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 8px;\n height: 12px;\n transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n transform-origin: 50% 50%;\n background-image: url(", ");\n\n &.", " {\n transform: rotate(-180deg);\n }\n\n &.", "-inactive {\n opacity: 0.7;\n }\n"])), TableSortIconDataUrl, StatusClassNames.DESC, TABLE_SORTING_ICON_CLASS);
42
+ var buttonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n display: flex;\n height: 28px;\n width: 28px;\n margin: 6px;\n right: 0;\n top: 0;\n border: 2px solid ", ";\n border-radius: ", "px;\n background-color: ", ";\n justify-content: center;\n align-items: center;\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.", "__not-allowed {\n cursor: not-allowed;\n }\n"])), (0, _tokens.token)('color.border', '#fff'), (0, _constants.gridSize)() / 2, (0, _tokens.token)('elevation.surface.overlay', _colors.N20), (0, _tokens.token)('elevation.surface.overlay.hovered', _colors.N30), (0, _tokens.token)('elevation.surface.overlay.pressed', 'rgba(179, 212, 255, 0.6)'), _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
43
+ var iconWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n width: 8px;\n height: 12px;\n transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n transform-origin: 50% 50%;\n display: flex;\n justify-content: center;\n\n &.", " {\n transform: rotate(-180deg);\n }\n\n &.", "-inactive {\n opacity: 0.7;\n }\n"])), StatusClassNames.DESC, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON); // The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001
44
+ // The TL;DR is that svg's in tables mess up how HTML is copied in Firefox. Using a styled div instead solves the problem.
45
+ // For this reason, svg's should be avoided in tables until this issue is fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
50
46
 
51
- var getClassName = function getClassName(status) {
52
- switch (status) {
47
+ var iconStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n width: 2px;\n border-radius: 50px;\n background: ", ";\n\n &::before,\n &::after {\n background: ", ";\n content: '';\n height: 2px;\n width: 6px;\n position: absolute;\n border-radius: 50px;\n }\n\n &::before {\n transform: rotate(45deg) translate(3.4px, 8.5px);\n }\n\n &::after {\n transform: rotate(-45deg) translate(-6.3px, 5.7px);\n }\n"])), (0, _tokens.token)('color.icon', '#42526E'), (0, _tokens.token)('color.icon', '#42526E'));
48
+
49
+ var getIconClassName = function getIconClassName(isSortingAllowed, sortOrdered) {
50
+ var activated = sortOrdered !== _types.SortOrder.NO_ORDER;
51
+ var activeStatusClass = "".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON, "-").concat(activated ? 'active' : 'inactive');
52
+
53
+ if (!isSortingAllowed) {
54
+ return "".concat(StatusClassNames.SORTING_NOT_ALLOWED, " ").concat(activeStatusClass);
55
+ }
56
+
57
+ switch (sortOrdered) {
53
58
  case _types.SortOrder.ASC:
54
- return StatusClassNames.ASC;
59
+ return "".concat(StatusClassNames.ASC, " ").concat(activeStatusClass);
55
60
 
56
61
  case _types.SortOrder.DESC:
57
- return StatusClassNames.DESC;
62
+ return "".concat(StatusClassNames.DESC, " ").concat(activeStatusClass);
58
63
 
59
64
  default:
60
- return StatusClassNames.NO_ORDER;
65
+ return "".concat(StatusClassNames.NO_ORDER, " ").concat(activeStatusClass);
61
66
  }
62
67
  };
63
68
 
64
- var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, status) {
69
+ var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, sortOrdered) {
65
70
  var noOrderLabel = _messages.sortingIconMessages.noOrderLabel,
66
71
  ascOrderLabel = _messages.sortingIconMessages.ascOrderLabel,
67
72
  descOrderLabel = _messages.sortingIconMessages.descOrderLabel,
@@ -71,7 +76,7 @@ var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, status) {
71
76
  return intl.formatMessage(invalidLabel);
72
77
  }
73
78
 
74
- switch (status) {
79
+ switch (sortOrdered) {
75
80
  case _types.SortOrder.NO_ORDER:
76
81
  return intl.formatMessage(noOrderLabel);
77
82
 
@@ -88,21 +93,43 @@ var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, status) {
88
93
  var SortingIcon = function SortingIcon(_ref) {
89
94
  var isSortingAllowed = _ref.isSortingAllowed,
90
95
  sortOrdered = _ref.sortOrdered,
91
- intl = _ref.intl;
92
- var activated = sortOrdered !== _types.SortOrder.NO_ORDER;
93
- var wrapperClassName = !isSortingAllowed ? StatusClassNames.SORTING_NOT_ALLOWED : '';
96
+ intl = _ref.intl,
97
+ onClick = _ref.onClick,
98
+ onKeyDown = _ref.onKeyDown;
99
+ var buttonClassName = "".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON).concat(isSortingAllowed ? '' : " ".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON, "__not-allowed"));
94
100
  var content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
101
+
102
+ var handleClick = function handleClick() {
103
+ if (isSortingAllowed) {
104
+ onClick();
105
+ }
106
+ };
107
+
108
+ var handleKeyDown = function handleKeyDown(event) {
109
+ if (isSortingAllowed) {
110
+ onKeyDown(event);
111
+ }
112
+ };
113
+
95
114
  return (0, _react.jsx)(_tooltip.default, {
96
115
  delay: 0,
97
116
  content: content,
98
117
  position: "top"
99
- }, (0, _react.jsx)("figure", {
100
- css: wrapperStyles,
101
- className: wrapperClassName
102
118
  }, (0, _react.jsx)("div", {
103
- css: tableSortingIconStyles,
104
- className: "".concat(getClassName(sortOrdered), " ").concat(TABLE_SORTING_ICON_CLASS, "-").concat(activated ? 'active' : 'inactive')
105
- })));
119
+ css: buttonStyles,
120
+ className: buttonClassName,
121
+ role: "button",
122
+ tabIndex: isSortingAllowed ? 0 : -1,
123
+ "aria-label": "sort column",
124
+ "aria-disabled": !isSortingAllowed,
125
+ onClick: handleClick,
126
+ onKeyDown: handleKeyDown
127
+ }, (0, _react.jsx)("div", {
128
+ css: iconWrapperStyles,
129
+ className: getIconClassName(isSortingAllowed, sortOrdered)
130
+ }, (0, _react.jsx)("div", {
131
+ css: iconStyles
132
+ }))));
106
133
  };
107
134
 
108
135
  var _default = (0, _reactIntlNext.injectIntl)(SortingIcon);
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/renderer",
3
- "version": "102.0.0",
3
+ "version": "103.0.1",
4
4
  "sideEffects": false
5
5
  }
@@ -5,9 +5,9 @@ export const RendererCssClassName = {
5
5
  EXTENSION_CENTER_ALIGN: `${clPrefix}extension-center-align`,
6
6
  EXTENSION_OVERFLOW_CONTAINER: `${clPrefix}extension-overflow-container`,
7
7
  NUMBER_COLUMN: `${clPrefix}table-number-column`,
8
+ SORTABLE_COLUMN_WRAPPER: `${clPrefix}tableHeader-sortable-column__wrapper`,
8
9
  SORTABLE_COLUMN: `${clPrefix}tableHeader-sortable-column`,
9
- SORTABLE_COLUMN_BUTTON: `${clPrefix}tableHeader-sortable-column__button`,
10
- SORTABLE_COLUMN_NOT_ALLOWED: `${clPrefix}tableHeader-sortable-column__not-allowed`,
10
+ SORTABLE_COLUMN_ICON_WRAPPER: `${clPrefix}tableHeader-sorting-icon__wrapper`,
11
11
  SORTABLE_COLUMN_ICON: `${clPrefix}tableHeader-sorting-icon`,
12
12
  SORTABLE_COLUMN_NO_ORDER: `${clPrefix}tableHeader-sorting-icon__no-order`
13
13
  };
@@ -6,15 +6,15 @@
6
6
  */
7
7
  //Czech
8
8
  export default {
9
- 'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Zkopírováno!',
10
- 'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Kopírovat',
11
9
  'fabric.editor.headingLink.ascOrderLabel': 'Seřadit sloupec od Z do A',
12
10
  'fabric.editor.headingLink.ascSortingLabel': 'vzestupně',
13
11
  'fabric.editor.headingLink.copied': 'Zkopírováno!',
14
12
  'fabric.editor.headingLink.copyAnchorLink': 'Kopírovat odkaz na nadpis',
15
13
  'fabric.editor.headingLink.copyAriaLabel': 'Kopírovat',
16
- 'fabric.editor.headingLink.descOrderLabel': '⚠️ Tabulku se sloučenou buňkou nelze seřadit',
14
+ 'fabric.editor.headingLink.descOrderLabel': 'Zrušit řazení',
15
+ 'fabric.editor.headingLink.descSortingLabel': 'sestupně',
17
16
  'fabric.editor.headingLink.failedToCopy': 'Kopírování se nezdařilo',
17
+ 'fabric.editor.headingLink.invalidLabel': '⚠️ Tabulku se sloučenými buňkami nelze seřadit',
18
18
  'fabric.editor.headingLink.noOrderLabel': 'Seřadit sloupec od A do Z',
19
- 'fabric.editor.headingLink.noneSortingLabel': 'sestupně'
19
+ 'fabric.editor.headingLink.noneSortingLabel': 'Žádné'
20
20
  };
@@ -6,15 +6,15 @@
6
6
  */
7
7
  //Danish (Denmark)
8
8
  export default {
9
- 'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Kopieret!',
10
- 'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Kopiér',
11
9
  'fabric.editor.headingLink.ascOrderLabel': 'Sortér kolonnen fra Å til A',
12
10
  'fabric.editor.headingLink.ascSortingLabel': 'stigende',
13
11
  'fabric.editor.headingLink.copied': 'Kopieret!',
14
12
  'fabric.editor.headingLink.copyAnchorLink': 'Kopiér link til overskrift',
15
13
  'fabric.editor.headingLink.copyAriaLabel': 'Kopiér',
16
- 'fabric.editor.headingLink.descOrderLabel': '⚠️ En tabel med flettede celler kan ikke sorteres',
14
+ 'fabric.editor.headingLink.descOrderLabel': 'Ryd sortering',
15
+ 'fabric.editor.headingLink.descSortingLabel': 'faldende',
17
16
  'fabric.editor.headingLink.failedToCopy': 'Kopiering mislykkedes',
17
+ 'fabric.editor.headingLink.invalidLabel': '⚠️ En tabel med flettede celler kan ikke sorteres',
18
18
  'fabric.editor.headingLink.noOrderLabel': 'Sortér kolonnen fra A til Å',
19
- 'fabric.editor.headingLink.noneSortingLabel': 'faldende'
19
+ 'fabric.editor.headingLink.noneSortingLabel': 'ingen'
20
20
  };
@@ -6,15 +6,15 @@
6
6
  */
7
7
  //German (Germany)
8
8
  export default {
9
- 'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Kopiert!',
10
- 'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Kopieren',
11
9
  'fabric.editor.headingLink.ascOrderLabel': 'Spalte von Z nach A sortieren',
12
10
  'fabric.editor.headingLink.ascSortingLabel': 'aufsteigend',
13
11
  'fabric.editor.headingLink.copied': 'Kopiert!',
14
12
  'fabric.editor.headingLink.copyAnchorLink': 'Link in Überschrift kopieren',
15
13
  'fabric.editor.headingLink.copyAriaLabel': 'Kopieren',
16
- 'fabric.editor.headingLink.descOrderLabel': '⚠️ Tabellen mit verbundenen Zellen können nicht sortiert werden',
14
+ 'fabric.editor.headingLink.descOrderLabel': 'Sortierung löschen',
15
+ 'fabric.editor.headingLink.descSortingLabel': 'absteigend',
17
16
  'fabric.editor.headingLink.failedToCopy': 'Kopieren ist fehlgeschlagen',
17
+ 'fabric.editor.headingLink.invalidLabel': '⚠️ Tabellen mit zusammengeführten Zellen können nicht sortiert werden.',
18
18
  'fabric.editor.headingLink.noOrderLabel': 'Spalte von A nach Z sortieren',
19
- 'fabric.editor.headingLink.noneSortingLabel': 'absteigend'
19
+ 'fabric.editor.headingLink.noneSortingLabel': 'Keine'
20
20
  };
@@ -6,15 +6,15 @@
6
6
  */
7
7
  //
8
8
  export default {
9
- 'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Copied!',
10
- 'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Copy',
11
9
  'fabric.editor.headingLink.ascOrderLabel': 'Sort column Z to A',
12
10
  'fabric.editor.headingLink.ascSortingLabel': 'ascending',
13
11
  'fabric.editor.headingLink.copied': 'Copied!',
14
12
  'fabric.editor.headingLink.copyAnchorLink': 'Copy link to heading',
15
13
  'fabric.editor.headingLink.copyAriaLabel': 'Copy',
16
- 'fabric.editor.headingLink.descOrderLabel': "⚠️ You can't sort a table with merged cell",
14
+ 'fabric.editor.headingLink.descOrderLabel': 'Clear sorting',
15
+ 'fabric.editor.headingLink.descSortingLabel': 'descending',
17
16
  'fabric.editor.headingLink.failedToCopy': 'Copy failed',
17
+ 'fabric.editor.headingLink.invalidLabel': "⚠️ You can't sort a table with merged cells",
18
18
  'fabric.editor.headingLink.noOrderLabel': 'Sort column A to Z',
19
- 'fabric.editor.headingLink.noneSortingLabel': 'descending'
19
+ 'fabric.editor.headingLink.noneSortingLabel': 'none'
20
20
  };
@@ -6,15 +6,15 @@
6
6
  */
7
7
  //English (United Kingdom)
8
8
  export default {
9
- 'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Copied!',
10
- 'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Copy',
11
9
  'fabric.editor.headingLink.ascOrderLabel': 'Sort column Z to A',
12
10
  'fabric.editor.headingLink.ascSortingLabel': 'ascending',
13
11
  'fabric.editor.headingLink.copied': 'Copied!',
14
12
  'fabric.editor.headingLink.copyAnchorLink': 'Copy link to heading',
15
13
  'fabric.editor.headingLink.copyAriaLabel': 'Copy',
16
- 'fabric.editor.headingLink.descOrderLabel': "⚠️ You can't sort a table with merged cell",
14
+ 'fabric.editor.headingLink.descOrderLabel': 'Clear sorting',
15
+ 'fabric.editor.headingLink.descSortingLabel': 'descending',
17
16
  'fabric.editor.headingLink.failedToCopy': 'Copy failed',
17
+ 'fabric.editor.headingLink.invalidLabel': "⚠️ You can't sort a table with merged cells",
18
18
  'fabric.editor.headingLink.noOrderLabel': 'Sort column A to Z',
19
- 'fabric.editor.headingLink.noneSortingLabel': 'descending'
19
+ 'fabric.editor.headingLink.noneSortingLabel': 'none'
20
20
  };
@@ -6,15 +6,15 @@
6
6
  */
7
7
  //Spanish (International)
8
8
  export default {
9
- 'fabric.editor.codeBlockCopyButton.copiedToClipboard': '¡Copiado!',
10
- 'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Copiar',
11
9
  'fabric.editor.headingLink.ascOrderLabel': 'Ordenar columna de la Z a la A',
12
10
  'fabric.editor.headingLink.ascSortingLabel': 'ascendente',
13
11
  'fabric.editor.headingLink.copied': '¡Copiado!',
14
12
  'fabric.editor.headingLink.copyAnchorLink': 'Copiar enlace en el título',
15
13
  'fabric.editor.headingLink.copyAriaLabel': 'Copiar',
16
- 'fabric.editor.headingLink.descOrderLabel': '⚠️ No puedes ordenar una tabla con celdas combinadas',
14
+ 'fabric.editor.headingLink.descOrderLabel': 'Borrar orden',
15
+ 'fabric.editor.headingLink.descSortingLabel': 'descendente',
17
16
  'fabric.editor.headingLink.failedToCopy': 'Copia fallida',
17
+ 'fabric.editor.headingLink.invalidLabel': '⚠️ No puedes ordenar una tabla con celdas combinadas',
18
18
  'fabric.editor.headingLink.noOrderLabel': 'Ordenar columna de la A a la Z',
19
- 'fabric.editor.headingLink.noneSortingLabel': 'descendente'
19
+ 'fabric.editor.headingLink.noneSortingLabel': 'ninguno'
20
20
  };
@@ -6,15 +6,15 @@
6
6
  */
7
7
  //Finnish
8
8
  export default {
9
- 'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Kopioitu!',
10
- 'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Kopioi',
11
9
  'fabric.editor.headingLink.ascOrderLabel': 'Lajittele sarake Z–A',
12
10
  'fabric.editor.headingLink.ascSortingLabel': 'nousevassa järjestyksessä',
13
11
  'fabric.editor.headingLink.copied': 'Kopioitu!',
14
12
  'fabric.editor.headingLink.copyAnchorLink': 'Kopioi otsikkolinkki',
15
13
  'fabric.editor.headingLink.copyAriaLabel': 'Kopioi',
16
- 'fabric.editor.headingLink.descOrderLabel': '⚠️ Et voi lajitella yhdistettyjä soluja sisältävää taulukkoa',
14
+ 'fabric.editor.headingLink.descOrderLabel': 'Tyhjennä lajittelu',
15
+ 'fabric.editor.headingLink.descSortingLabel': 'laskevassa järjestyksessä',
17
16
  'fabric.editor.headingLink.failedToCopy': 'Kopiointi epäonnistui',
17
+ 'fabric.editor.headingLink.invalidLabel': '⚠️ Et voi lajitella yhdistettyjä soluja sisältävää taulukkoa',
18
18
  'fabric.editor.headingLink.noOrderLabel': 'Lajittele sarake A–Z',
19
- 'fabric.editor.headingLink.noneSortingLabel': 'laskevassa järjestyksessä'
19
+ 'fabric.editor.headingLink.noneSortingLabel': 'Ei mitään'
20
20
  };
@@ -6,15 +6,15 @@
6
6
  */
7
7
  //French (France)
8
8
  export default {
9
- 'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Copié !',
10
- 'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Copier',
11
9
  'fabric.editor.headingLink.ascOrderLabel': 'Trier la colonne de Z à A',
12
10
  'fabric.editor.headingLink.ascSortingLabel': 'ordre croissant',
13
11
  'fabric.editor.headingLink.copied': 'Copié !',
14
12
  'fabric.editor.headingLink.copyAnchorLink': "Copier le lien vers l'en-tête",
15
13
  'fabric.editor.headingLink.copyAriaLabel': 'Copier',
16
- 'fabric.editor.headingLink.descOrderLabel': '⚠️ Impossible de trier un tableau comportant des cellules fusionnées',
14
+ 'fabric.editor.headingLink.descOrderLabel': 'Effacer le tri',
15
+ 'fabric.editor.headingLink.descSortingLabel': 'ordre décroissant',
17
16
  'fabric.editor.headingLink.failedToCopy': 'Copie impossible',
17
+ 'fabric.editor.headingLink.invalidLabel': '⚠️ Impossible de trier un tableau comportant des cellules fusionnées',
18
18
  'fabric.editor.headingLink.noOrderLabel': 'Trier la colonne de A à Z',
19
- 'fabric.editor.headingLink.noneSortingLabel': 'ordre décroissant'
19
+ 'fabric.editor.headingLink.noneSortingLabel': 'Néant'
20
20
  };
@@ -6,15 +6,15 @@
6
6
  */
7
7
  //Hungarian
8
8
  export default {
9
- 'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Másolva!',
10
- 'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Másolás',
11
9
  'fabric.editor.headingLink.ascOrderLabel': 'Oszlop rendezése: Z → A',
12
10
  'fabric.editor.headingLink.ascSortingLabel': 'növekvő',
13
11
  'fabric.editor.headingLink.copied': 'Másolva!',
14
12
  'fabric.editor.headingLink.copyAnchorLink': 'Fejléc linkjének másolása',
15
13
  'fabric.editor.headingLink.copyAriaLabel': 'Másolás',
16
- 'fabric.editor.headingLink.descOrderLabel': '⚠️ Az egyesített cellákat tartalmazó táblázatot nem tudod rendezni',
14
+ 'fabric.editor.headingLink.descOrderLabel': 'Rendezés törlése',
15
+ 'fabric.editor.headingLink.descSortingLabel': 'csökkenő',
17
16
  'fabric.editor.headingLink.failedToCopy': 'A másolás nem sikerült',
17
+ 'fabric.editor.headingLink.invalidLabel': '⚠️ Nem rendezhetsz egyesített cellákat tartalmazó táblázatot',
18
18
  'fabric.editor.headingLink.noOrderLabel': 'Oszlop rendezése: A → Z',
19
- 'fabric.editor.headingLink.noneSortingLabel': 'csökkenő'
19
+ 'fabric.editor.headingLink.noneSortingLabel': 'Nincs'
20
20
  };
@@ -6,15 +6,15 @@
6
6
  */
7
7
  //Italian (Italy)
8
8
  export default {
9
- 'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Copiato.',
10
- 'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Copia',
11
9
  'fabric.editor.headingLink.ascOrderLabel': 'Ordina colonna da Z ad A',
12
10
  'fabric.editor.headingLink.ascSortingLabel': 'crescente',
13
11
  'fabric.editor.headingLink.copied': 'Copiato.',
14
12
  'fabric.editor.headingLink.copyAnchorLink': "Copia link nell'intestazione",
15
13
  'fabric.editor.headingLink.copyAriaLabel': 'Copia',
16
- 'fabric.editor.headingLink.descOrderLabel': '⚠️ Non puoi ordinare una tabella con celle unite',
14
+ 'fabric.editor.headingLink.descOrderLabel': "Cancella l'ordinamento",
15
+ 'fabric.editor.headingLink.descSortingLabel': 'decrescente',
17
16
  'fabric.editor.headingLink.failedToCopy': 'Copia non riuscita',
17
+ 'fabric.editor.headingLink.invalidLabel': '⚠️ Non puoi ordinare una tabella con celle unite',
18
18
  'fabric.editor.headingLink.noOrderLabel': 'Ordina colonna da A a Z',
19
- 'fabric.editor.headingLink.noneSortingLabel': 'decrescente'
19
+ 'fabric.editor.headingLink.noneSortingLabel': 'nessuno'
20
20
  };