@atlaskit/editor-plugin-table 13.0.4 → 13.0.6

package/dist/cjs/tablePlugin.js

@@ -11,43 +11,35 @@ var _react = _interopRequireWildcard(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _browser = require("@atlaskit/editor-common/browser");
-var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
-var _getDomRefFromSelection = require("@atlaskit/editor-common/get-dom-ref-from-selection");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _icons = require("@atlaskit/editor-common/icons");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _nesting = require("@atlaskit/editor-common/nesting");
 var _preset = require("@atlaskit/editor-common/preset");
-var _resizer = require("@atlaskit/editor-common/resizer");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _pmPlugins = require("@atlaskit/editor-tables/pm-plugins");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _toDOM = require("./nodeviews/toDOM");
 var _plugin = require("./pm-plugins/analytics/plugin");
-var _pluginKey = require("./pm-plugins/analytics/plugin-key");
 var _insert = require("./pm-plugins/commands/insert");
 var _createPluginConfig = require("./pm-plugins/create-plugin-config");
 var _plugin2 = require("./pm-plugins/decorations/plugin");
 var _plugin3 = require("./pm-plugins/drag-and-drop/plugin");
-var _pluginKey2 = require("./pm-plugins/drag-and-drop/plugin-key");
+var _pluginKey = require("./pm-plugins/drag-and-drop/plugin-key");
 var _keymap = require("./pm-plugins/keymap");
 var _main = require("./pm-plugins/main");
-var _pluginKey3 = require("./pm-plugins/plugin-key");
+var _pluginKey2 = require("./pm-plugins/plugin-key");
 var _safariDeleteCompositionTextIssueWorkaround = require("./pm-plugins/safari-delete-composition-text-issue-workaround");
 var _plugin4 = require("./pm-plugins/sticky-headers/plugin");
-var _pluginKey4 = require("./pm-plugins/sticky-headers/plugin-key");
+var _pluginKey3 = require("./pm-plugins/sticky-headers/plugin-key");
 var _util = require("./pm-plugins/sticky-headers/util");
 var _tableAnalytics = require("./pm-plugins/table-analytics");
 var _tableLocalId = require("./pm-plugins/table-local-id");
 var _plugin5 = require("./pm-plugins/table-resizing/plugin");
 var _pluginFactory = require("./pm-plugins/table-resizing/plugin-factory");
-var _pluginKey5 = require("./pm-plugins/table-resizing/plugin-key");
 var _tableSelectionKeymap = require("./pm-plugins/table-selection-keymap");
 var _tableSizeSelector = require("./pm-plugins/table-size-selector");
 var _tableWidth = require("./pm-plugins/table-width");
@@ -55,48 +47,20 @@ var _tableWidthInCommentFix = require("./pm-plugins/table-width-in-comment-fix")
 var _create = require("./pm-plugins/utils/create");
 var _viewModeSort = require("./pm-plugins/view-mode-sort");
 var _ContentComponent = require("./ui/ContentComponent");
-var _FloatingContextualButton = _interopRequireDefault(require("./ui/FloatingContextualButton"));
-var _FloatingContextualMenu = _interopRequireDefault(require("./ui/FloatingContextualMenu"));
-var _FloatingDeleteButton = _interopRequireDefault(require("./ui/FloatingDeleteButton"));
-var _FloatingDragMenu = _interopRequireDefault(require("./ui/FloatingDragMenu"));
-var _FloatingInsertButton = _interopRequireDefault(require("./ui/FloatingInsertButton"));
-var _FloatingToolbarLabel = require("./ui/FloatingToolbarLabel/FloatingToolbarLabel");
-var _globalStyles = require("./ui/global-styles");
-var _SizeSelector = require("./ui/SizeSelector");
-var _TableFullWidthLabel = require("./ui/TableFullWidthLabel");
 var _toolbar = require("./ui/toolbar");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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) { (0, _defineProperty2.default)(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; } // Ignored via go/ees005
-// eslint-disable-next-line import/no-named-as-default
+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) { (0, _defineProperty2.default)(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; }
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
 };
