@atlaskit/editor-plugin-table 7.4.7 → 7.4.9

package/dist/esm/plugin.js

@@ -9,7 +9,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { browser } from '@atlaskit/editor-common/utils';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
-import { createTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { insertTableWithSize } from './commands/insert';
 import { pluginConfig } from './create-plugin-config';
@@ -34,7 +33,7 @@ import FloatingDeleteButton from './ui/FloatingDeleteButton';
 import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import LayoutButton from './ui/LayoutButton';
-import { isLayoutSupported } from './utils';
+import { createTableWithWidth, isLayoutSupported } from './utils';
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
 };
@@ -59,13 +58,19 @@ var tablesPlugin = function tablesPlugin(_ref) {
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   return {
     name: 'table',
+    // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
+    // to most up to date values - passing to createPluginState will not re-initialise the state
+    getSharedState: function getSharedState() {
+      return {
+        isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
+        wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled)
+      };
+    },
     actions: {
       insertTable: function insertTable(analyticsPayload) {
         return function (state, dispatch) {
           var _api$contentInsertion, _api$contentInsertion2;
-          var node = createTable({
-            schema: state.schema
-          });
+          var node = createTableWithWidth(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags)(state.schema);
           return (_api$contentInsertion = api === null || api === void 0 || (_api$contentInsertion2 = api.contentInsertion) === null || _api$contentInsertion2 === void 0 || (_api$contentInsertion2 = _api$contentInsertion2.actions) === null || _api$contentInsertion2 === void 0 ? void 0 : _api$contentInsertion2.insert({
             state: state,
             dispatch: dispatch,
@@ -79,7 +84,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
     },
     commands: {
-      insertTableWithSize: insertTableWithSize(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
+      insertTableWithSize: insertTableWithSize(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
     },
     nodes: function nodes() {
       var tableNode = options !== null && options !== void 0 && options.tableResizingEnabled ? tableWithCustomWidth : table;
@@ -201,7 +206,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
           var _options$fullWidthEna;
           var dispatchAnalyticsEvent = _ref12.dispatchAnalyticsEvent,
             dispatch = _ref12.dispatch;
-          return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
+          return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
@@ -384,9 +389,10 @@ var tablesPlugin = function tablesPlugin(_ref) {
             return /*#__PURE__*/React.createElement(IconTable, null);
           },
           action: function action(insert, state) {
-            var tr = insert(createTable({
-              schema: state.schema
-            }));
+            var _api$table;
+            // see comment on tablesPlugin.getSharedState on usage
+            var tableState = api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
+            var tr = insert(createTableWithWidth(tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled, options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags)(state.schema));
             editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
               action: ACTION.INSERTED,
               actionSubject: ACTION_SUBJECT.DOCUMENT,

package/dist/esm/pm-plugins/table-width.js

@@ -16,8 +16,9 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { TABLE_MAX_WIDTH } from './table-resizing/utils';
 export var pluginKey = new PluginKey('tableWidthPlugin');
-var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled) {
+var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, getEditorFeatureFlags) {
   return new SafePlugin({
     key: pluginKey,
     state: {
@@ -59,6 +60,7 @@ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullW
           }
         });
       }
+
       // When document first load in Confluence, initially it is an empty document
       // and Collab service triggers a transaction to replace the empty document with the real document that should be rendered.
       // what we need to do is to add width attr to all tables in the real document
@@ -80,11 +82,15 @@ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullW
         });
         return hasStepReplacingEntireDocument;
       });
-      if (!isReplaceDocumentOperation) {
+      var referentialityTr = transactions.find(function (tr) {
+        return tr.getMeta('referentialityTableInserted');
+      });
+      var shouldPatchTable = fullWidthEnabled && getEditorFeatureFlags && getEditorFeatureFlags()['tablePreserveWidth'];
+      if (!isReplaceDocumentOperation && (!shouldPatchTable || !referentialityTr)) {
         return null;
       }
-      var tr = newState.tr;
       var table = newState.schema.nodes.table;
+      var tr = newState.tr;
 
       /**
        * Select table event
@@ -102,40 +108,53 @@ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullW
           }
         });
       }
-      newState.doc.forEach(function (node, offset) {
-        if (node.type === table) {
-          var width = node.attrs.width;
-          var layout = node.attrs.layout;
-          if (!width && layout) {
-            var tableWidthCal;
-            if (fullWidthEnabled) {
-              tableWidthCal = akEditorFullWidthLayoutWidth;
-            } else {
-              switch (layout) {
-                case 'wide':
-                  tableWidthCal = akEditorWideLayoutWidth;
-                  break;
-                case 'full-width':
-                  tableWidthCal = akEditorFullWidthLayoutWidth;
-                  break;
-                // when in fix-width appearance, no need to assign value to table width attr
-                // as when table is created, width attr is null by default, table rendered using layout attr
-                default:
-                  tableWidthCal = akEditorDefaultLayoutWidth;
-                  break;
+      if (isReplaceDocumentOperation) {
+        newState.doc.forEach(function (node, offset) {
+          if (node.type === table) {
+            var width = node.attrs.width;
+            var layout = node.attrs.layout;
+            if (!width && layout) {
+              var tableWidthCal;
+              if (fullWidthEnabled) {
+                tableWidthCal = akEditorFullWidthLayoutWidth;
+              } else {
+                switch (layout) {
+                  case 'wide':
+                    tableWidthCal = akEditorWideLayoutWidth;
+                    break;
+                  case 'full-width':
+                    tableWidthCal = akEditorFullWidthLayoutWidth;
+                    break;
+                  // when in fix-width appearance, no need to assign value to table width attr
+                  // as when table is created, width attr is null by default, table rendered using layout attr
+                  default:
+                    tableWidthCal = akEditorDefaultLayoutWidth;
+                    break;
+                }
+              }
+              var _node$attrs = node.attrs,
+                _width = _node$attrs.width,
+                rest = _objectWithoutProperties(_node$attrs, _excluded);
+              if (tableWidthCal) {
+                tr.step(new SetAttrsStep(offset, _objectSpread({
+                  width: tableWidthCal
+                }, rest)));
               }
-            }
-            var _node$attrs = node.attrs,
-              _width = _node$attrs.width,
-              rest = _objectWithoutProperties(_node$attrs, _excluded);
-            if (tableWidthCal) {
-              tr.step(new SetAttrsStep(offset, _objectSpread({
-                width: tableWidthCal
-              }, rest)));
             }
           }
-        }
-      });
+        });
+      }
+      if (referentialityTr) {
+        referentialityTr.steps.forEach(function (step) {
+          step.getMap().forEach(function (oldStart, oldEnd, newStart, newEnd) {
+            newState.doc.nodesBetween(newStart, newEnd, function (node, pos) {
+              if (node.type === table && node.attrs.width !== TABLE_MAX_WIDTH) {
+                tr.setNodeAttribute(pos, 'width', TABLE_MAX_WIDTH);
+              }
+            });
+          });
+        });
+      }
       return tr;
     }
   });

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

@@ -5,7 +5,7 @@ import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
-import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize } from '../consts';
+import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD, contextualMenuTriggerSize, tablePopupMenuFitHeight } from '../consts';
 import ContextualMenu from './ContextualMenu';
 import { tablePopupStyles } from './styles';
 var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
@@ -42,7 +42,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitHeight: 188,
+    fitHeight: tablePopupMenuFitHeight,
     fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth
     // z-index value below is to ensure that this menu is above other floating menu
     // in table, but below floating dialogs like typeaheads, pickers, etc.

package/dist/esm/ui/FloatingDragMenu/DragMenu.js

@@ -174,7 +174,12 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
     getEditorContainerWidth = _ref.getEditorContainerWidth,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     pluginConfig = _ref.pluginConfig,
-    formatMessage = _ref.intl.formatMessage;
+    formatMessage = _ref.intl.formatMessage,
+    fitHeight = _ref.fitHeight,
+    fitWidth = _ref.fitWidth,
+    mountPoint = _ref.mountPoint,
+    scrollableElement = _ref.scrollableElement,
+    boundariesElement = _ref.boundariesElement;
   var state = editorView.state,
     dispatch = editorView.dispatch;
   var selection = state.selection;
@@ -446,12 +451,17 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
     section: {
       hasSeparator: true
     },
-    target: target,
     items: menuItems,
     onItemActivated: handleMenuItemActivated,
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave,
-    handleClose: closeMenu
+    handleClose: closeMenu,
+    fitHeight: fitHeight,
+    fitWidth: fitWidth,
+    direction: direction,
+    mountPoint: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement
   });
 });
 export default injectIntl(DragMenu);

package/dist/esm/ui/FloatingDragMenu/DropdownMenu.js

@@ -1,25 +1,44 @@
-import React from 'react';
-import { DropList } from '@atlaskit/editor-common/ui';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+import React, { useState } from 'react';
+import { DropList, Popup } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem } from '@atlaskit/editor-common/ui-menu';
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { dragMenuDropdownWidth } from '../consts';
 var DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
 export var DropdownMenu = function DropdownMenu(_ref) {
-  var target = _ref.target,
-    items = _ref.items,
+  var items = _ref.items,
     section = _ref.section,
     disableKeyboardHandling = _ref.disableKeyboardHandling,
     onItemActivated = _ref.onItemActivated,
     handleClose = _ref.handleClose,
     onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave;
+    onMouseLeave = _ref.onMouseLeave,
+    fitWidth = _ref.fitWidth,
+    fitHeight = _ref.fitHeight,
+    direction = _ref.direction,
+    mountPoint = _ref.mountPoint,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement;
+  var _useState = useState(['bottom', 'left']),
+    _useState2 = _slicedToArray(_useState, 2),
+    popupPlacement = _useState2[0],
+    setPopupPlacement = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    targetRefDiv = _useState4[0],
+    setTargetRefDiv = _useState4[1];
+  var handleRef = function handleRef(ref) {
+    setTargetRefDiv(ref);
+  };
   var innerMenu = function innerMenu() {
     return /*#__PURE__*/React.createElement(DropListWithOutsideListeners, {
       isOpen: true,
       shouldFitContainer: true,
-      position: ['bottom', 'left'].join(' '),
+      position: popupPlacement.join(' '),
       handleClickOutside: function handleClickOutside() {
         return handleClose('editor');
       },
@@ -34,7 +53,7 @@ export var DropdownMenu = function DropdownMenu(_ref) {
           e.stopPropagation();
         }
       },
-      targetRef: target
+      targetRef: targetRefDiv
     }, /*#__PURE__*/React.createElement("div", {
       style: {
         height: 0,
@@ -63,7 +82,29 @@ export var DropdownMenu = function DropdownMenu(_ref) {
   if (disableKeyboardHandling) {
     return innerMenu();
   }
-  return /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+
+  // more offsets calculation as offsets depend on the direction and updated placement here
+  var offsetY = direction === 'row' ? popupPlacement[0] === 'bottom' ? -8 : -34 : 0;
+  var offsetX = direction === 'column' ? popupPlacement[1] === 'left' ? 0 : -7 : 0;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "drag-dropdown-menu-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "drag-dropdown-menu-popup-ref",
+    ref: handleRef
+  }), /*#__PURE__*/React.createElement(Popup, {
+    target: targetRefDiv,
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    onPlacementChanged: function onPlacementChanged(placement) {
+      setPopupPlacement(placement);
+    },
+    fitHeight: fitHeight,
+    fitWidth: fitWidth,
+    zIndex: akEditorFloatingPanelZIndex,
+    offset: [offsetX, offsetY],
+    allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
+  }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
     closeOnTab: true,
     type: ArrowKeyNavigationType.MENU,
     onSelection: function onSelection(index) {
@@ -112,5 +153,5 @@ export var DropdownMenu = function DropdownMenu(_ref) {
         });
       }
     }
-  }, innerMenu());
+  }, innerMenu())));
 };

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { dragMenuDropdownWidth } from '../consts';
+import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
 import DragMenu from './DragMenu';
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
   var mountPoint = _ref.mountPoint,
