@atlaskit/renderer 102.0.0 → 103.0.1

package/dist/esm/i18n/tr.js

@@ -6,15 +6,15 @@
  */
 //Turkish (Turkey)
 export default {
-  'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Kopyalandı!',
-  'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Kopyala',
   'fabric.editor.headingLink.ascOrderLabel': "Sütunu Z'den A'ya sırala",
   'fabric.editor.headingLink.ascSortingLabel': 'artan',
   'fabric.editor.headingLink.copied': 'Kopyalandı!',
   'fabric.editor.headingLink.copyAnchorLink': 'Başlık bağlantısını kopyala',
   'fabric.editor.headingLink.copyAriaLabel': 'Kopyala',
-  'fabric.editor.headingLink.descOrderLabel': '⚠️ Birleştirilmiş hücre içeren bir tabloyu sıralayamazsınız',
+  'fabric.editor.headingLink.descOrderLabel': 'Sıralamayı temizle',
+  'fabric.editor.headingLink.descSortingLabel': 'azalan',
   'fabric.editor.headingLink.failedToCopy': 'Kopyalama işlemi başarısız oldu',
+  'fabric.editor.headingLink.invalidLabel': '⚠️ Birleştirilmiş hücre içeren bir tabloyu sıralayamazsınız',
   'fabric.editor.headingLink.noOrderLabel': "Sütunu A'dan Z'ye sırala",
-  'fabric.editor.headingLink.noneSortingLabel': 'azalan'
+  'fabric.editor.headingLink.noneSortingLabel': 'yok'
 };

package/dist/esm/i18n/uk.js

@@ -6,15 +6,15 @@
  */
 //Ukrainian (Ukraine)
 export default {
-  'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Скопійовано',
-  'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Скопіювати',
   'fabric.editor.headingLink.ascOrderLabel': 'Сортувати стовпці від Я до А',
   'fabric.editor.headingLink.ascSortingLabel': 'за зростанням',
   'fabric.editor.headingLink.copied': 'Скопійовано',
   'fabric.editor.headingLink.copyAnchorLink': 'Скопіювати посилання на заголовок',
   'fabric.editor.headingLink.copyAriaLabel': 'Копіювати',
-  'fabric.editor.headingLink.descOrderLabel': '⚠️ Не можна сортувати таблицю, у якій є об’єднані клітинки',
+  'fabric.editor.headingLink.descOrderLabel': 'Очистити сортування',
+  'fabric.editor.headingLink.descSortingLabel': 'за спаданням',
   'fabric.editor.headingLink.failedToCopy': 'Не вдалося скопіювати',
+  'fabric.editor.headingLink.invalidLabel': '⚠️ Не можна сортувати таблицю, у якій є об’єднані клітинки',
   'fabric.editor.headingLink.noOrderLabel': 'Сортувати стовпці від А до Я',
-  'fabric.editor.headingLink.noneSortingLabel': 'за спаданням'
+  'fabric.editor.headingLink.noneSortingLabel': 'Немає'
 };

package/dist/esm/i18n/vi.js

@@ -6,15 +6,15 @@
  */
 //Vietnamese (Vietnam)
 export default {
-  'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Đã sao chép!',
-  'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Sao chép',
   'fabric.editor.headingLink.ascOrderLabel': 'Sắp xếp cột theo thứ tự từ Z đến A',
   'fabric.editor.headingLink.ascSortingLabel': 'tăng dần',
   'fabric.editor.headingLink.copied': 'Đã sao chép!',
   'fabric.editor.headingLink.copyAnchorLink': 'Sao chép liên kết vào tiêu đề',
   'fabric.editor.headingLink.copyAriaLabel': 'Sao chép',
-  'fabric.editor.headingLink.descOrderLabel': '⚠️ Bạn không thể sắp xếp bảng có các ô đã hợp nhất',
+  'fabric.editor.headingLink.descOrderLabel': 'Bỏ sắp xếp',
+  'fabric.editor.headingLink.descSortingLabel': 'giảm dần',
   'fabric.editor.headingLink.failedToCopy': 'Sao chép không thành công',
+  'fabric.editor.headingLink.invalidLabel': '⚠️ Bạn không thể sắp xếp bảng có các ô đã hợp nhất',
   'fabric.editor.headingLink.noOrderLabel': 'Sắp xếp cột theo thứ tự từ A đến Z',
-  'fabric.editor.headingLink.noneSortingLabel': 'giảm dần'
+  'fabric.editor.headingLink.noneSortingLabel': 'không có'
 };

