@atlaskit/editor-plugin-table 7.17.0 → 7.17.2

package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js

@@ -192,9 +192,11 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     className: ClassName.DRAG_ROW_CONTROLS,
     style: {
       gridTemplateRows: heights,
-      gridTemplateColumns: isDragging ? "".concat(dropTargetExtendedWidth, "px 14px ").concat(tableWidth, "px") : '0px 14px 0px',
+      gridTemplateColumns: isDragging ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      "".concat(dropTargetExtendedWidth, "px 14px ").concat(tableWidth, "px") : '0px 14px 0px',
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-      left: isDragging ? "-".concat(dropTargetExtendedWidth + 2, "px") : "var(--ds-space-negative-025, -2px)"
+      left: isDragging ? // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      "-".concat(dropTargetExtendedWidth + 2, "px") : "var(--ds-space-negative-025, -2px)"
     },
     onMouseMove: handleMouseMove,
     contentEditable: false

package/dist/esm/ui/common-styles.js

@@ -76,6 +76,8 @@ export var tableStyles = function tableStyles(props) {
   return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t}\n\n\t.ProseMirror.", " {\n\t\t.", " {\n\t\t\toverflow-x: auto;\n\t\t\t", ";\n\t\t}\n\t}\n\n\t.ProseMirror.", " {\n\t\tcursor: col-resize;\n\t}\n\n\t", "\n"])), baseTableStyles(props), ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR, shadowSentinelStyles);
 };
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var tableFullPageEditorStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\t// 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n\t\tmargin-right: -1px;\n\t\twidth: 100%;\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER);
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var tableCommentEditorStyles = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " > table {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t\t", ";\n\t}\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);

package/dist/esm/ui/consts.js

@@ -67,6 +67,9 @@ export var STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
 // table margins and padding. For example a guideline at 1800px and the view at 1860px wide, means the guidelines is visible
 // BUT it cannot be snapped to during resize due to padding being applied to the resizer wrapper. This accommodates that difference.
 export var TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
+export var TABLE_DRAG_MENU_SORT_GROUP_HEIGHT = 92;
+export var TABLE_DRAG_MENU_PADDING_TOP = 4;
+export var TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT = 6;
 export var dragMenuDropdownWidth = 250;
 export var dragTableInsertColumnButtonSize = 16;
 export var dropTargetExtendedWidth = 150;

package/dist/esm/ui/ui-styles.js

