@atlaskit/renderer 109.21.0 → 109.22.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/renderer
 
+## 109.22.0
+
+### Minor Changes
+
+- [#90188](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90188) [`a3520474fc12`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a3520474fc12) - move SortingIcon component from Renderer to Editor Common
+
+### Patch Changes
+
+- Updated dependencies
+
+## 109.21.1
+
+### Patch Changes
+
+- [#94757](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94757) [`22e7c4a1a8f4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/22e7c4a1a8f4) - add ff and fix table width issue in renderer
+- Updated dependencies
+
 ## 109.21.0
 
 ### Minor Changes

package/dist/cjs/consts.js

@@ -14,6 +14,5 @@ var RendererCssClassName = exports.RendererCssClassName = {
   SORTABLE_COLUMN_WRAPPER: "".concat(clPrefix, "tableHeader-sortable-column__wrapper"),
   SORTABLE_COLUMN: "".concat(clPrefix, "tableHeader-sortable-column"),
   SORTABLE_COLUMN_ICON_WRAPPER: "".concat(clPrefix, "tableHeader-sorting-icon__wrapper"),
-  SORTABLE_COLUMN_ICON: "".concat(clPrefix, "tableHeader-sorting-icon"),
   SORTABLE_COLUMN_NO_ORDER: "".concat(clPrefix, "tableHeader-sorting-icon__no-order")
 };

package/dist/cjs/messages.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableCellMessages = exports.sortingIconMessages = exports.sortingAriaLabelMessages = exports.headingAnchorLinkMessages = void 0;
+exports.tableCellMessages = exports.headingAnchorLinkMessages = void 0;
 var _reactIntlNext = require("react-intl-next");
 var headingAnchorLinkMessages = exports.headingAnchorLinkMessages = (0, _reactIntlNext.defineMessages)({
   copyHeadingLinkToClipboard: {
@@ -43,53 +43,4 @@ var tableCellMessages = exports.tableCellMessages = (0, _reactIntlNext.defineMes
     defaultMessage: 'descending',
     description: 'this table column is sorted in descending order'
   }
-});
-var sortingIconMessages = exports.sortingIconMessages = (0, _reactIntlNext.defineMessages)({
-  noOrderLabel: {
-    id: 'fabric.editor.headingLink.noOrderLabel',
-    defaultMessage: 'Sort column A to Z',
-    description: 'Sort the column in ascending order'
-  },
-  ascOrderLabel: {
-    id: 'fabric.editor.headingLink.ascOrderLabel',
-    defaultMessage: 'Sort column Z to A',
-    description: 'Sort the column in descending order'
-  },
-  descOrderLabel: {
-    id: 'fabric.editor.headingLink.descOrderLabel',
-    defaultMessage: 'Clear sorting',
-    description: 'clear the sorting from this column'
-  },
-  invalidLabel: {
-    id: 'fabric.editor.headingLink.invalidLabel',
-    defaultMessage: "\u26A0\uFE0F  You can't sort a table with merged cells",
-    description: 'this sort is invalid for merged cells'
-  }
-});
-var sortingAriaLabelMessages = exports.sortingAriaLabelMessages = (0, _reactIntlNext.defineMessages)({
-  noOrderLabel: {
-    id: 'fabric.editor.tableHeader.sorting.no',
-    defaultMessage: 'No sort applied to the column',
-    description: 'Aria-label for Sort column button when sorting was not applied or the sorting has been cleared'
-  },
-  ascOrderLabel: {
-    id: 'fabric.editor.tableHeader.sorting.asc',
-    defaultMessage: 'Ascending sort applied',
-    description: 'Aria-label for Sort column button when ascending sorting was applied'
-  },
-  descOrderLabel: {
-    id: 'fabric.editor.tableHeader.sorting.desc',
-    defaultMessage: 'Descending sort applied',
-    description: 'Aria-label for Sort column button when descending sorting was applied'
-  },
-  invalidLabel: {
-    id: 'fabric.editor.tableHeader.sorting.invalid',
-    defaultMessage: "You can't sort a table with merged cells",
-    description: 'Aria-label for Sort column button when sorting is not possible'
-  },
-  defaultLabel: {
-    id: 'fabric.editor.tableHeader.sorting.default',
-    defaultMessage: 'Sort the column',
-    description: 'Default aria-label for Sort column button'
-  }
 });

package/dist/cjs/react/nodes/table.js

@@ -20,6 +20,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _types = require("@atlaskit/editor-common/types");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _style = require("../../ui/Renderer/style");
 var _tableCell = require("./tableCell");
 var _SmartCardStorage = require("../../ui/SmartCardStorage");
@@ -440,26 +441,24 @@ var TableWithShadows = (0, _ui.overflowShadow)(TableProcessor, {
   useShadowObserver: true
 });
 var TableWithWidth = function TableWithWidth(props) {
-  return (
-    /*#__PURE__*/
-    // Remember, `width` will be 0 during SSR
-    _react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
-      var _props$columnWidths;
-      var width = _ref2.width;
-      var renderWidth = props.rendererAppearance === 'full-page' ? width - _style.FullPagePadding * 2 : width;
-      var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
-        return total + val;
-      }, 0)) || 0;
-      if (colWidthsSum || isTableResizingEnabled(props.rendererAppearance)) {
-        return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({
-          renderWidth: renderWidth
-        }, props));
-      }
-      // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
-      return /*#__PURE__*/_react.default.createElement(TableProcessor, (0, _extends2.default)({
+  // Remember, `width` will be 0 during SSR
+  return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref2) {
+    var _props$columnWidths;
+    var width = _ref2.width;
+    // we are adding full page padding before but now it cause difference between editor and renderer so we need to remove it, and 1px also for matching exact width.
+    var renderWidth = props.rendererAppearance === 'full-page' ? (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-width-diff-in-renderer_x5s3z') ? width + _style.FullPagePadding - 1 : width - _style.FullPagePadding * 2 : width;
+    var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
+      return total + val;
+    }, 0)) || 0;
+    if (colWidthsSum || isTableResizingEnabled(props.rendererAppearance)) {
+      return /*#__PURE__*/_react.default.createElement(TableWithShadows, (0, _extends2.default)({
         renderWidth: renderWidth
       }, props));
-    })
-  );
+    }
+    // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
+    return /*#__PURE__*/_react.default.createElement(TableProcessor, (0, _extends2.default)({
+      renderWidth: renderWidth
+    }, props));
+  });
 };
 var _default = exports.default = (0, _SmartCardStorage.withSmartCardStorage)(TableWithWidth);

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