@@ -23,12 +23,10 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   }
   var inStickyMode = stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky;
   var targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
-  var offset = direction === 'row' ? [-9, 6] : [0, -7];
+  var offset = direction === 'row' ? [-9, 0] : [0, -7];
   if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
     return null;
   }
-
-  // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return /*#__PURE__*/React.createElement(Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -36,7 +34,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitWidth: dragMenuDropdownWidth
+    fitWidth: dragMenuDropdownWidth,
+    fitHeight: tablePopupMenuFitHeight
     // z-index value below is to ensure that this menu is above other floating menu
     // in table, but below floating dialogs like typeaheads, pickers, etc.
     // In sticky mode, we want to show the menu above the sticky header
@@ -55,7 +54,12 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    pluginConfig: pluginConfig
+    pluginConfig: pluginConfig,
+    fitWidth: dragMenuDropdownWidth,
+    fitHeight: tablePopupMenuFitHeight,
+    mountPoint: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

package/dist/esm/ui/consts.js

@@ -56,6 +56,7 @@ export var stickyRowOffsetTop = 8;
 export var stickyHeaderBorderBottomWidth = 1;
 export var tableOverflowShadowWidth = 8;
 export var tableOverflowShadowWidthWide = 32;
+export var tablePopupMenuFitHeight = 188;
 export var dropTargetsZIndex = 14;
 export var TABLE_SNAP_GAP = 9;
 export var TABLE_HIGHLIGHT_GAP = 10;