package/dist/esm/i18n/zh.js

@@ -6,15 +6,15 @@
  */
 //Chinese (Simplified)
 export default {
-  'fabric.editor.codeBlockCopyButton.copiedToClipboard': '已复制！',
-  'fabric.editor.codeBlockCopyButton.copyToClipboard': '复制',
   'fabric.editor.headingLink.ascOrderLabel': '按照 Z 到 A 进行列排序',
   'fabric.editor.headingLink.ascSortingLabel': '升序',
   'fabric.editor.headingLink.copied': '已复制！',
   'fabric.editor.headingLink.copyAnchorLink': '复制标题链接',
   'fabric.editor.headingLink.copyAriaLabel': '复制',
-  'fabric.editor.headingLink.descOrderLabel': '⚠️ 无法对包含合并单元格的表格进行排序',
+  'fabric.editor.headingLink.descOrderLabel': '清除排序',
+  'fabric.editor.headingLink.descSortingLabel': '降序',
   'fabric.editor.headingLink.failedToCopy': '复制失败',
+  'fabric.editor.headingLink.invalidLabel': '⚠️ 无法对包含合并单元格的表格进行排序',
   'fabric.editor.headingLink.noOrderLabel': '按照 A 到 Z 进行列排序',
-  'fabric.editor.headingLink.noneSortingLabel': '降序'
+  'fabric.editor.headingLink.noneSortingLabel': '无'
 };

package/dist/esm/i18n/zh_TW.js

@@ -6,15 +6,15 @@
  */
 //Chinese (Traditional)
 export default {
-  'fabric.editor.codeBlockCopyButton.copiedToClipboard': '已複製！',
-  'fabric.editor.codeBlockCopyButton.copyToClipboard': '複製',
   'fabric.editor.headingLink.ascOrderLabel': '從 Z 欄排序到 A 欄',
   'fabric.editor.headingLink.ascSortingLabel': '遞增',
   'fabric.editor.headingLink.copied': '已複製！',
   'fabric.editor.headingLink.copyAnchorLink': '複製標題連結',
   'fabric.editor.headingLink.copyAriaLabel': '複製',
-  'fabric.editor.headingLink.descOrderLabel': '⚠️ 您無法排序具有合併儲存格的表格',
+  'fabric.editor.headingLink.descOrderLabel': '清除排序',
+  'fabric.editor.headingLink.descSortingLabel': '遞減',
   'fabric.editor.headingLink.failedToCopy': '複製失敗',
+  'fabric.editor.headingLink.invalidLabel': '⚠️ 您無法排序包含合併儲存格的表格',
   'fabric.editor.headingLink.noOrderLabel': '從 A 欄排序到 Z 欄',
-  'fabric.editor.headingLink.noneSortingLabel': '遞減'
+  'fabric.editor.headingLink.noneSortingLabel': '無'
 };

package/dist/esm/messages.js

@@ -56,7 +56,7 @@ export var sortingIconMessages = defineMessages({
   },
   invalidLabel: {
     id: 'fabric.editor.headingLink.invalidLabel',
-    defaultMessage: "\u26A0\uFE0F  You can't sort a table with merged cell",
+    defaultMessage: "\u26A0\uFE0F  You can't sort a table with merged cells",
     description: 'this sort is invalid for merged cells'
   }
 });

package/dist/esm/react/nodes/panel.js

@@ -1,8 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 
 var _templateObject, _templateObject2;
 
+var _excluded = ["backgroundColor", "hasIcon"];
+
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
@@ -16,24 +19,28 @@ import EmojiItem from './emoji'; // AFP-2532 TODO: Fix automatic suppressions be
 import { themed } from '@atlaskit/theme';
 import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
 
-var PanelStyled = function PanelStyled(props) {
+var PanelStyled = function PanelStyled(_ref) {
+  var backgroundColor = _ref.backgroundColor,
+      hasIcon = _ref.hasIcon,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   var styles = function styles(theme) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &.", " {\n      ", "\n    }\n  "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix({
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &.", " {\n      ", "\n\n      &[data-panel-type=", "] {\n        ", "\n      }\n    }\n  "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix({
       theme: theme
-    }));
+    }), PanelType.CUSTOM, hasIcon ? '' : 'padding: 12px;');
   };
 