@@ -12,9 +12,12 @@ var InsertLine = function InsertLine(cssString) {
 };
 var Marker = function Marker() {
   return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     backgroundColor: tableBorderColor,
     position: 'absolute',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     height: "".concat(lineMarkerSize, "px"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     width: "".concat(lineMarkerSize, "px"),
     borderRadius: '50%',
     pointerEvents: 'none'
@@ -54,10 +57,22 @@ export var dragCornerControlButton = function dragCornerControlButton() {
   return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t.", " {\n\t\twidth: 15px;\n\t\theight: 15px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\ttop: -17px;\n\t\tleft: -5px;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tpadding: 0;\n\t\toutline: none;\n\t\tz-index: ", ";\n\n\t\t&.active .", " {\n\t\t\tbackground-color: ", ";\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\tborder-width: 2px;\n\t\t\tborder-radius: 4px;\n\n\t\t\ttop: 3px;\n\t\t\tleft: 2px;\n\t\t}\n\n\t\t&:hover {\n\t\t\tcursor: pointer;\n\n\t\t\t.", " {\n\t\t\t\twidth: 10px;\n\t\t\t\theight: 10px;\n\t\t\t\tborder-radius: 4px;\n\t\t\t\ttop: 3px;\n\t\t\t\tleft: 2px;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbackground-color: ", ";\n\t\tborder-radius: 2px;\n\t\twidth: 5px;\n\t\theight: 5px;\n\t\tposition: relative;\n\t}\n"])), ClassName.DRAG_CORNER_BUTTON, akEditorUnitZIndex * 99, ClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-selected, #0C66E4)", ClassName.DRAG_CORNER_BUTTON_INNER, ClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-inverse, #FFF)", "var(--ds-background-accent-gray-subtler, #DCDFE4)");
 };
 export var insertColumnButtonWrapper = function insertColumnButtonWrapper() {
-  return css(InsertButton(), InsertButtonHover(), InsertLine("\n    width: 2px;\n    left: 9px;\n  "));
+  return css(
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  InsertButton(),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  InsertButtonHover(),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  InsertLine("\n    width: 2px;\n    left: 9px;\n  "));
 };
 export var insertRowButtonWrapper = function insertRowButtonWrapper() {
-  return css(InsertButton(), InsertButtonHover(), InsertLine("\n    height: 2px;\n    top: -11px;\n    left: ".concat(tableInsertColumnButtonSize - 1, "px;\n  ")));
+  return css(
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  InsertButton(),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  InsertButtonHover(),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  InsertLine("\n    height: 2px;\n    top: -11px;\n// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766\n    left: ".concat(tableInsertColumnButtonSize - 1, "px;\n  ")));
 };
 export var columnControlsLineMarker = function columnControlsLineMarker() {
   return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t.", ".", " table tr:first-of-type td,\n\t.", ".", " table tr:first-of-type th {\n\t\tposition: relative;\n\t}\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS);
@@ -75,20 +90,27 @@ var overflowShadowWidhoutDnD = function overflowShadowWidhoutDnD(isDragAndDropEn
 };
 var columnHeaderButton = function columnHeaderButton(cssString) {
   return css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     background: tableHeaderCellBackgroundColor,
     display: 'block',
     boxSizing: 'border-box',
     padding: 0,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     ':focus': {
       outline: 'none'
     }
-  }, cssString);
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  cssString);
 };
 var columnHeaderButtonSelected = function columnHeaderButtonSelected() {
   return css({
     color: "var(--ds-text-inverse, ".concat(N0, ")"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     backgroundColor: tableToolbarSelectedColor,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     borderColor: tableBorderSelectedColor,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     zIndex: columnControlsSelectedZIndex
   });
 };
@@ -110,6 +132,8 @@ export var hoveredDeleteButton = function hoveredDeleteButton() {
 export var hoveredCell = function hoveredCell() {
   return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tposition: relative;\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t}\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL, tableBorderSelectedColor, ClassName.HOVERED_CELL, ClassName.HOVERED_NO_HIGHLIGHT, tableBorderColor);
 };
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var hoveredWarningCell = css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\ttd.", " {\n\t\t\tbackground-color: ", " !important; // We need to override the background-color added to the cell\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t}\n"])), ClassName.IS_RESIZING, ClassName.TABLE_CONTAINER, ClassName.HOVERED_DELETE_BUTTON, ClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(Y50, ")"), "var(--ds-border-warning, ".concat(Y200, ")"));
 
 // Explicit pixel values required here to ensure correct positioning and sizes of column resize handle
@@ -128,22 +152,30 @@ export var resizeHandle = function resizeHandle(isDragAndDropEnabled) {
 var tableCellColumnInsertLineStyles = css({
   content: "' '",
   position: 'absolute',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: "calc(100% + ".concat(tableCellBorderWidth * 2, "px)"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: "".concat(insertLineWidth, "px"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   zIndex: columnControlsZIndex * 2
 });
 var tableCellRowInsertLineStyles = css({
   content: "' '",
   position: 'absolute',
   left: "var(--ds-space-negative-025, -2px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: "".concat(insertLineWidth, "px"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: "calc(100% + ".concat(tableCellBorderWidth * 2, "px)"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   zIndex: columnControlsZIndex * 2
 });
 var insertLineActiveColor = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   backgroundColor: tableBorderSelectedColor
 });
 var insertLineInactiveColor = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   backgroundColor: "var(--ds-background-accent-gray-subtler, ".concat(akEditorTableBorder, ")")
 });
 

package/dist/esm/utils/drag-menu.js

@@ -74,6 +74,8 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
   var tableDuplicateCellColouring = arguments.length > 12 && arguments[12] !== undefined ? arguments[12] : false;
   var isTableFixedColumnWidthsOptionEnabled = arguments.length > 13 && arguments[13] !== undefined ? arguments[13] : false;
   var shouldUseIncreasedScalingPercent = arguments.length > 14 && arguments[14] !== undefined ? arguments[14] : false;
+  var tableSortColumnDiscoverability = arguments.length > 15 && arguments[15] !== undefined ? arguments[15] : false;
+  var selection = editorView.state.selection;
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
@@ -95,7 +97,6 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     icon: AddColRightIcon,
     keymap: addColumnAfter
   }];