package/dist/esm/utils/create.js

@@ -0,0 +1,21 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { createTable } from '@atlaskit/editor-tables/utils';
+import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
+export var createTableWithWidth = function createTableWithWidth(isFullWidthModeEnabled, getEditorFeatureFlags, createTableProps) {
+  return function (schema) {
+    var _ref = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
+      _ref$tablePreserveWid = _ref.tablePreserveWidth,
+      tablePreserveWidth = _ref$tablePreserveWid === void 0 ? false : _ref$tablePreserveWid;
+    if (tablePreserveWidth && isFullWidthModeEnabled) {
+      return createTable(_objectSpread({
+        schema: schema,
+        tableWidth: TABLE_MAX_WIDTH
+      }, createTableProps));
+    }
+    return createTable(_objectSpread({
+      schema: schema
+    }, createTableProps));
+  };
+};

package/dist/esm/utils/index.js

@@ -8,4 +8,5 @@ export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getR
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';
 export { getMergedCellsPositions } from './table';
 export { updatePluginStateDecorations } from './update-plugin-state-decorations';
-export { hasMergedCellsInColumn, hasMergedCellsInRow, hasMergedCellsInBetween, hasMergedCellsInSelection, findDuplicatePosition, checkEdgeHasMergedCells } from './merged-cells';
+export { hasMergedCellsInColumn, hasMergedCellsInRow, hasMergedCellsInBetween, hasMergedCellsInSelection, findDuplicatePosition, checkEdgeHasMergedCells } from './merged-cells';
+export { createTableWithWidth } from './create';