-  if (props['data-panel-type'] === PanelType.CUSTOM && props.backgroundColor) {
+  if (props['data-panel-type'] === PanelType.CUSTOM && backgroundColor) {
     styles = function styles(theme) {
       var customStyle = themed({
         dark: getPanelBackgroundDarkModeColors,
-        light: "background-color: ".concat(props.backgroundColor, ";")
+        light: "background-color: ".concat(backgroundColor, ";")
       })({
         theme: theme
       });
-      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        &.", " {\n          ", "\n        }\n\n        &[data-panel-type=", "] {\n          ", ";\n        }\n      "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix({
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        &.", " {\n          ", "\n        }\n\n        &[data-panel-type=", "] {\n          ", ";\n          ", "\n        }\n      "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix({
         theme: theme
-      }), PanelType.CUSTOM, customStyle);
+      }), PanelType.CUSTOM, customStyle, hasIcon ? '' : 'padding: 12px;');
     };
   }
 
@@ -86,9 +93,9 @@ var Panel = function Panel(props) {
     });
   };
 
-  var renderIcon = function renderIcon() {
-    var icon = getIcon();
+  var icon = getIcon();
 
+  var renderIcon = function renderIcon() {
     if (icon) {
       return jsx("div", {
         className: PanelSharedCssClassName.icon
@@ -103,7 +110,8 @@ var Panel = function Panel(props) {
     "data-panel-icon": panelIcon,
     "data-panel-icon-id": panelIconId,
     "data-panel-icon-text": panelIconText,
-    backgroundColor: panelColor
+    backgroundColor: panelColor,
+    hasIcon: Boolean(icon)
   }, renderIcon(), jsx("div", {
     className: PanelSharedCssClassName.content
   }, children));

package/dist/esm/react/nodes/tableCell.js

@@ -152,19 +152,11 @@ export var withSortableColumn = function withSortableColumn(WrapperComponent) {
         if (keys.includes(event.key) && !IgnoreSorting.includes(tagName)) {
           event.preventDefault();
 
-          _this.onClick(event);
+          _this.sort();
         }
       });
 
-      _defineProperty(_assertThisInitialized(_this), "onClick", function (event) {
-        // ignore sorting when specific elements are clicked
-        var _ref2 = event.target,
-            tagName = _ref2.tagName;
-
-        if (IgnoreSorting.includes(tagName)) {
-          return;
-        }
-
+      _defineProperty(_assertThisInitialized(_this), "sort", function () {
         var _this$props2 = _this.props,
             fireAnalyticsEvent = _this$props2.fireAnalyticsEvent,
             onSorting = _this$props2.onSorting,
@@ -217,28 +209,18 @@ export var withSortableColumn = function withSortableColumn(WrapperComponent) {
           return /*#__PURE__*/React.createElement(WrapperComponent, this.props);
         }
 
-        var className = RendererCssClassName.SORTABLE_COLUMN;
-
-        if (!onSorting) {
-          className = "".concat(className, " ").concat(RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED);
-        }
-
         return /*#__PURE__*/React.createElement(WrapperComponent, _extends({}, this.props, {
-          className: className,
+          className: RendererCssClassName.SORTABLE_COLUMN_WRAPPER,
           ariaSort: getSortOrderLabel(intl, sortOrdered)
         }), /*#__PURE__*/React.createElement("div", {
-          className: RendererCssClassName.SORTABLE_COLUMN_BUTTON,
-          role: "button",
-          tabIndex: onSorting ? 0 : -1,
-          onClick: this.onClick,
-          onKeyDown: this.onKeyPress,
-          "aria-disabled": !onSorting
+          className: RendererCssClassName.SORTABLE_COLUMN
         }, children, /*#__PURE__*/React.createElement("figure", {
-          "aria-hidden": true,
-          className: "".concat(RendererCssClassName.SORTABLE_COLUMN_ICON, " ").concat(sortOrderedClassName)
+          className: "".concat(RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, " ").concat(sortOrderedClassName)
         }, /*#__PURE__*/React.createElement(SortingIcon, {
           isSortingAllowed: !!onSorting,
-          sortOrdered: sortOrdered
+          sortOrdered: sortOrdered,
+          onClick: this.sort,
+          onKeyDown: this.onKeyPress
         }))));
       }
     }]);

package/dist/esm/ui/ExtensionRenderer.js

@@ -49,6 +49,8 @@ var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "getNodeRenderer", memoizeOne(getNodeRenderer));
 
     _defineProperty(_assertThisInitialized(_this), "renderExtensionNode", function (extensionProvider) {
+      var _marks$find, _marks$find$attrs;
+
       var _this$props = _this.props,
           extensionHandlers = _this$props.extensionHandlers,
           rendererContext = _this$props.rendererContext,
@@ -58,14 +60,19 @@ var ExtensionRenderer = /*#__PURE__*/function (_React$Component) {
           content = _this$props.content,
           text = _this$props.text,
           type = _this$props.type,
-          localId = _this$props.localId;
+          localId = _this$props.localId,
+          marks = _this$props.marks;
+      var fragmentLocalId = marks === null || marks === void 0 ? void 0 : (_marks$find = marks.find(function (m) {
+        return m.type.name === 'fragment';
+      })) === 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;
       var node = {
         type: type,
         extensionKey: extensionKey,
         extensionType: extensionType,
         parameters: parameters,
         content: content || text,
-        localId: localId
+        localId: localId,
+        fragmentLocalId: fragmentLocalId
       };
       var result = null;
 

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

@@ -50,7 +50,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "102.0.0";
+var packageVersion = "103.0.1";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
 

package/dist/esm/ui/Renderer/style.js

@@ -8,8 +8,9 @@ import { gridSize, fontFamily, fontSize, borderRadius } from '@atlaskit/theme/co
 import * as colors from '@atlaskit/theme/colors';
 import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
 import { token } from '@atlaskit/tokens';
-import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles } from '@atlaskit/editor-common/styles';
+import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles, codeBlockInListSafariFix } from '@atlaskit/editor-common/styles';
 import { shadowClassNames } from '@atlaskit/editor-common/ui';
+import { browser } from '@atlaskit/editor-common/utils';
 import { editorFontSize, blockNodesVerticalMargin, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, gridMediumMaxWidth, akEditorFullWidthLayoutWidth, akEditorStickyHeaderZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { RendererCssClassName } from '../../consts';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
@@ -70,7 +71,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
     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    ");
   }
 
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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  "])), RendererCssClassName.SORTABLE_COLUMN, RendererCssClassName.SORTABLE_COLUMN_BUTTON, tableCellPadding, token('color.border.focused', colors.B300), headingsCss, RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED, RendererCssClassName.SORTABLE_COLUMN_BUTTON, RendererCssClassName.SORTABLE_COLUMN_ICON, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER);
+  return css(_templateObject3 || (_templateObject3 = _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, token('color.border.focused', colors.B300), headingsCss, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, RendererCssClassName.SORTABLE_COLUMN_ICON, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, RendererCssClassName.SORTABLE_COLUMN_ICON, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, RendererCssClassName.SORTABLE_COLUMN_ICON);
 };
 
 var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
@@ -100,7 +101,7 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
     var themeProps = {
       theme: theme
     };
-    return css(_templateObject6 || (_templateObject6 = _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    & 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  "])), editorFontSize(themeProps), themed({
+    return css(_templateObject6 || (_templateObject6 = _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    & 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  "])), editorFontSize(themeProps), themed({
       light: token('color.text', colors.N800),
       dark: token('color.text', '#B8C7E0')
     })(themeProps), RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), token('color.link', colors.B400), token('color.link', colors.B300), token('color.link.pressed', colors.B500), colors.placeholderText(themeProps), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(themeProps), ruleSharedStyles(themeProps), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(themeProps), shadowSharedStyle, dateSharedStyle, textColorStyles, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({
@@ -136,6 +137,6 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
     })(themeProps), themed({
       light: token('color.border', akEditorTableToolbar),
       dark: token('color.border', akEditorTableToolbarDark)
-    })(themeProps), borderRadius(), blockNodesVerticalMargin, getLightWeightCodeBlockStylesForRootRendererStyleSheet(), columnLayoutSharedStyle, gridSize() * 2.5, gridSize() * 4, gridMediumMaxWidth);
+    })(themeProps), borderRadius(), blockNodesVerticalMargin, getLightWeightCodeBlockStylesForRootRendererStyleSheet(), columnLayoutSharedStyle, gridSize() * 2.5, gridSize() * 4, gridMediumMaxWidth, blockNodesVerticalMargin, blockNodesVerticalMargin, browser.safari ? codeBlockInListSafariFix : '');
   };
 };