-  var selection = editorView.state.selection;
   var moveOptions = direction === 'row' ? [{
     label: 'up',
     icon: ArrowUpIcon,
@@ -142,11 +143,26 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     order: SortOrder.DESC,
     icon: HipchatChevronDoubleDownIcon
   }] : [];
-  return [].concat(_toConsumableArray(addOptions.map(function (_ref) {
+  var sortConfigs = _toConsumableArray(sortOptions.map(function (_ref) {
     var label = _ref.label,
-      offset = _ref.offset,
-      icon = _ref.icon,
-      keymap = _ref.keymap;
+      order = _ref.order,
+      icon = _ref.icon;
+    return {
+      id: "sort_column_".concat(order),
+      title: "Sort ".concat(label),
+      disabled: hasMergedCellsInTable,
+      icon: icon,
+      onClick: function onClick(state, dispatch) {
+        sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, index !== null && index !== void 0 ? index : 0, order)(state, dispatch);
+        return true;
+      }
+    };
+  }));
+  var restConfigs = [].concat(_toConsumableArray(addOptions.map(function (_ref2) {
+    var label = _ref2.label,
+      offset = _ref2.offset,
+      icon = _ref2.icon,
+      keymap = _ref2.keymap;
     return {
       id: "add_".concat(direction, "_").concat(label),
       title: "Add ".concat(direction, " ").concat(label),
@@ -203,13 +219,13 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     },
     icon: RemoveIcon,
     keymap: direction === 'row' ? tooltip(deleteRow) : tooltip(deleteColumn)
-  }], _toConsumableArray(moveOptions.map(function (_ref2) {
-    var label = _ref2.label,
-      canMove = _ref2.canMove,
-      icon = _ref2.icon,
-      keymap = _ref2.keymap,
-      getOriginIndexes = _ref2.getOriginIndexes,
-      getTargetIndex = _ref2.getTargetIndex;
+  }], _toConsumableArray(moveOptions.map(function (_ref3) {
+    var label = _ref3.label,
+      canMove = _ref3.canMove,
+      icon = _ref3.icon,
+      keymap = _ref3.keymap,
+      getOriginIndexes = _ref3.getOriginIndexes,
+      getTargetIndex = _ref3.getTargetIndex;
     return {
       id: "move_".concat(direction, "_").concat(label),
       title: "Move ".concat(direction, " ").concat(label),
@@ -226,19 +242,8 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
       },
       keymap: keymap && tooltip(keymap)
     };
-  })), _toConsumableArray(sortOptions.map(function (_ref3) {
-    var label = _ref3.label,
-      order = _ref3.order,
-      icon = _ref3.icon;
-    return {
-      id: "sort_column_".concat(order),
-      title: "Sort ".concat(label),
-      disabled: hasMergedCellsInTable,
-      icon: icon,
-      onClick: function onClick(state, dispatch) {
-        sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, index !== null && index !== void 0 ? index : 0, order)(state, dispatch);
-        return true;
-      }
-    };
-  }))).filter(Boolean);
+  })));
+  var allConfigs = _toConsumableArray(restConfigs);
+  tableSortColumnDiscoverability ? allConfigs.unshift.apply(allConfigs, _toConsumableArray(sortConfigs)) : allConfigs.push.apply(allConfigs, _toConsumableArray(sortConfigs));
+  return allConfigs.filter(Boolean);
 };