@@ -11,7 +11,7 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _tokens = require("@atlaskit/tokens");
 var _types = require("@atlaskit/editor-common/types");
 var _editorPalette = require("@atlaskit/editor-palette");
-var _SortingIcon = _interopRequireDefault(require("../../ui/SortingIcon"));
+var _table = require("@atlaskit/editor-common/table");
 var _events = require("../../analytics/events");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _consts = require("../../consts");
@@ -177,7 +177,7 @@ var withSortableColumn = exports.withSortableColumn = function withSortableColum
       className: _consts.RendererCssClassName.SORTABLE_COLUMN
     }, children, /*#__PURE__*/_react.default.createElement("figure", {
       className: "".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, " ").concat(sortOrderedClassName)
-    }, /*#__PURE__*/_react.default.createElement(_SortingIcon.default, {
+    }, /*#__PURE__*/_react.default.createElement(_table.SortingIcon, {
       isSortingAllowed: !!onSorting,
       sortOrdered: sortOrdered,
       onClick: sort,

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

@@ -55,7 +55,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.21.0";
+var packageVersion = "109.22.0";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -22,6 +22,7 @@ var _consts = require("../../consts");
 var _headingAnchor = require("../../react/nodes/heading-anchor");
 var _lightWeightCodeBlock = require("../../react/nodes/codeBlock/components/lightWeightCodeBlock");
 var _table = require("../../react/nodes/table");
+var _table2 = require("@atlaskit/editor-common/table");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
@@ -83,7 +84,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
   if (allowNestedHeaderLinks) {
     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    ");
   }
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = (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, "var(--ds-border-focused, ".concat(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);
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = (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, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME, _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, _table2.SORTABLE_COLUMN_ICON_CLASSNAME);
 };
 var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
   var appearance = _ref3.appearance;

package/dist/es2019/consts.js

@@ -8,6 +8,5 @@ export const RendererCssClassName = {
   SORTABLE_COLUMN_WRAPPER: `${clPrefix}tableHeader-sortable-column__wrapper`,
   SORTABLE_COLUMN: `${clPrefix}tableHeader-sortable-column`,
   SORTABLE_COLUMN_ICON_WRAPPER: `${clPrefix}tableHeader-sorting-icon__wrapper`,
-  SORTABLE_COLUMN_ICON: `${clPrefix}tableHeader-sorting-icon`,
   SORTABLE_COLUMN_NO_ORDER: `${clPrefix}tableHeader-sorting-icon__no-order`
 };

package/dist/es2019/messages.js

@@ -37,53 +37,4 @@ export const tableCellMessages = defineMessages({
     defaultMessage: 'descending',
     description: 'this table column is sorted in descending order'
   }
-});
-export const sortingIconMessages = defineMessages({
-  noOrderLabel: {
-    id: 'fabric.editor.headingLink.noOrderLabel',
-    defaultMessage: 'Sort column A to Z',
-    description: 'Sort the column in ascending order'
-  },
-  ascOrderLabel: {
-    id: 'fabric.editor.headingLink.ascOrderLabel',
-    defaultMessage: 'Sort column Z to A',
-    description: 'Sort the column in descending order'
-  },
-  descOrderLabel: {
-    id: 'fabric.editor.headingLink.descOrderLabel',
-    defaultMessage: 'Clear sorting',
-    description: 'clear the sorting from this column'
-  },
-  invalidLabel: {
-    id: 'fabric.editor.headingLink.invalidLabel',
-    defaultMessage: `⚠️  You can't sort a table with merged cells`,
-    description: 'this sort is invalid for merged cells'
-  }
-});
-export const sortingAriaLabelMessages = defineMessages({
-  noOrderLabel: {
-    id: 'fabric.editor.tableHeader.sorting.no',
-    defaultMessage: 'No sort applied to the column',
-    description: 'Aria-label for Sort column button when sorting was not applied or the sorting has been cleared'
-  },
-  ascOrderLabel: {
-    id: 'fabric.editor.tableHeader.sorting.asc',
-    defaultMessage: 'Ascending sort applied',
-    description: 'Aria-label for Sort column button when ascending sorting was applied'
-  },
-  descOrderLabel: {
-    id: 'fabric.editor.tableHeader.sorting.desc',
-    defaultMessage: 'Descending sort applied',
-    description: 'Aria-label for Sort column button when descending sorting was applied'
-  },
-  invalidLabel: {
-    id: 'fabric.editor.tableHeader.sorting.invalid',
-    defaultMessage: `You can't sort a table with merged cells`,
-    description: 'Aria-label for Sort column button when sorting is not possible'
-  },
-  defaultLabel: {
-    id: 'fabric.editor.tableHeader.sorting.default',
-    defaultMessage: 'Sort the column',
-    description: 'Default aria-label for Sort column button'
-  }
 });

package/dist/es2019/react/nodes/table.js

@@ -7,6 +7,7 @@ import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMerged
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { TableHeader } from './tableCell';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
@@ -379,23 +380,24 @@ const TableWithShadows = overflowShadow(TableProcessor, {
   overflowSelector: `.${TableSharedCssClassName.TABLE_NODE_WRAPPER}`,
   useShadowObserver: true
 });
-const TableWithWidth = props =>
-/*#__PURE__*/
-// Remember, `width` will be 0 during SSR
-React.createElement(WidthConsumer, null, ({
-  width
-}) => {
-  var _props$columnWidths;
-  const renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
-  const colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce((total, val) => total + val, 0)) || 0;
-  if (colWidthsSum || isTableResizingEnabled(props.rendererAppearance)) {
-    return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
+const TableWithWidth = props => {
+  // Remember, `width` will be 0 during SSR
+  return /*#__PURE__*/React.createElement(WidthConsumer, null, ({
+    width
+  }) => {
+    var _props$columnWidths;
+    // we are adding full page padding before but now it cause difference between editor and renderer so we need to remove it, and 1px also for matching exact width.
+    const renderWidth = props.rendererAppearance === 'full-page' ? getBooleanFF('platform.editor.table-width-diff-in-renderer_x5s3z') ? width + FullPagePadding - 1 : width - FullPagePadding * 2 : width;
+    const colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce((total, val) => total + val, 0)) || 0;
+    if (colWidthsSum || isTableResizingEnabled(props.rendererAppearance)) {
+      return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
+        renderWidth: renderWidth
+      }, props));
+    }
+    // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
+    return /*#__PURE__*/React.createElement(TableProcessor, _extends({
       renderWidth: renderWidth
     }, props));
-  }
-  // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
-  return /*#__PURE__*/React.createElement(TableProcessor, _extends({
-    renderWidth: renderWidth
-  }, props));
-});
+  });
+};
 export default withSmartCardStorage(TableWithWidth);

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