package/dist/esm/ui/SortingIcon.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
@@ -10,14 +10,9 @@ import { N20, N30 } from '@atlaskit/theme/colors';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { sortingIconMessages } from '../messages';
 import { injectIntl } from 'react-intl-next';
-import { token } from '@atlaskit/tokens'; // We use data url here because of this issue:
-// https://product-fabric.atlassian.net/browse/ED-8001
-// Remove this workaround if Firefox has fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
-// TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4136
-
-export 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>"));
-var TABLE_SORTING_ICON_CLASS = 'table-sorting-icon';
-export var StatusClassNames; // TODO: get design to check border
+import { token } from '@atlaskit/tokens';
+import { RendererCssClassName } from '../consts';
+export var StatusClassNames;
 
 (function (StatusClassNames) {
   StatusClassNames["ASC"] = "sorting-icon-svg__asc";
@@ -26,23 +21,34 @@ export var StatusClassNames; // TODO: get design to check border
   StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
 })(StatusClassNames || (StatusClassNames = {}));
 
-var wrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), token('color.border.inverse', '#fff'), gridSize() / 2, token('color.background.neutral.subtle', N20), token('color.background.neutral.subtle.hovered', N30), StatusClassNames.SORTING_NOT_ALLOWED);
-var tableSortingIconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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);
+var buttonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), token('color.border', '#fff'), gridSize() / 2, token('elevation.surface.overlay', N20), token('elevation.surface.overlay.hovered', N30), token('elevation.surface.overlay.pressed', 'rgba(179, 212, 255, 0.6)'), RendererCssClassName.SORTABLE_COLUMN_ICON);
+var iconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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, RendererCssClassName.SORTABLE_COLUMN_ICON); // The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001
+// 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.
+// For this reason, svg's should be avoided in tables until this issue is fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
+
+var iconStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])), token('color.icon', '#42526E'), token('color.icon', '#42526E'));
+
+var getIconClassName = function getIconClassName(isSortingAllowed, sortOrdered) {
+  var activated = sortOrdered !== SortOrder.NO_ORDER;
+  var activeStatusClass = "".concat(RendererCssClassName.SORTABLE_COLUMN_ICON, "-").concat(activated ? 'active' : 'inactive');
+
+  if (!isSortingAllowed) {
+    return "".concat(StatusClassNames.SORTING_NOT_ALLOWED, " ").concat(activeStatusClass);
+  }
 
-var getClassName = function getClassName(status) {
-  switch (status) {
+  switch (sortOrdered) {
     case SortOrder.ASC:
-      return StatusClassNames.ASC;
+      return "".concat(StatusClassNames.ASC, " ").concat(activeStatusClass);
 
     case SortOrder.DESC:
-      return StatusClassNames.DESC;
+      return "".concat(StatusClassNames.DESC, " ").concat(activeStatusClass);
 
     default:
-      return StatusClassNames.NO_ORDER;
+      return "".concat(StatusClassNames.NO_ORDER, " ").concat(activeStatusClass);
   }
 };
 
-var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, status) {
+var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, sortOrdered) {
   var noOrderLabel = sortingIconMessages.noOrderLabel,
       ascOrderLabel = sortingIconMessages.ascOrderLabel,
       descOrderLabel = sortingIconMessages.descOrderLabel,
@@ -52,7 +58,7 @@ var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, status) {
     return intl.formatMessage(invalidLabel);
   }
 
-  switch (status) {
+  switch (sortOrdered) {
     case SortOrder.NO_ORDER:
       return intl.formatMessage(noOrderLabel);
 
@@ -69,21 +75,43 @@ var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, status) {
 var SortingIcon = function SortingIcon(_ref) {
   var isSortingAllowed = _ref.isSortingAllowed,
       sortOrdered = _ref.sortOrdered,
-      intl = _ref.intl;
-  var activated = sortOrdered !== SortOrder.NO_ORDER;
-  var wrapperClassName = !isSortingAllowed ? StatusClassNames.SORTING_NOT_ALLOWED : '';
+      intl = _ref.intl,
+      onClick = _ref.onClick,
+      onKeyDown = _ref.onKeyDown;
+  var buttonClassName = "".concat(RendererCssClassName.SORTABLE_COLUMN_ICON).concat(isSortingAllowed ? '' : " ".concat(RendererCssClassName.SORTABLE_COLUMN_ICON, "__not-allowed"));
   var content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
+
+  var handleClick = function handleClick() {
+    if (isSortingAllowed) {
+      onClick();
+    }
+  };
+
+  var handleKeyDown = function handleKeyDown(event) {
+    if (isSortingAllowed) {
+      onKeyDown(event);
+    }
+  };
+
   return jsx(Tooltip, {
     delay: 0,
     content: content,
     position: "top"
-  }, jsx("figure", {
-    css: wrapperStyles,
-    className: wrapperClassName
   }, jsx("div", {
-    css: tableSortingIconStyles,
-    className: "".concat(getClassName(sortOrdered), " ").concat(TABLE_SORTING_ICON_CLASS, "-").concat(activated ? 'active' : 'inactive')
-  })));
+    css: buttonStyles,
+    className: buttonClassName,
+    role: "button",
+    tabIndex: isSortingAllowed ? 0 : -1,
+    "aria-label": "sort column",
+    "aria-disabled": !isSortingAllowed,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown
+  }, jsx("div", {
+    css: iconWrapperStyles,
+    className: getIconClassName(isSortingAllowed, sortOrdered)
+  }, jsx("div", {
+    css: iconStyles
+  }))));
 };
 
 export default injectIntl(SortingIcon);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "102.0.0",