package/dist/types/ui/FloatingDragMenu/DragMenu.d.ts

@@ -28,8 +28,9 @@ type DragMenuProps = {
     tableDuplicateCellColouring?: boolean;
     shouldUseIncreasedScalingPercent?: boolean;
     isTableFixedColumnWidthsOptionEnabled?: boolean;
+    tableSortColumnDiscoverability?: boolean;
 };
-export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, fitHeight, fitWidth, mountPoint, scrollableElement, boundariesElement, isTableScalingEnabled, tableDuplicateCellColouring, shouldUseIncreasedScalingPercent, isTableFixedColumnWidthsOptionEnabled, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
+export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, fitHeight, fitWidth, mountPoint, scrollableElement, boundariesElement, isTableScalingEnabled, tableDuplicateCellColouring, shouldUseIncreasedScalingPercent, isTableFixedColumnWidthsOptionEnabled, tableSortColumnDiscoverability, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<DragMenuProps & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<DragMenuProps & WrappedComponentProps>;
 };

package/dist/types/ui/FloatingDragMenu/styles.d.ts

@@ -1,4 +1,4 @@
 export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
 export declare const elementBeforeIconStyles: import("@emotion/react").SerializedStyles;
-export declare const dragMenuBackgroundColorStyles: import("@emotion/react").SerializedStyles;
+export declare const dragMenuBackgroundColorStyles: (tableSortColumnDiscoverability?: boolean) => import("@emotion/react").SerializedStyles;
 export declare const toggleStyles: import("@emotion/react").SerializedStyles;

package/dist/types/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -116,6 +116,10 @@ export declare const ColumnControls: ({ editorView, tableActive, tableRef, hover
                         to: number;
                         mark: import("prosemirror-model").Mark;
                     }) => boolean;
+                    addInlineCommentNodeMark: (props: {
+                        pos: number;
+                        mark: import("prosemirror-model").Mark;
+                    }) => boolean;
                     isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                 };
             }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>];
@@ -220,6 +224,10 @@ export declare const ColumnControls: ({ editorView, tableActive, tableRef, hover
                     to: number;
                     mark: import("prosemirror-model").Mark;
                 }) => boolean;
+                addInlineCommentNodeMark: (props: {
+                    pos: number;
+                    mark: import("prosemirror-model").Mark;
+                }) => boolean;
                 isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
             };
         }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>];

package/dist/types/ui/TableFloatingControls/CornerControls/DragCornerControls.d.ts

@@ -97,6 +97,10 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                         to: number;
                         mark: import("prosemirror-model").Mark;
                     }) => boolean;
+                    addInlineCommentNodeMark: (props: {
+                        pos: number;
+                        mark: import("prosemirror-model").Mark;
+                    }) => boolean;
                     isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                 };
             }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>];
@@ -201,6 +205,10 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                     to: number;
                     mark: import("prosemirror-model").Mark;
                 }) => boolean;
+                addInlineCommentNodeMark: (props: {
+                    pos: number;
+                    mark: import("prosemirror-model").Mark;
+                }) => boolean;
                 isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
             };
         }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>];
@@ -316,6 +324,10 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                             to: number;
                             mark: import("prosemirror-model").Mark;
                         }) => boolean;
+                        addInlineCommentNodeMark: (props: {
+                            pos: number;
+                            mark: import("prosemirror-model").Mark;
+                        }) => boolean;
                         isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                     };
                 }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>];