@@ -4,7 +4,7 @@ import { tableBackgroundColorPalette, getDarkModeLCHColor } from '@atlaskit/adf-
 import { useThemeObserver } from '@atlaskit/tokens';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { hexToEditorBackgroundPaletteRawValue } from '@atlaskit/editor-palette';
-import SortingIcon from '../../ui/SortingIcon';
+import { SortingIcon } from '@atlaskit/editor-common/table';
 import { MODE, PLATFORM } from '../../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { RendererCssClassName } from '../../consts';

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

@@ -36,7 +36,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.21.0";
+const packageVersion = "109.22.0";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

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

@@ -8,15 +8,15 @@ import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
 import { getGlobalTheme } from '@atlaskit/tokens';
 import { mediaInlineImageStyles } from '@atlaskit/editor-common/media-inline';
 import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles, codeBlockInListSafariFix, SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { shadowClassNames } from '@atlaskit/editor-common/ui';
+import { shadowClassNames, shadowObserverClassNames } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
 import { editorFontSize, blockNodesVerticalMargin, akEditorTableToolbar, akEditorTableBorder, akEditorTableNumberColumnWidth, gridMediumMaxWidth, akEditorFullWidthLayoutWidth, akEditorStickyHeaderZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
 import { RendererCssClassName } from '../../consts';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
-import { shadowObserverClassNames } from '@atlaskit/editor-common/ui';
 import { getLightWeightCodeBlockStylesForRootRendererStyleSheet } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
 import { isTableResizingEnabled } from '../../react/nodes/table';
+import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
 export const FullPagePadding = 32;
 const tableShadowWidth = 32;
 export const TELEPOINTER_ID = 'ai-streaming-telepointer';
@@ -282,14 +282,14 @@ const tableSortableColumnStyle = ({
 
       .${RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER} {
         margin: 0;
-        .${RendererCssClassName.SORTABLE_COLUMN_ICON} {
+        .${SORTABLE_COLUMN_ICON_CLASSNAME} {
           opacity: 1;
           transition: opacity 0.2s ease-in-out;
         }
       }
 
       .${RendererCssClassName.SORTABLE_COLUMN_NO_ORDER} {
-        .${RendererCssClassName.SORTABLE_COLUMN_ICON} {
+        .${SORTABLE_COLUMN_ICON_CLASSNAME} {
           opacity: 0;
           &:focus {
             opacity: 1;
@@ -299,7 +299,7 @@ const tableSortableColumnStyle = ({
 
       &:hover {
         .${RendererCssClassName.SORTABLE_COLUMN_NO_ORDER} {
-          .${RendererCssClassName.SORTABLE_COLUMN_ICON} {
+          .${SORTABLE_COLUMN_ICON_CLASSNAME} {
             opacity: 1;
           }
         }

package/dist/esm/consts.js

@@ -8,6 +8,5 @@ export var RendererCssClassName = {
   SORTABLE_COLUMN_WRAPPER: "".concat(clPrefix, "tableHeader-sortable-column__wrapper"),
   SORTABLE_COLUMN: "".concat(clPrefix, "tableHeader-sortable-column"),
   SORTABLE_COLUMN_ICON_WRAPPER: "".concat(clPrefix, "tableHeader-sorting-icon__wrapper"),
-  SORTABLE_COLUMN_ICON: "".concat(clPrefix, "tableHeader-sorting-icon"),
   SORTABLE_COLUMN_NO_ORDER: "".concat(clPrefix, "tableHeader-sorting-icon__no-order")
 };

package/dist/esm/messages.js

@@ -37,53 +37,4 @@ export var tableCellMessages = defineMessages({
     defaultMessage: 'descending',
     description: 'this table column is sorted in descending order'
   }
-});
-export var sortingIconMessages = defineMessages({
-  noOrderLabel: {
-    id: 'fabric.editor.headingLink.noOrderLabel',
-    defaultMessage: 'Sort column A to Z',
-    description: 'Sort the column in ascending order'
-  },
-  ascOrderLabel: {
-    id: 'fabric.editor.headingLink.ascOrderLabel',
-    defaultMessage: 'Sort column Z to A',
-    description: 'Sort the column in descending order'
-  },
-  descOrderLabel: {
-    id: 'fabric.editor.headingLink.descOrderLabel',
-    defaultMessage: 'Clear sorting',
-    description: 'clear the sorting from this column'
-  },
-  invalidLabel: {
-    id: 'fabric.editor.headingLink.invalidLabel',
-    defaultMessage: "\u26A0\uFE0F  You can't sort a table with merged cells",
-    description: 'this sort is invalid for merged cells'
-  }
-});
-export var sortingAriaLabelMessages = defineMessages({
-  noOrderLabel: {
-    id: 'fabric.editor.tableHeader.sorting.no',
-    defaultMessage: 'No sort applied to the column',
-    description: 'Aria-label for Sort column button when sorting was not applied or the sorting has been cleared'
-  },
-  ascOrderLabel: {
-    id: 'fabric.editor.tableHeader.sorting.asc',
-    defaultMessage: 'Ascending sort applied',
-    description: 'Aria-label for Sort column button when ascending sorting was applied'
-  },
-  descOrderLabel: {
-    id: 'fabric.editor.tableHeader.sorting.desc',
-    defaultMessage: 'Descending sort applied',
-    description: 'Aria-label for Sort column button when descending sorting was applied'
-  },
-  invalidLabel: {
-    id: 'fabric.editor.tableHeader.sorting.invalid',
-    defaultMessage: "You can't sort a table with merged cells",
-    description: 'Aria-label for Sort column button when sorting is not possible'
-  },
-  defaultLabel: {
-    id: 'fabric.editor.tableHeader.sorting.default',
-    defaultMessage: 'Sort the column',
-    description: 'Default aria-label for Sort column button'
-  }
 });

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

@@ -18,6 +18,7 @@ import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMerged
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { TableHeader } from './tableCell';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
@@ -433,26 +434,24 @@ var TableWithShadows = overflowShadow(TableProcessor, {
   useShadowObserver: true
 });
 var TableWithWidth = function TableWithWidth(props) {
-  return (
-    /*#__PURE__*/
-    // Remember, `width` will be 0 during SSR
-    React.createElement(WidthConsumer, null, function (_ref2) {
-      var _props$columnWidths;
-      var width = _ref2.width;
-      var renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
-      var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
-        return total + val;
-      }, 0)) || 0;
-      if (colWidthsSum || isTableResizingEnabled(props.rendererAppearance)) {
-        return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
-          renderWidth: renderWidth
-        }, props));
-      }
-      // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
-      return /*#__PURE__*/React.createElement(TableProcessor, _extends({
+  // Remember, `width` will be 0 during SSR
+  return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
+    var _props$columnWidths;
+    var width = _ref2.width;
+    // we are adding full page padding before but now it cause difference between editor and renderer so we need to remove it, and 1px also for matching exact width.
+    var renderWidth = props.rendererAppearance === 'full-page' ? getBooleanFF('platform.editor.table-width-diff-in-renderer_x5s3z') ? width + FullPagePadding - 1 : width - FullPagePadding * 2 : width;
+    var colWidthsSum = ((_props$columnWidths = props.columnWidths) === null || _props$columnWidths === void 0 ? void 0 : _props$columnWidths.reduce(function (total, val) {
+      return total + val;
+    }, 0)) || 0;
+    if (colWidthsSum || isTableResizingEnabled(props.rendererAppearance)) {
+      return /*#__PURE__*/React.createElement(TableWithShadows, _extends({
         renderWidth: renderWidth
       }, props));
-    })
-  );
+    }
+    // there should not be a case when colWidthsSum is 0 and table is in overflow state - so no need to render shadows in this case
+    return /*#__PURE__*/React.createElement(TableProcessor, _extends({
+      renderWidth: renderWidth
+    }, props));
+  });
 };
 export default withSmartCardStorage(TableWithWidth);

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

@@ -4,7 +4,7 @@ import { tableBackgroundColorPalette, getDarkModeLCHColor } from '@atlaskit/adf-
 import { useThemeObserver } from '@atlaskit/tokens';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { hexToEditorBackgroundPaletteRawValue } from '@atlaskit/editor-palette';
-import SortingIcon from '../../ui/SortingIcon';
+import { SortingIcon } from '@atlaskit/editor-common/table';
 import { MODE, PLATFORM } from '../../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { RendererCssClassName } from '../../consts';

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

@@ -46,7 +46,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.21.0";
+var packageVersion = "109.22.0";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -10,15 +10,15 @@ import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
 import { getGlobalTheme } from '@atlaskit/tokens';
 import { mediaInlineImageStyles } from '@atlaskit/editor-common/media-inline';
 import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles, codeBlockInListSafariFix, SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { shadowClassNames } from '@atlaskit/editor-common/ui';
+import { shadowClassNames, shadowObserverClassNames } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
 import { editorFontSize, blockNodesVerticalMargin, akEditorTableToolbar, akEditorTableBorder, akEditorTableNumberColumnWidth, gridMediumMaxWidth, akEditorFullWidthLayoutWidth, akEditorStickyHeaderZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
 import { RendererCssClassName } from '../../consts';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
-import { shadowObserverClassNames } from '@atlaskit/editor-common/ui';
 import { getLightWeightCodeBlockStylesForRootRendererStyleSheet } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
 import { isTableResizingEnabled } from '../../react/nodes/table';
+import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
 export var FullPagePadding = 32;
 var tableShadowWidth = 32;
 export var TELEPOINTER_ID = 'ai-streaming-telepointer';
@@ -75,7 +75,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
   if (allowNestedHeaderLinks) {
     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(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    .", " {\n      padding: 0;\n\n      .", " {\n        width: 100%;\n        height: 100%;\n        padding: ", "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ", ";\n          }\n        }\n\n        ", "\n      }\n\n      .", " {\n        margin: 0;\n        .", " {\n          opacity: 1;\n          transition: opacity 0.2s ease-in-out;\n        }\n      }\n\n      .", " {\n        .", " {\n          opacity: 0;\n          &:focus {\n            opacity: 1;\n          }\n        }\n      }\n\n      &:hover {\n        .", " {\n          .", " {\n            opacity: 1;\n          }\n        }\n      }\n    }\n  "])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, RendererCssClassName.SORTABLE_COLUMN_ICON, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, RendererCssClassName.SORTABLE_COLUMN_ICON, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, RendererCssClassName.SORTABLE_COLUMN_ICON);
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    .", " {\n      padding: 0;\n\n      .", " {\n        width: 100%;\n        height: 100%;\n        padding: ", "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + *,\n        > style:first-child + .ProseMirror-gapcursor + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + *,\n        > style:first-child + .ProseMirror-gapcursor + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ", ";\n          }\n        }\n\n        ", "\n      }\n\n      .", " {\n        margin: 0;\n        .", " {\n          opacity: 1;\n          transition: opacity 0.2s ease-in-out;\n        }\n      }\n\n      .", " {\n        .", " {\n          opacity: 0;\n          &:focus {\n            opacity: 1;\n          }\n        }\n      }\n\n      &:hover {\n        .", " {\n          .", " {\n            opacity: 1;\n          }\n        }\n      }\n    }\n  "])), RendererCssClassName.SORTABLE_COLUMN_WRAPPER, RendererCssClassName.SORTABLE_COLUMN, tableCellPadding, "var(--ds-border-focused, ".concat(colors.B300, ")"), headingsCss, RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME, RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, SORTABLE_COLUMN_ICON_CLASSNAME);
 };
 var fullPageStyles = function fullPageStyles(_ref3, _ref4) {
   var appearance = _ref3.appearance;

package/dist/types/consts.d.ts

@@ -7,6 +7,5 @@ export declare const RendererCssClassName: {
     SORTABLE_COLUMN_WRAPPER: string;
     SORTABLE_COLUMN: string;
     SORTABLE_COLUMN_ICON_WRAPPER: string;
-    SORTABLE_COLUMN_ICON: string;
     SORTABLE_COLUMN_NO_ORDER: string;
 };

package/dist/types/messages.d.ts

@@ -37,52 +37,3 @@ export declare const tableCellMessages: {
         description: string;
     };
 };
-export declare const sortingIconMessages: {
-    noOrderLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    ascOrderLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    descOrderLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    invalidLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-};
-export declare const sortingAriaLabelMessages: {
-    noOrderLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    ascOrderLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    descOrderLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    invalidLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    defaultLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-};

package/dist/types-ts4.5/consts.d.ts

@@ -7,6 +7,5 @@ export declare const RendererCssClassName: {
     SORTABLE_COLUMN_WRAPPER: string;
     SORTABLE_COLUMN: string;
     SORTABLE_COLUMN_ICON_WRAPPER: string;
-    SORTABLE_COLUMN_ICON: string;
     SORTABLE_COLUMN_NO_ORDER: string;
 };

package/dist/types-ts4.5/messages.d.ts

@@ -37,52 +37,3 @@ export declare const tableCellMessages: {
         description: string;
     };
 };
-export declare const sortingIconMessages: {
-    noOrderLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    ascOrderLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    descOrderLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    invalidLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-};
-export declare const sortingAriaLabelMessages: {
-    noOrderLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    ascOrderLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    descOrderLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    invalidLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    defaultLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.21.0",
+  "version": "109.22.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/button": "^17.14.0",
     "@atlaskit/code": "^15.1.0",
-    "@atlaskit/editor-common": "^78.34.0",
+    "@atlaskit/editor-common": "^78.36.0",
     "@atlaskit/editor-json-transformer": "^8.11.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-prosemirror": "4.0.0",
@@ -129,6 +129,9 @@
     "platform.editor.inline_extension.extended_lcqdn": {
       "type": "boolean"
     },
+    "platform.editor.table-width-diff-in-renderer_x5s3z": {
+      "type": "boolean"
+    },
     "platform.editor.allow-inline-comments-for-inline-nodes": {
       "type": "boolean"
     },

package/dist/cjs/ui/SortingIcon.js

@@ -1,144 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.StatusClassNames = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _colors = require("@atlaskit/theme/colors");
-var _types = require("@atlaskit/editor-common/types");
-var _messages = require("../messages");
-var _reactIntlNext = require("react-intl-next");
-var _consts = require("../consts");
-var _templateObject, _templateObject2;
-/** @jsx jsx */
-var StatusClassNames = exports.StatusClassNames = /*#__PURE__*/function (StatusClassNames) {
-  StatusClassNames["ASC"] = "sorting-icon-svg__asc";
-  StatusClassNames["DESC"] = "sorting-icon-svg__desc";
-  StatusClassNames["NO_ORDER"] = "sorting-icon-svg__no_order";
-  StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
-  return StatusClassNames;
-}({}); // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-var buttonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: ", ";\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", ";\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"])), "var(--ds-space-075, 6px)", "var(--ds-border, #fff)", "var(--ds-border-radius-100, 4px)", "var(--ds-surface-overlay, ".concat(_colors.N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(_colors.N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-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
-// 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 = (0, _react.css)({
-  height: '100%',
-  width: '2px',
-  borderRadius: '50px',
-  background: "var(--ds-icon, #42526E)",
-  '&::before, &::after': {
-    background: "var(--ds-icon, #42526E)",
-    content: "''",
-    height: '2px',
-    width: '6px',
-    position: 'absolute',
-    borderRadius: '50px'
-  },
-  '&::before': {
-    transform: 'rotate(45deg) translate(3.4px, 8.5px)'
-  },
-  '&::after': {
-    transform: 'rotate(-45deg) translate(-6.3px, 5.7px)'
-  }
-});
-var getIconClassName = function getIconClassName(isSortingAllowed, sortOrdered) {
-  var activated = sortOrdered !== _types.SortOrder.NO_ORDER;
-  var activeStatusClass = "".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON, "-").concat(activated ? 'active' : 'inactive');
-  if (!isSortingAllowed) {
-    return "".concat(StatusClassNames.SORTING_NOT_ALLOWED, " ").concat(activeStatusClass);
-  }
-  switch (sortOrdered) {
-    case _types.SortOrder.ASC:
-      return "".concat(StatusClassNames.ASC, " ").concat(activeStatusClass);
-    case _types.SortOrder.DESC:
-      return "".concat(StatusClassNames.DESC, " ").concat(activeStatusClass);
-    default:
-      return "".concat(StatusClassNames.NO_ORDER, " ").concat(activeStatusClass);
-  }
-};
-var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, sortOrdered) {
-  var noOrderLabel = _messages.sortingIconMessages.noOrderLabel,
-    ascOrderLabel = _messages.sortingIconMessages.ascOrderLabel,
-    descOrderLabel = _messages.sortingIconMessages.descOrderLabel,
-    invalidLabel = _messages.sortingIconMessages.invalidLabel;
-  if (!isSortingAllowed) {
-    return intl.formatMessage(invalidLabel);
-  }
-  switch (sortOrdered) {
-    case _types.SortOrder.NO_ORDER:
-      return intl.formatMessage(noOrderLabel);
-    case _types.SortOrder.ASC:
-      return intl.formatMessage(ascOrderLabel);
-    case _types.SortOrder.DESC:
-      return intl.formatMessage(descOrderLabel);
-  }
-  return '';
-};
-var getAriaLabel = function getAriaLabel(intl, isSortingAllowed, sortOrdered) {
-  var noOrderLabel = _messages.sortingAriaLabelMessages.noOrderLabel,
-    ascOrderLabel = _messages.sortingAriaLabelMessages.ascOrderLabel,
-    descOrderLabel = _messages.sortingAriaLabelMessages.descOrderLabel,
-    invalidLabel = _messages.sortingAriaLabelMessages.invalidLabel,
-    defaultLabel = _messages.sortingAriaLabelMessages.defaultLabel;
-  if (!isSortingAllowed) {
-    return intl.formatMessage(invalidLabel);
-  }
-  switch (sortOrdered) {
-    case _types.SortOrder.NO_ORDER:
-      return intl.formatMessage(noOrderLabel);
-    case _types.SortOrder.ASC:
-      return intl.formatMessage(ascOrderLabel);
-    case _types.SortOrder.DESC:
-      return intl.formatMessage(descOrderLabel);
-  }
-  return intl.formatMessage(defaultLabel);
-};
-var SortingIcon = function SortingIcon(_ref) {
-  var isSortingAllowed = _ref.isSortingAllowed,
-    sortOrdered = _ref.sortOrdered,
-    intl = _ref.intl,
-    onClick = _ref.onClick,
-    onKeyDown = _ref.onKeyDown;
-  var buttonClassName = "".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON).concat(isSortingAllowed ? '' : " ".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON, "__not-allowed"));
-  var content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
-  var ariaLabel = getAriaLabel(intl, isSortingAllowed, sortOrdered);
-  var handleClick = function handleClick() {
-    if (isSortingAllowed) {
-      onClick();
-    }
-  };
-  var handleKeyDown = function handleKeyDown(event) {
-    if (isSortingAllowed) {
-      onKeyDown(event);
-    }
-  };
-  return (0, _react.jsx)(_tooltip.default, {
-    delay: 0,
-    content: content,
-    position: "top"
-  }, (0, _react.jsx)("div", {
-    css: buttonStyles,
-    className: buttonClassName,
-    role: "button",
-    tabIndex: isSortingAllowed ? 0 : -1,
-    "aria-label": ariaLabel,
-    "aria-disabled": !isSortingAllowed,
-    onClick: handleClick,
-    onKeyDown: handleKeyDown
-  }, (0, _react.jsx)("div", {
-    css: iconWrapperStyles,
-    className: getIconClassName(isSortingAllowed, sortOrdered)
-  }, (0, _react.jsx)("div", {
-    css: iconStyles
-  }))));
-};
-var _default = exports.default = (0, _reactIntlNext.injectIntl)(SortingIcon);