+	"version": "103.0.1",
 	"sideEffects": false
 }

package/dist/types/consts.d.ts

@@ -4,9 +4,9 @@ export declare const RendererCssClassName: {
     EXTENSION_CENTER_ALIGN: string;
     EXTENSION_OVERFLOW_CONTAINER: string;
     NUMBER_COLUMN: string;
+    SORTABLE_COLUMN_WRAPPER: string;
     SORTABLE_COLUMN: string;
-    SORTABLE_COLUMN_BUTTON: string;
-    SORTABLE_COLUMN_NOT_ALLOWED: string;
+    SORTABLE_COLUMN_ICON_WRAPPER: string;
     SORTABLE_COLUMN_ICON: string;
     SORTABLE_COLUMN_NO_ORDER: string;
 };

package/dist/types/i18n/cs.d.ts

@@ -1,13 +1,13 @@
 declare const _default: {
-    'fabric.editor.codeBlockCopyButton.copiedToClipboard': string;
-    'fabric.editor.codeBlockCopyButton.copyToClipboard': string;
     'fabric.editor.headingLink.ascOrderLabel': string;
     'fabric.editor.headingLink.ascSortingLabel': string;
     'fabric.editor.headingLink.copied': string;
     'fabric.editor.headingLink.copyAnchorLink': string;
     'fabric.editor.headingLink.copyAriaLabel': string;
     'fabric.editor.headingLink.descOrderLabel': string;
+    'fabric.editor.headingLink.descSortingLabel': string;
     'fabric.editor.headingLink.failedToCopy': string;
+    'fabric.editor.headingLink.invalidLabel': string;
     'fabric.editor.headingLink.noOrderLabel': string;
     'fabric.editor.headingLink.noneSortingLabel': string;
 };