package/dist/types/commands/insert.d.ts

@@ -1,5 +1,5 @@
 import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import type { Command, EditorCommand, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { Command, EditorCommand, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare function addColumnAt(getEditorContainerWidth: GetEditorContainerWidth): (column: number, allowAddColumnCustomStep: boolean | undefined, view: EditorView | undefined) => (tr: Transaction) => Transaction;
@@ -7,5 +7,5 @@ export declare const addColumnBefore: (getEditorContainerWidth: GetEditorContain
 export declare const addColumnAfter: (getEditorContainerWidth: GetEditorContainerWidth) => Command;
 export declare const insertColumn: (getEditorContainerWidth: GetEditorContainerWidth) => (column: number) => Command;
 export declare const insertRow: (row: number, moveCursorToTheNewRow: boolean) => Command;
-export declare const createTable: () => Command;
-export declare const insertTableWithSize: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;
+export declare const createTable: (isFullWidthModeEnabled?: boolean, getEditorFeatureFlags?: GetEditorFeatureFlags) => Command;
+export declare const insertTableWithSize: (isFullWidthModeEnabled?: boolean, getEditorFeatureFlags?: GetEditorFeatureFlags, editorAnalyticsAPI?: EditorAnalyticsAPI) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;

package/dist/types/plugin.d.ts

@@ -23,6 +23,10 @@ export type TablePlugin = NextEditorPlugin<'table', {
     actions: {
         insertTable: InsertTableAction;
     };
+    sharedState: {
+        isFullWidthModeEnabled: boolean;
+        wasFullWidthModeEnabled: boolean;
+    };
     commands: {
         insertTableWithSize: (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;
     };

package/dist/types/pm-plugins/table-width.d.ts

@@ -6,12 +6,13 @@
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 type TableWidthPluginState = {
     resizing: boolean;
 };
 export declare const pluginKey: PluginKey<TableWidthPluginState>;
-declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean) => SafePlugin<{
+declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, getEditorFeatureFlags?: GetEditorFeatureFlags) => SafePlugin<{
     resizing: boolean;
 }>;
 export { createPlugin };

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

@@ -19,8 +19,13 @@ type DragMenuProps = {
     pluginConfig?: PluginConfig;
     getEditorContainerWidth: GetEditorContainerWidth;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
+    fitWidth?: number;
+    fitHeight?: number;
+    mountPoint?: HTMLElement;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
 };
-export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, }: 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, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<DragMenuProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<DragMenuProps & WrappedComponentProps<"intl">>;
 };

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 type DropdownMenuProps = {
-    target?: HTMLElement;
     items: Array<{
         items: MenuItem[];
     }>;
@@ -25,6 +24,13 @@ type DropdownMenuProps = {
     onMouseLeave: (attrs: {
         item: MenuItem;
     }) => void;
+    fitWidth?: number;
+    fitHeight?: number;
+    direction?: string;
+    offset?: Array<number>;
+    mountPoint?: HTMLElement;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
 };
-export declare const DropdownMenu: ({ target, items, section, disableKeyboardHandling, onItemActivated, handleClose, onMouseEnter, onMouseLeave, }: DropdownMenuProps) => JSX.Element;
+export declare const DropdownMenu: ({ items, section, disableKeyboardHandling, onItemActivated, handleClose, onMouseEnter, onMouseLeave, fitWidth, fitHeight, direction, mountPoint, boundariesElement, scrollableElement, }: DropdownMenuProps) => JSX.Element;
 export {};

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

@@ -47,6 +47,7 @@ export declare const stickyRowOffsetTop = 8;
 export declare const stickyHeaderBorderBottomWidth = 1;
 export declare const tableOverflowShadowWidth = 8;
 export declare const tableOverflowShadowWidthWide = 32;
+export declare const tablePopupMenuFitHeight = 188;
 export declare const dropTargetsZIndex = 14;
 export declare const TABLE_SNAP_GAP = 9;
 export declare const TABLE_HIGHLIGHT_GAP = 10;

package/dist/types/utils/create.d.ts

@@ -0,0 +1,6 @@
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { Schema } from '@atlaskit/editor-prosemirror/model';
+export declare const createTableWithWidth: (isFullWidthModeEnabled?: boolean, getEditorFeatureFlags?: GetEditorFeatureFlags, createTableProps?: {
+    rowsCount?: number;
+    colsCount?: number;
+}) => (schema: Schema) => import("prosemirror-model").Node;

package/dist/types/utils/index.d.ts

@@ -10,3 +10,4 @@ export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';
 export { getMergedCellsPositions } from './table';
 export { updatePluginStateDecorations } from './update-plugin-state-decorations';
 export { hasMergedCellsInColumn, hasMergedCellsInRow, hasMergedCellsInBetween, hasMergedCellsInSelection, findDuplicatePosition, checkEdgeHasMergedCells, } from './merged-cells';
+export { createTableWithWidth } from './create';

package/dist/types-ts4.5/commands/insert.d.ts

@@ -1,5 +1,5 @@
 import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import type { Command, EditorCommand, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { Command, EditorCommand, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export declare function addColumnAt(getEditorContainerWidth: GetEditorContainerWidth): (column: number, allowAddColumnCustomStep: boolean | undefined, view: EditorView | undefined) => (tr: Transaction) => Transaction;
@@ -7,5 +7,5 @@ export declare const addColumnBefore: (getEditorContainerWidth: GetEditorContain
 export declare const addColumnAfter: (getEditorContainerWidth: GetEditorContainerWidth) => Command;
 export declare const insertColumn: (getEditorContainerWidth: GetEditorContainerWidth) => (column: number) => Command;
 export declare const insertRow: (row: number, moveCursorToTheNewRow: boolean) => Command;
-export declare const createTable: () => Command;
-export declare const insertTableWithSize: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;
+export declare const createTable: (isFullWidthModeEnabled?: boolean, getEditorFeatureFlags?: GetEditorFeatureFlags) => Command;
+export declare const insertTableWithSize: (isFullWidthModeEnabled?: boolean, getEditorFeatureFlags?: GetEditorFeatureFlags, editorAnalyticsAPI?: EditorAnalyticsAPI) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;

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

@@ -23,6 +23,10 @@ export type TablePlugin = NextEditorPlugin<'table', {
     actions: {
         insertTable: InsertTableAction;
     };
+    sharedState: {
+        isFullWidthModeEnabled: boolean;
+        wasFullWidthModeEnabled: boolean;
+    };
     commands: {
         insertTableWithSize: (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;
     };

package/dist/types-ts4.5/pm-plugins/table-width.d.ts

@@ -6,12 +6,13 @@
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 type TableWidthPluginState = {
     resizing: boolean;
 };
 export declare const pluginKey: PluginKey<TableWidthPluginState>;
-declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean) => SafePlugin<{
+declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, getEditorFeatureFlags?: GetEditorFeatureFlags) => SafePlugin<{
     resizing: boolean;
 }>;
 export { createPlugin };

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

@@ -19,8 +19,13 @@ type DragMenuProps = {
     pluginConfig?: PluginConfig;
     getEditorContainerWidth: GetEditorContainerWidth;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
+    fitWidth?: number;
+    fitHeight?: number;
+    mountPoint?: HTMLElement;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
 };
-export declare const DragMenu: React.MemoExoticComponent<({ direction, index, target, isOpen, editorView, tableNode, targetCellPosition, getEditorContainerWidth, editorAnalyticsAPI, pluginConfig, intl: { formatMessage }, }: 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, }: DragMenuProps & WrappedComponentProps) => jsx.JSX.Element | null>;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<DragMenuProps & WrappedComponentProps<"intl">>> & {
     WrappedComponent: React.ComponentType<DragMenuProps & WrappedComponentProps<"intl">>;
 };

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 type DropdownMenuProps = {
-    target?: HTMLElement;
     items: Array<{
         items: MenuItem[];
     }>;
@@ -25,6 +24,13 @@ type DropdownMenuProps = {
     onMouseLeave: (attrs: {
         item: MenuItem;
     }) => void;
+    fitWidth?: number;
+    fitHeight?: number;
+    direction?: string;
+    offset?: Array<number>;
+    mountPoint?: HTMLElement;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
 };
-export declare const DropdownMenu: ({ target, items, section, disableKeyboardHandling, onItemActivated, handleClose, onMouseEnter, onMouseLeave, }: DropdownMenuProps) => JSX.Element;
+export declare const DropdownMenu: ({ items, section, disableKeyboardHandling, onItemActivated, handleClose, onMouseEnter, onMouseLeave, fitWidth, fitHeight, direction, mountPoint, boundariesElement, scrollableElement, }: DropdownMenuProps) => JSX.Element;
 export {};

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

@@ -47,6 +47,7 @@ export declare const stickyRowOffsetTop = 8;
 export declare const stickyHeaderBorderBottomWidth = 1;
 export declare const tableOverflowShadowWidth = 8;
 export declare const tableOverflowShadowWidthWide = 32;
+export declare const tablePopupMenuFitHeight = 188;
 export declare const dropTargetsZIndex = 14;
 export declare const TABLE_SNAP_GAP = 9;
 export declare const TABLE_HIGHLIGHT_GAP = 10;