@@ -420,6 +432,10 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                         to: number;
                         mark: import("prosemirror-model").Mark;
                     }) => boolean;
+                    addInlineCommentNodeMark: (props: {
+                        pos: number;
+                        mark: import("prosemirror-model").Mark;
+                    }) => boolean;
                     isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                 };
             }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>];

package/dist/types/ui/TableFloatingControls/index.d.ts

@@ -125,6 +125,10 @@ export declare const TableFloatingControls: ({ editorView, tableRef, tableNode,
                         to: number;
                         mark: import("prosemirror-model").Mark;
                     }) => boolean;
+                    addInlineCommentNodeMark: (props: {
+                        pos: number;
+                        mark: import("prosemirror-model").Mark;
+                    }) => boolean;
                     isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                 };
             }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>];
@@ -229,6 +233,10 @@ export declare const TableFloatingControls: ({ editorView, tableRef, tableNode,
                     to: number;
                     mark: import("prosemirror-model").Mark;
                 }) => boolean;
+                addInlineCommentNodeMark: (props: {
+                    pos: number;
+                    mark: import("prosemirror-model").Mark;
+                }) => boolean;
                 isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
             };
         }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>];

package/dist/types/ui/consts.d.ts

@@ -54,6 +54,9 @@ export declare const TABLE_HIGHLIGHT_GAP = 10;
 export declare const TABLE_HIGHLIGHT_TOLERANCE = 2;
 export declare const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
 export declare const TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
+export declare const TABLE_DRAG_MENU_SORT_GROUP_HEIGHT = 92;
+export declare const TABLE_DRAG_MENU_PADDING_TOP = 4;
+export declare const TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT = 6;
 export declare const dragMenuDropdownWidth = 250;
 export declare const dragTableInsertColumnButtonSize = 16;
 export declare const dropTargetExtendedWidth = 150;

package/dist/types/utils/drag-menu.d.ts

@@ -13,4 +13,4 @@ export interface DragMenuConfig extends DropdownOptionT<Command> {
     icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
     keymap?: string;
 }
-export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => DragMenuConfig[];
+export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, tableSortColumnDiscoverability?: boolean) => DragMenuConfig[];

package/dist/types-ts4.5/ui/FloatingDragMenu/DragMenu.d.ts

@@ -28,8 +28,9 @@ type DragMenuProps = {
     tableDuplicateCellColouring?: boolean;
     shouldUseIncreasedScalingPercent?: boolean;
     isTableFixedColumnWidthsOptionEnabled?: boolean;
+    tableSortColumnDiscoverability?: boolean;
 };
-export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, fitHeight, fitWidth, mountPoint, scrollableElement, boundariesElement, isTableScalingEnabled, tableDuplicateCellColouring, shouldUseIncreasedScalingPercent, isTableFixedColumnWidthsOptionEnabled, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
+export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, fitHeight, fitWidth, mountPoint, scrollableElement, boundariesElement, isTableScalingEnabled, tableDuplicateCellColouring, shouldUseIncreasedScalingPercent, isTableFixedColumnWidthsOptionEnabled, tableSortColumnDiscoverability, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<DragMenuProps & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<DragMenuProps & WrappedComponentProps>;
 };

package/dist/types-ts4.5/ui/FloatingDragMenu/styles.d.ts

@@ -1,4 +1,4 @@
 export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
 export declare const elementBeforeIconStyles: import("@emotion/react").SerializedStyles;
-export declare const dragMenuBackgroundColorStyles: import("@emotion/react").SerializedStyles;
+export declare const dragMenuBackgroundColorStyles: (tableSortColumnDiscoverability?: boolean) => import("@emotion/react").SerializedStyles;
 export declare const toggleStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -140,6 +140,10 @@ export declare const ColumnControls: ({ editorView, tableActive, tableRef, hover
                                     to: number;
                                     mark: import("prosemirror-model").Mark;
                                 }) => boolean;