package/dist/es2019/ui/SortingIcon.js

@@ -1,183 +0,0 @@
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react';
-import Tooltip from '@atlaskit/tooltip';
-import { N20, N30 } from '@atlaskit/theme/colors';
-import { SortOrder } from '@atlaskit/editor-common/types';
-import { sortingIconMessages, sortingAriaLabelMessages } from '../messages';
-import { injectIntl } from 'react-intl-next';
-import { RendererCssClassName } from '../consts';
-export let StatusClassNames = /*#__PURE__*/function (StatusClassNames) {
-  StatusClassNames["ASC"] = "sorting-icon-svg__asc";
-  StatusClassNames["DESC"] = "sorting-icon-svg__desc";
-  StatusClassNames["NO_ORDER"] = "sorting-icon-svg__no_order";
-  StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
-  return StatusClassNames;
-}({});
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-const buttonStyles = css`
-  position: absolute;
-  display: flex;
-  height: 28px;
-  width: 28px;
-  margin: ${"var(--ds-space-075, 6px)"};
-  right: 0;
-  top: 0;
-  border: 2px solid ${"var(--ds-border, #fff)"};
-  border-radius: ${"var(--ds-border-radius-100, 4px)"};
-  background-color: ${`var(--ds-surface-overlay, ${N20})`};
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-
-  &:hover {
-    background-color: ${`var(--ds-surface-overlay-hovered, ${N30})`};
-  }
-
-  &:active {
-    background-color: ${"var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))"};
-  }
-
-  &.${RendererCssClassName.SORTABLE_COLUMN_ICON}__not-allowed {
-    cursor: not-allowed;
-  }
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-const iconWrapperStyles = css`
-  width: 8px;
-  height: 12px;
-  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);
-  transform-origin: 50% 50%;
-  display: flex;
-  justify-content: center;
-
-  &.${StatusClassNames.DESC} {
-    transform: rotate(-180deg);
-  }
-
-  &.${RendererCssClassName.SORTABLE_COLUMN_ICON}-inactive {
-    opacity: 0.7;
-  }
-`;
-
-// 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
-const iconStyles = css({
-  height: '100%',
-  width: '2px',
-  borderRadius: '50px',
-  background: "var(--ds-icon, #42526E)",
-  '&::before, &::after': {
-    background: "var(--ds-icon, #42526E)",
-    content: "''",
-    height: '2px',
-    width: '6px',
-    position: 'absolute',
-    borderRadius: '50px'
-  },
-  '&::before': {
-    transform: 'rotate(45deg) translate(3.4px, 8.5px)'
-  },
-  '&::after': {
-    transform: 'rotate(-45deg) translate(-6.3px, 5.7px)'
-  }
-});
-const getIconClassName = (isSortingAllowed, sortOrdered) => {
-  const activated = sortOrdered !== SortOrder.NO_ORDER;
-  const activeStatusClass = `${RendererCssClassName.SORTABLE_COLUMN_ICON}-${activated ? 'active' : 'inactive'}`;
-  if (!isSortingAllowed) {
-    return `${StatusClassNames.SORTING_NOT_ALLOWED} ${activeStatusClass}`;
-  }
-  switch (sortOrdered) {
-    case SortOrder.ASC:
-      return `${StatusClassNames.ASC} ${activeStatusClass}`;
-    case SortOrder.DESC:
-      return `${StatusClassNames.DESC} ${activeStatusClass}`;
-    default:
-      return `${StatusClassNames.NO_ORDER} ${activeStatusClass}`;
-  }
-};
-const getTooltipTitle = (intl, isSortingAllowed, sortOrdered) => {
-  const {
-    noOrderLabel,
-    ascOrderLabel,
-    descOrderLabel,
-    invalidLabel
-  } = sortingIconMessages;
-  if (!isSortingAllowed) {
-    return intl.formatMessage(invalidLabel);
-  }
-  switch (sortOrdered) {
-    case SortOrder.NO_ORDER:
-      return intl.formatMessage(noOrderLabel);
-    case SortOrder.ASC:
-      return intl.formatMessage(ascOrderLabel);
-    case SortOrder.DESC:
-      return intl.formatMessage(descOrderLabel);
-  }
-  return '';
-};
-const getAriaLabel = (intl, isSortingAllowed, sortOrdered) => {
-  const {
-    noOrderLabel,
-    ascOrderLabel,
-    descOrderLabel,
-    invalidLabel,
-    defaultLabel
-  } = sortingAriaLabelMessages;
-  if (!isSortingAllowed) {
-    return intl.formatMessage(invalidLabel);
-  }
-  switch (sortOrdered) {
-    case SortOrder.NO_ORDER:
-      return intl.formatMessage(noOrderLabel);
-    case SortOrder.ASC:
-      return intl.formatMessage(ascOrderLabel);
-    case SortOrder.DESC:
-      return intl.formatMessage(descOrderLabel);
-  }
-  return intl.formatMessage(defaultLabel);
-};
-const SortingIcon = ({
-  isSortingAllowed,
-  sortOrdered,
-  intl,
-  onClick,
-  onKeyDown
-}) => {
-  const buttonClassName = `${RendererCssClassName.SORTABLE_COLUMN_ICON}${isSortingAllowed ? '' : ` ${RendererCssClassName.SORTABLE_COLUMN_ICON}__not-allowed`}`;
-  const content = getTooltipTitle(intl, isSortingAllowed, sortOrdered);
-  const ariaLabel = getAriaLabel(intl, isSortingAllowed, sortOrdered);
-  const handleClick = () => {
-    if (isSortingAllowed) {
-      onClick();
-    }
-  };
-  const handleKeyDown = event => {
-    if (isSortingAllowed) {
-      onKeyDown(event);
-    }
-  };
-  return jsx(Tooltip, {
-    delay: 0,
-    content: content,
-    position: "top"
-  }, jsx("div", {
-    css: buttonStyles,
-    className: buttonClassName,
-    role: "button",
-    tabIndex: isSortingAllowed ? 0 : -1,
-    "aria-label": ariaLabel,
-    "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/ui/SortingIcon.js

@@ -1,139 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react';
-import Tooltip from '@atlaskit/tooltip';
-import { N20, N30 } from '@atlaskit/theme/colors';
-import { SortOrder } from '@atlaskit/editor-common/types';
-import { sortingIconMessages, sortingAriaLabelMessages } from '../messages';
-import { injectIntl } from 'react-intl-next';
-import { RendererCssClassName } from '../consts';
-export var StatusClassNames = /*#__PURE__*/function (StatusClassNames) {
-  StatusClassNames["ASC"] = "sorting-icon-svg__asc";
-  StatusClassNames["DESC"] = "sorting-icon-svg__desc";
-  StatusClassNames["NO_ORDER"] = "sorting-icon-svg__no_order";
-  StatusClassNames["SORTING_NOT_ALLOWED"] = "sorting-icon-svg__not-allowed";
-  return StatusClassNames;
-}({});
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-var buttonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: ", ";\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", ";\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"])), "var(--ds-space-075, 6px)", "var(--ds-border, #fff)", "var(--ds-border-radius-100, 4px)", "var(--ds-surface-overlay, ".concat(N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", RendererCssClassName.SORTABLE_COLUMN_ICON);
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-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({
-  height: '100%',
-  width: '2px',
-  borderRadius: '50px',
-  background: "var(--ds-icon, #42526E)",
-  '&::before, &::after': {
-    background: "var(--ds-icon, #42526E)",
-    content: "''",
-    height: '2px',
-    width: '6px',
-    position: 'absolute',
-    borderRadius: '50px'
-  },
-  '&::before': {
-    transform: 'rotate(45deg) translate(3.4px, 8.5px)'
-  },
-  '&::after': {
-    transform: 'rotate(-45deg) translate(-6.3px, 5.7px)'
-  }
-});
-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);
-  }
-  switch (sortOrdered) {
-    case SortOrder.ASC:
-      return "".concat(StatusClassNames.ASC, " ").concat(activeStatusClass);
-    case SortOrder.DESC:
-      return "".concat(StatusClassNames.DESC, " ").concat(activeStatusClass);
-    default:
-      return "".concat(StatusClassNames.NO_ORDER, " ").concat(activeStatusClass);
-  }
-};
-var getTooltipTitle = function getTooltipTitle(intl, isSortingAllowed, sortOrdered) {
-  var noOrderLabel = sortingIconMessages.noOrderLabel,
-    ascOrderLabel = sortingIconMessages.ascOrderLabel,
-    descOrderLabel = sortingIconMessages.descOrderLabel,
-    invalidLabel = sortingIconMessages.invalidLabel;
-  if (!isSortingAllowed) {
-    return intl.formatMessage(invalidLabel);
-  }
-  switch (sortOrdered) {
-    case SortOrder.NO_ORDER:
-      return intl.formatMessage(noOrderLabel);
-    case SortOrder.ASC:
-      return intl.formatMessage(ascOrderLabel);
-    case SortOrder.DESC:
-      return intl.formatMessage(descOrderLabel);
-  }
-  return '';
-};
-var getAriaLabel = function getAriaLabel(intl, isSortingAllowed, sortOrdered) {
-  var noOrderLabel = sortingAriaLabelMessages.noOrderLabel,
-    ascOrderLabel = sortingAriaLabelMessages.ascOrderLabel,
-    descOrderLabel = sortingAriaLabelMessages.descOrderLabel,
-    invalidLabel = sortingAriaLabelMessages.invalidLabel,
-    defaultLabel = sortingAriaLabelMessages.defaultLabel;
-  if (!isSortingAllowed) {
-    return intl.formatMessage(invalidLabel);
-  }
-  switch (sortOrdered) {
-    case SortOrder.NO_ORDER:
-      return intl.formatMessage(noOrderLabel);
-    case SortOrder.ASC:
-      return intl.formatMessage(ascOrderLabel);
-    case SortOrder.DESC:
-      return intl.formatMessage(descOrderLabel);
-  }
-  return intl.formatMessage(defaultLabel);
-};
-var SortingIcon = function SortingIcon(_ref) {
-  var isSortingAllowed = _ref.isSortingAllowed,
-    sortOrdered = _ref.sortOrdered,
-    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 ariaLabel = getAriaLabel(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("div", {
-    css: buttonStyles,
-    className: buttonClassName,
-    role: "button",
-    tabIndex: isSortingAllowed ? 0 : -1,
-    "aria-label": ariaLabel,
-    "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/types/ui/SortingIcon.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="react" />
-import { SortOrder } from '@atlaskit/editor-common/types';
-import type { WrappedComponentProps } from 'react-intl-next';
-export declare enum StatusClassNames {
-    ASC = "sorting-icon-svg__asc",
-    DESC = "sorting-icon-svg__desc",
-    NO_ORDER = "sorting-icon-svg__no_order",
-    SORTING_NOT_ALLOWED = "sorting-icon-svg__not-allowed"
-}
-declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<{
-    isSortingAllowed: boolean;
-    sortOrdered?: SortOrder | undefined;
-    onClick: () => void;
-    onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
-} & WrappedComponentProps>> & {
-    WrappedComponent: import("react").ComponentType<{
-        isSortingAllowed: boolean;
-        sortOrdered?: SortOrder | undefined;
-        onClick: () => void;
-        onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
-    } & WrappedComponentProps>;
-};
-export default _default;

package/dist/types-ts4.5/ui/SortingIcon.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="react" />
-import { SortOrder } from '@atlaskit/editor-common/types';
-import type { WrappedComponentProps } from 'react-intl-next';
-export declare enum StatusClassNames {
-    ASC = "sorting-icon-svg__asc",
-    DESC = "sorting-icon-svg__desc",
-    NO_ORDER = "sorting-icon-svg__no_order",
-    SORTING_NOT_ALLOWED = "sorting-icon-svg__not-allowed"
-}
-declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<{
-    isSortingAllowed: boolean;
-    sortOrdered?: SortOrder | undefined;
-    onClick: () => void;
-    onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
-} & WrappedComponentProps>> & {
-    WrappedComponent: import("react").ComponentType<{
-        isSortingAllowed: boolean;
-        sortOrdered?: SortOrder | undefined;
-        onClick: () => void;
-        onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
-    } & WrappedComponentProps>;
-};
-export default _default;