-var useTableSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['editorViewMode'], function (states) {
-      var _states$editorViewMod;
-      return {
-        mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
-      };
-    }),
-    mode = _useSharedPluginState.mode;
-  return {
-    mode: mode
-  };
-}, function (api) {
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['editorViewMode']),
-    editorViewModeState = _useSharedPluginState2.editorViewModeState;
-  return {
-    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
-  };
-});
 
 /**
  * Table plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
  * from `@atlaskit/editor-core`.
  */
 var tablePlugin = function tablePlugin(_ref) {
-  var _api$analytics, _api$accessibilityUti, _options$getEditorFea, _options$getEditorFea2, _api$analytics2;
+  var _api$analytics, _options$getEditorFea, _options$getEditorFea2, _api$analytics2;
   var options = _ref.config,
     api = _ref.api;
   var editorViewRef = {
@@ -109,7 +73,6 @@ var tablePlugin = function tablePlugin(_ref) {
     };
   };
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
-  var ariaNotifyPlugin = api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify;
   var isTableFixedColumnWidthsOptionEnabled = (options === null || options === void 0 || (_options$getEditorFea = options.getEditorFeatureFlags) === null || _options$getEditorFea === void 0 ? void 0 : _options$getEditorFea.call(options).tableWithFixedColumnWidthsOption) || false;
   var shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && (isTableFixedColumnWidthsOptionEnabled || ( // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
   options === null || options === void 0 ? void 0 : options.isCommentEditor));
@@ -127,12 +90,12 @@ var tablePlugin = function tablePlugin(_ref) {
       }
 
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      var tablePluginState = _pluginKey3.pluginKey.getState(editorState);
+      var tablePluginState = _pluginKey2.pluginKey.getState(editorState);
       var tableResizingPluginState = (0, _pluginFactory.getPluginState)(editorState);
       var tableWidthResizingPluginState = _tableWidth.pluginKey.getState(editorState);
-      var stickyHeadersState = _pluginKey4.pluginKey.getState(editorState);
+      var stickyHeadersState = _pluginKey3.pluginKey.getState(editorState);
       var stickyHeader = stickyHeadersState ? (0, _util.findStickyHeaderForTable)(stickyHeadersState, tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tablePos) : undefined;
-      var dragAndDropState = _pluginKey2.pluginKey.getState(editorState);
+      var dragAndDropState = _pluginKey.pluginKey.getState(editorState);
       var sizeSelectorPluginState = _tableSizeSelector.pluginKey.getState(editorState);
       var sharedStateInternal = {
         isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
@@ -480,178 +443,27 @@ var tablePlugin = function tablePlugin(_ref) {
       return plugins;
     },
     contentComponent: function contentComponent(_ref18) {
-      var _api$featureFlags;
       var editorView = _ref18.editorView,
         popupsMountPoint = _ref18.popupsMountPoint,
         popupsBoundariesElement = _ref18.popupsBoundariesElement,
         popupsScrollableElement = _ref18.popupsScrollableElement,
         dispatchAnalyticsEvent = _ref18.dispatchAnalyticsEvent;
-      if ((0, _expValEquals.expValEquals)('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true)) {
-        return /*#__PURE__*/_react.default.createElement(_ContentComponent.ContentComponent, {
-          api: api,
-          editorView: editorView,
-          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-          options: options,
-          popupsMountPoint: popupsMountPoint,
-          popupsBoundariesElement: popupsBoundariesElement,
-          popupsScrollableElement: popupsScrollableElement,
-          defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
-          defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags,
-          isTableSelectorEnabled: isTableSelectorEnabled
-        });
-      }
-      return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
-        component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
+      return /*#__PURE__*/_react.default.createElement(_ContentComponent.ContentComponent, {
+        api: api,
+        editorView: editorView,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-        fallbackComponent: null
-      }, /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, {
-        featureFlags: api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState(),
-        isDragAndDropEnabledOption: options === null || options === void 0 ? void 0 : options.dragAndDropEnabled,
-        api: api
-      }), /*#__PURE__*/_react.default.createElement(_withPluginState.WithPluginState, {
-        plugins: {
-          tableAnalyticsPluginState: _pluginKey.pluginKey,
-          tablePluginState: _pluginKey3.pluginKey,
-          tableWidthPluginState: _tableWidth.pluginKey,
-          tableResizingPluginState: _pluginKey5.pluginKey,
-          stickyHeadersState: _pluginKey4.pluginKey,
-          dragAndDropState: _pluginKey2.pluginKey,
-          sizeSelectorPluginState: _tableSizeSelector.pluginKey
-        },
-        render: function render(_ref19) {
-          var _sizeSelectorPluginSt, _api$analytics3;
-          var resizingPluginState = _ref19.tableResizingPluginState,
-            stickyHeadersState = _ref19.stickyHeadersState,
-            tablePluginState = _ref19.tablePluginState,
-            tableWidthPluginState = _ref19.tableWidthPluginState,
-            dragAndDropState = _ref19.dragAndDropState,
-            sizeSelectorPluginState = _ref19.sizeSelectorPluginState;
-          // Any changes made inside `<WithPluginState>` need to be reflected in the
-          // `<ContentComponent>` as well.
-          var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
-          var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
-          var resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;
-          var resizingTableRef = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableRef;
-          var isResizing = isColumnResizing || isTableResizing;
-          var widthToWidest = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.widthToWidest;
-          var isSizeSelectorOpen = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.isSelectorOpen;
-          var _ref20 = tablePluginState,
-            tableNode = _ref20.tableNode,
-            tablePos = _ref20.tablePos,
-            targetCellPosition = _ref20.targetCellPosition,
-            isContextualMenuOpen = _ref20.isContextualMenuOpen,
-            tableRef = _ref20.tableRef,
-            pluginConfig = _ref20.pluginConfig,
-            insertColumnButtonIndex = _ref20.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref20.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref20.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref20.isHeaderRowEnabled,
-            isDragAndDropEnabled = _ref20.isDragAndDropEnabled,
-            tableWrapperTarget = _ref20.tableWrapperTarget,
-            isCellMenuOpenByKeyboard = _ref20.isCellMenuOpenByKeyboard;
-          var allowControls = pluginConfig.allowControls;
-          var stickyHeader = stickyHeadersState ? (0, _util.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
-          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
-            isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
-            editorView: editorView,
-            tableNode: tableNode,
-            mountPoint: popupsMountPoint,
-            targetCellPosition: targetCellPosition,
-            scrollableElement: popupsScrollableElement,
-            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-            isContextualMenuOpen: isContextualMenuOpen,
-            stickyHeader: stickyHeader,
-            tableWrapper: tableWrapperTarget,
-            isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
-          }), allowControls && /*#__PURE__*/_react.default.createElement(_FloatingInsertButton.default, {
-            tableNode: tableNode,
-            tableRef: tableRef,
-            insertColumnButtonIndex: insertColumnButtonIndex,
-            insertRowButtonIndex: insertRowButtonIndex,
-            isHeaderColumnEnabled: isHeaderColumnEnabled,
-            isHeaderRowEnabled: isHeaderRowEnabled,
-            isDragAndDropEnabled: isDragAndDropEnabled,
-            isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
-            editorView: editorView,
-            mountPoint: popupsMountPoint,
-            boundariesElement: popupsBoundariesElement,
-            scrollableElement: popupsScrollableElement,
-            hasStickyHeaders: stickyHeader && stickyHeader.sticky,
-            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-            editorAnalyticsAPI: editorAnalyticsAPI,
-            getEditorContainerWidth: defaultGetEditorContainerWidth,
-            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
-            isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
-            api: api,
-            isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
-          }), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/_react.default.createElement(_FloatingContextualMenu.default, {
-            editorView: editorView,
-            mountPoint: popupsMountPoint,
-            boundariesElement: popupsBoundariesElement,
-            targetCellPosition: targetCellPosition,
-            isOpen: Boolean(isContextualMenuOpen) && !isResizing,
-            pluginConfig: pluginConfig,
-            editorAnalyticsAPI: editorAnalyticsAPI,
-            getEditorContainerWidth: defaultGetEditorContainerWidth,
-            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
-            isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
-            isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
-            api: api
-          }), isDragAndDropEnabled && /*#__PURE__*/_react.default.createElement(_FloatingDragMenu.default, {
-            editorView: editorView,
-            mountPoint: popupsMountPoint,
-            boundariesElement: popupsBoundariesElement,
-            tableRef: tableRef,
-            tableNode: tableNode,
-            targetCellPosition: targetCellPosition,
-            direction: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
-            index: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
-            isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing,
-            getEditorContainerWidth: defaultGetEditorContainerWidth,
-            editorAnalyticsAPI: editorAnalyticsAPI,
-            stickyHeaders: stickyHeader,
-            pluginConfig: pluginConfig,
-            isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
-            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
-            ariaNotifyPlugin: ariaNotifyPlugin,
-            api: api,
-            isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
-          }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/_react.default.createElement(_FloatingDeleteButton.default, {
-            editorView: editorView,
-            selection: editorView.state.selection,
-            tableRef: tableRef,
-            mountPoint: popupsMountPoint,
-            boundariesElement: popupsBoundariesElement,
-            scrollableElement: popupsScrollableElement,
-            stickyHeaders: stickyHeader,
-            isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
-            editorAnalyticsAPI: editorAnalyticsAPI,
-            api: api
-          }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/_react.default.createElement(_FloatingToolbarLabel.FloatingToolbarLabel, {
-            target: resizingTableRef,
-            content: (0, _experiments.editorExperiment)('single_column_layouts', true) ? /*#__PURE__*/_react.default.createElement(_resizer.ResizerBreakoutModeLabel, {
-              layout: "full-width"
-            }) : /*#__PURE__*/_react.default.createElement(_TableFullWidthLabel.FullWidthDisplay, null),
-            alignX: 'center',
-            alignY: 'bottom',
-            stick: true,
-            forcePlacement: true,
-            zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
-            offset: [0, 10]
-          }), isTableSelectorEnabled && isSizeSelectorOpen && /*#__PURE__*/_react.default.createElement(_SizeSelector.SizeSelector, {
-            api: api,
-            isOpenedByKeyboard: false,
-            popupsMountPoint: popupsMountPoint,
-            target: (_sizeSelectorPluginSt = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.targetRef) !== null && _sizeSelectorPluginSt !== void 0 ? _sizeSelectorPluginSt : (0, _getDomRefFromSelection.getDomRefFromSelection)(editorView, _analytics.ACTION_SUBJECT_ID.PICKER_TABLE_SIZE, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions),
-            popupsBoundariesElement: popupsBoundariesElement,
-            popupsScrollableElement: popupsScrollableElement
-          }));
-        }
-      }));
+        options: options,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement,
+        defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
+        defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags,
+        isTableSelectorEnabled: isTableSelectorEnabled
+      });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref21) {
-        var formatMessage = _ref21.formatMessage;
+      quickInsert: function quickInsert(_ref19) {
+        var formatMessage = _ref19.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(_messages.toolbarInsertBlockMessages.table),
@@ -722,10 +534,15 @@ var tablePlugin = function tablePlugin(_ref) {
         return editorViewRef.current;
       }, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)((0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions))
     },