+                                addInlineCommentNodeMark: (props: {
+                                    pos: number;
+                                    mark: import("prosemirror-model").Mark;
+                                }) => boolean;
                                 isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                             };
                         }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>
@@ -270,6 +274,10 @@ export declare const ColumnControls: ({ editorView, tableActive, tableRef, hover
                             to: number;
                             mark: import("prosemirror-model").Mark;
                         }) => boolean;
+                        addInlineCommentNodeMark: (props: {
+                            pos: number;
+                            mark: import("prosemirror-model").Mark;
+                        }) => boolean;
                         isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                     };
                 }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>

package/dist/types-ts4.5/ui/TableFloatingControls/CornerControls/DragCornerControls.d.ts

@@ -121,6 +121,10 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                                     to: number;
                                     mark: import("prosemirror-model").Mark;
                                 }) => boolean;
+                                addInlineCommentNodeMark: (props: {
+                                    pos: number;
+                                    mark: import("prosemirror-model").Mark;
+                                }) => boolean;
                                 isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                             };
                         }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>
@@ -251,6 +255,10 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                             to: number;
                             mark: import("prosemirror-model").Mark;
                         }) => boolean;
+                        addInlineCommentNodeMark: (props: {
+                            pos: number;
+                            mark: import("prosemirror-model").Mark;
+                        }) => boolean;
                         isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                     };
                 }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>
@@ -393,6 +401,10 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                                         to: number;
                                         mark: import("prosemirror-model").Mark;
                                     }) => boolean;
+                                    addInlineCommentNodeMark: (props: {
+                                        pos: number;
+                                        mark: import("prosemirror-model").Mark;
+                                    }) => boolean;
                                     isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                                 };
                             }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>
@@ -523,6 +535,10 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                                 to: number;
                                 mark: import("prosemirror-model").Mark;
                             }) => boolean;
+                            addInlineCommentNodeMark: (props: {
+                                pos: number;
+                                mark: import("prosemirror-model").Mark;
+                            }) => boolean;
                             isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                         };
                     }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>

package/dist/types-ts4.5/ui/TableFloatingControls/index.d.ts

@@ -149,6 +149,10 @@ export declare const TableFloatingControls: ({ editorView, tableRef, tableNode,
                                     to: number;
                                     mark: import("prosemirror-model").Mark;
                                 }) => boolean;
+                                addInlineCommentNodeMark: (props: {
+                                    pos: number;
+                                    mark: import("prosemirror-model").Mark;
+                                }) => boolean;
                                 isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                             };
                         }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>
@@ -279,6 +283,10 @@ export declare const TableFloatingControls: ({ editorView, tableRef, tableNode,
                             to: number;
                             mark: import("prosemirror-model").Mark;
                         }) => boolean;
+                        addInlineCommentNodeMark: (props: {
+                            pos: number;
+                            mark: import("prosemirror-model").Mark;
+                        }) => boolean;
                         isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                     };
                 }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>

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

@@ -54,6 +54,9 @@ export declare const TABLE_HIGHLIGHT_GAP = 10;
 export declare const TABLE_HIGHLIGHT_TOLERANCE = 2;
 export declare const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
 export declare const TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
+export declare const TABLE_DRAG_MENU_SORT_GROUP_HEIGHT = 92;
+export declare const TABLE_DRAG_MENU_PADDING_TOP = 4;
+export declare const TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT = 6;
 export declare const dragMenuDropdownWidth = 250;
 export declare const dragTableInsertColumnButtonSize = 16;
 export declare const dropTargetExtendedWidth = 150;

package/dist/types-ts4.5/utils/drag-menu.d.ts

@@ -13,4 +13,4 @@ export interface DragMenuConfig extends DropdownOptionT<Command> {
     icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
     keymap?: string;
 }
-export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => DragMenuConfig[];
+export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, tableSortColumnDiscoverability?: boolean) => DragMenuConfig[];