package/dist/types/i18n/da.d.ts

@@ -1,13 +1,13 @@
 declare const _default: {
-    'fabric.editor.codeBlockCopyButton.copiedToClipboard': string;
-    'fabric.editor.codeBlockCopyButton.copyToClipboard': string;
     'fabric.editor.headingLink.ascOrderLabel': string;
     'fabric.editor.headingLink.ascSortingLabel': string;
     'fabric.editor.headingLink.copied': string;
     'fabric.editor.headingLink.copyAnchorLink': string;
     'fabric.editor.headingLink.copyAriaLabel': string;
     'fabric.editor.headingLink.descOrderLabel': string;
+    'fabric.editor.headingLink.descSortingLabel': string;
     'fabric.editor.headingLink.failedToCopy': string;
+    'fabric.editor.headingLink.invalidLabel': string;
     'fabric.editor.headingLink.noOrderLabel': string;
     'fabric.editor.headingLink.noneSortingLabel': string;
 };

package/dist/types/i18n/de.d.ts

@@ -1,13 +1,13 @@
 declare const _default: {
-    'fabric.editor.codeBlockCopyButton.copiedToClipboard': string;
-    'fabric.editor.codeBlockCopyButton.copyToClipboard': string;
     'fabric.editor.headingLink.ascOrderLabel': string;
     'fabric.editor.headingLink.ascSortingLabel': string;
     'fabric.editor.headingLink.copied': string;
     'fabric.editor.headingLink.copyAnchorLink': string;
     'fabric.editor.headingLink.copyAriaLabel': string;
     'fabric.editor.headingLink.descOrderLabel': string;
+    'fabric.editor.headingLink.descSortingLabel': string;
     'fabric.editor.headingLink.failedToCopy': string;
+    'fabric.editor.headingLink.invalidLabel': string;
     'fabric.editor.headingLink.noOrderLabel': string;
     'fabric.editor.headingLink.noneSortingLabel': string;
 };