-    usePluginHook: function usePluginHook(_ref22) {
-      var editorView = _ref22.editorView;
-      var _useTableSharedState = useTableSharedState(api),
-        mode = _useTableSharedState.mode;
+    usePluginHook: function usePluginHook(_ref20) {
+      var editorView = _ref20.editorView;
+      var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['editorViewMode'], function (states) {
+          var _states$editorViewMod;
+          return {
+            mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+          };
+        }),
+        mode = _useSharedPluginState.mode;
       (0, _react.useEffect)(function () {
         var state = editorView.state,
           dispatch = editorView.dispatch;

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

@@ -254,29 +254,6 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     height: previewHeight
   }), previewContainer));
 };
-var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['table'], function (states) {
-      var _states$tableState, _states$tableState2;
-      return {
-        hoveredColumns: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.hoveredColumns,
-        hoveredRows: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.hoveredRows
-      };
-    }),
-    hoveredColumns = _useSharedPluginState.hoveredColumns,
-    hoveredRows = _useSharedPluginState.hoveredRows;
-  return {
-    hoveredColumns: hoveredColumns,
-    hoveredRows: hoveredRows
-  };
-}, function (api) {
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['table']),
-    tableState = _useSharedPluginState2.tableState;
-  var tableStateInternal = tableState;
-  return {
-    hoveredColumns: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredColumns,
-    hoveredRows: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredRows
-  };
-});
 var DragHandleComponentWithSharedState = function DragHandleComponentWithSharedState(_ref5) {
   var isDragMenuTarget = _ref5.isDragMenuTarget,
     tableLocalId = _ref5.tableLocalId,
@@ -294,9 +271,15 @@ var DragHandleComponentWithSharedState = function DragHandleComponentWithSharedS
     editorView = _ref5.editorView,
     intl = _ref5.intl,
     api = _ref5.api;
-  var _useSharedState = useSharedState(api),
-    hoveredColumns = _useSharedState.hoveredColumns,
-    hoveredRows = _useSharedState.hoveredRows;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['table'], function (states) {
+      var _states$tableState, _states$tableState2;
+      return {
+        hoveredColumns: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.hoveredColumns,
+        hoveredRows: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.hoveredRows
+      };
+    }),
+    hoveredColumns = _useSharedPluginState.hoveredColumns,
+    hoveredRows = _useSharedPluginState.hoveredRows;
   return /*#__PURE__*/_react.default.createElement(DragHandleComponent, {
     isDragMenuTarget: isDragMenuTarget,
     tableLocalId: tableLocalId,

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

@@ -13,7 +13,7 @@ var _DragInMotionIcon = require("../icons/DragInMotionIcon");
 var boxStyles = (0, _primitives.xcss)({
   borderColor: 'color.border.focused',
   borderStyle: 'solid',
-  borderRadius: 'border.radius.100',
+  borderRadius: 'radius.small',
   borderWidth: 'border.width.outline',
   backgroundColor: 'color.blanket.selected'
 });

package/dist/cjs/ui/FloatingContextualButton/styles.js

@@ -18,7 +18,7 @@ var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = func
     '> div': _objectSpread({
       // Sits behind button to provide surface-color background
       background: "var(--ds-surface, ".concat(_colors.N20, ")"),
-      borderRadius: "var(--ds-border-radius, 3px)",
+      borderRadius: "var(--ds-radius-small, 3px)",
       display: 'flex',
       // 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(_consts.contextualMenuTriggerSize + 2, "px"),

package/dist/cjs/ui/FloatingContextualMenu/styles.js

@@ -23,5 +23,5 @@ var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellCol
 var tablePopupStyles = exports.tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 ) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 20px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.CONTEXTUAL_MENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"), _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 20px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.CONTEXTUAL_SUBMENU, "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.CONTEXTUAL_MENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"), _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL, _adfSchema.tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
 };

package/dist/cjs/ui/FloatingDragMenu/styles.js

@@ -23,7 +23,7 @@ var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellCol
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 var dragMenuBackgroundColorStyles = exports.dragMenuBackgroundColorStyles = function dragMenuBackgroundColorStyles() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: ", "px; /* move the submenu down when 'sort increasing/decreasing' appear before background color picker */\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.TABLE_DRAG_MENU_PADDING_TOP + _consts.TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + _consts.TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT, _consts.dragMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.DRAG_SUBMENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: ", "px; /* move the submenu down when 'sort increasing/decreasing' appear before background color picker */\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.DRAG_SUBMENU, "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.TABLE_DRAG_MENU_PADDING_TOP + _consts.TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + _consts.TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT, _consts.dragMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.DRAG_SUBMENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -31,24 +31,6 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   }
   return [];
 };
-var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
-      var _states$selectionStat;
-      return {
-        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
-      };
-    }),
-    selection = _useSharedPluginState.selection;
-  return {
-    selection: selection
-  };
-}, function (api) {
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['selection']),
-    selectionState = _useSharedPluginState2.selectionState;
-  return {
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
-  };
-});
 var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
   var _colWidths$map$join;
   var editorView = _ref.editorView,
@@ -67,8 +49,13 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     getScrollOffset = _ref.getScrollOffset,
     api = _ref.api;
   var columnControlsRef = (0, _react.useRef)(null);
-  var _useSharedState = useSharedState(api),
-    selection = _useSharedState.selection;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
+      var _states$selectionStat;
+      return {
+        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+      };
+    }),
+    selection = _useSharedPluginState.selection;
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
     return (
       // when there is sticky header, a `margin-right: -1px` applied to `tr.sticky th` so it causes colWidths to be 1px wider

package/dist/cjs/ui/TableFloatingControls/CornerControls/DragCornerControls.js

@@ -58,7 +58,12 @@ var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
     className: _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER
   }));
 };
-var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
+var DragCornerControlsComponentWithSelection = function DragCornerControlsComponentWithSelection(_ref2) {
+  var editorView = _ref2.editorView,
+    isInDanger = _ref2.isInDanger,
+    isResizing = _ref2.isResizing,
+    formatMessage = _ref2.intl.formatMessage,
+    api = _ref2.api;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
       var _states$selectionStat;
       return {
@@ -66,24 +71,6 @@ var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (
       };
     }),
     selection = _useSharedPluginState.selection;
-  return {
-    selection: selection
-  };
-}, function (api) {
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['selection']),
-    selectionState = _useSharedPluginState2.selectionState;
-  return {
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
-  };
-});
-var DragCornerControlsComponentWithSelection = function DragCornerControlsComponentWithSelection(_ref2) {
-  var editorView = _ref2.editorView,
-    isInDanger = _ref2.isInDanger,
-    isResizing = _ref2.isResizing,
-    formatMessage = _ref2.intl.formatMessage,
-    api = _ref2.api;
-  var _useSharedState = useSharedState(api),
-    selection = _useSharedState.selection;
   var handleOnClick = function handleOnClick() {
     var state = editorView.state,
       dispatch = editorView.dispatch;

package/dist/cjs/ui/TableFloatingControls/FloatingControlsWithSelection.js

@@ -9,24 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _ClassicCornerControls = require("./CornerControls/ClassicCornerControls");
 var _ClassicControls = require("./RowControls/ClassicControls");
-var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
-      var _states$selectionStat;
-      return {
-        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
-      };
-    }),
-    selection = _useSharedPluginState.selection;
-  return {
-    selection: selection
-  };
-}, function (api) {
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['selection']),
-    selectionState = _useSharedPluginState2.selectionState;
-  return {
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
-  };
-});
 var FloatingControlsWithSelection = exports.FloatingControlsWithSelection = function FloatingControlsWithSelection(_ref) {
   var editorView = _ref.editorView,
     tableRef = _ref.tableRef,
@@ -40,8 +22,13 @@ var FloatingControlsWithSelection = exports.FloatingControlsWithSelection = func
     selectRow = _ref.selectRow,
     tableActive = _ref.tableActive,
     api = _ref.api;
-  var _useSharedState = useSharedState(api),
-    selection = _useSharedState.selection;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
+      var _states$selectionStat;
+      return {
+        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+      };
+    }),
+    selection = _useSharedPluginState.selection;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ClassicCornerControls.CornerControls, {
     editorView: editorView,
     tableRef: tableRef,

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

@@ -286,24 +286,6 @@ var DragControls = exports.DragControls = function DragControls(_ref) {
     }), rowHandles())
   );
 };