package/dist/types/i18n/en.d.ts

@@ -1,13 +1,13 @@
 declare const _default: {
-    'fabric.editor.codeBlockCopyButton.copiedToClipboard': string;
-    'fabric.editor.codeBlockCopyButton.copyToClipboard': string;
     'fabric.editor.headingLink.ascOrderLabel': string;
     'fabric.editor.headingLink.ascSortingLabel': string;
     'fabric.editor.headingLink.copied': string;
     'fabric.editor.headingLink.copyAnchorLink': string;
     'fabric.editor.headingLink.copyAriaLabel': string;
     'fabric.editor.headingLink.descOrderLabel': string;
+    'fabric.editor.headingLink.descSortingLabel': string;
     'fabric.editor.headingLink.failedToCopy': string;
+    'fabric.editor.headingLink.invalidLabel': string;
     'fabric.editor.headingLink.noOrderLabel': string;
     'fabric.editor.headingLink.noneSortingLabel': string;
 };

package/dist/types/i18n/en_GB.d.ts

@@ -1,13 +1,13 @@
 declare const _default: {
-    'fabric.editor.codeBlockCopyButton.copiedToClipboard': string;
-    'fabric.editor.codeBlockCopyButton.copyToClipboard': string;
     'fabric.editor.headingLink.ascOrderLabel': string;
     'fabric.editor.headingLink.ascSortingLabel': string;
     'fabric.editor.headingLink.copied': string;
     'fabric.editor.headingLink.copyAnchorLink': string;
     'fabric.editor.headingLink.copyAriaLabel': string;
     'fabric.editor.headingLink.descOrderLabel': string;
+    'fabric.editor.headingLink.descSortingLabel': string;
     'fabric.editor.headingLink.failedToCopy': string;
+    'fabric.editor.headingLink.invalidLabel': string;
     'fabric.editor.headingLink.noOrderLabel': string;
     'fabric.editor.headingLink.noneSortingLabel': string;
 };

package/dist/types/i18n/es.d.ts

@@ -1,13 +1,13 @@
 declare const _default: {
-    'fabric.editor.codeBlockCopyButton.copiedToClipboard': string;
-    'fabric.editor.codeBlockCopyButton.copyToClipboard': string;
     'fabric.editor.headingLink.ascOrderLabel': string;
     'fabric.editor.headingLink.ascSortingLabel': string;
     'fabric.editor.headingLink.copied': string;
     'fabric.editor.headingLink.copyAnchorLink': string;
     'fabric.editor.headingLink.copyAriaLabel': string;
     'fabric.editor.headingLink.descOrderLabel': string;
+    'fabric.editor.headingLink.descSortingLabel': string;
     'fabric.editor.headingLink.failedToCopy': string;
+    'fabric.editor.headingLink.invalidLabel': string;
     'fabric.editor.headingLink.noOrderLabel': string;
     'fabric.editor.headingLink.noneSortingLabel': string;
 };