-var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
-      var _states$selectionStat;
-      return {
-        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
-      };
-    }),
-    selection = _useSharedPluginState.selection;
-  return {
-    selection: selection
-  };
-}, function (api) {
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['selection']),
-    selectionState = _useSharedPluginState2.selectionState;
-  return {
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
-  };
-});
 var DragControlsWithSelection = exports.DragControlsWithSelection = function DragControlsWithSelection(_ref5) {
   var editorView = _ref5.editorView,
     tableRef = _ref5.tableRef,
@@ -319,8 +301,13 @@ var DragControlsWithSelection = exports.DragControlsWithSelection = function Dra
     selectRows = _ref5.selectRows,
     updateCellHoverLocation = _ref5.updateCellHoverLocation,
     api = _ref5.api;
-  var _useSharedState = useSharedState(api),
-    selection = _useSharedState.selection;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['selection'], function (states) {
+      var _states$selectionStat;
+      return {
+        selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+      };
+    }),
+    selection = _useSharedPluginState.selection;
   return /*#__PURE__*/_react.default.createElement(DragControls, {
     editorView: editorView,
     tableRef: tableRef,

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

@@ -15,7 +15,7 @@ var tableFullWidthLabelWrapperStyles = (0, _primitives.xcss)({
   height: "var(--ds-space-400, 32px)",
   display: 'flex',
   backgroundColor: 'elevation.surface.overlay',
-  borderRadius: 'border.radius',
+  borderRadius: 'radius.small',
   boxShadow: 'elevation.shadow.overlay',
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 1,