@atlaskit/editor-plugin-table 13.0.4 → 13.0.6

package/dist/esm/tablePlugin.js

@@ -5,26 +5,19 @@ import React, { useEffect } from 'react';
 import { tableCell, tableCellWithNestedTable, tableHeader, tableHeaderWithLocalId, tableHeaderWithNestedTable, tableRow, tableRowWithNestedTable, tableRowWithLocalId, tableCellWithLocalId, tableCellWithNestedTableWithLocalId, tableRowWithNestedTableWithLocalId, tableHeaderWithNestedTableWithLocalId } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { browser } from '@atlaskit/editor-common/browser';
-import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
-import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { getParentOfTypeCount, getPositionAfterTopParentNodeOfType } from '@atlaskit/editor-common/nesting';
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
-import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { tableNodeSpecWithFixedToDOM } from './nodeviews/toDOM';
 import { createPlugin as createTableAnalyticsPlugin } from './pm-plugins/analytics/plugin';
-import { pluginKey as tableAnalyticsPluginKey } from './pm-plugins/analytics/plugin-key';
 import { insertTableWithNestingSupport, insertTableWithSize } from './pm-plugins/commands/insert';
 import { pluginConfig } from './pm-plugins/create-plugin-config';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
@@ -41,7 +34,6 @@ import { createPlugin as createTableOverflowAnalyticsPlugin } from './pm-plugins
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
 import { createPlugin as createFlexiResizingPlugin } from './pm-plugins/table-resizing/plugin';
 import { getPluginState as getFlexiResizingPlugin } from './pm-plugins/table-resizing/plugin-factory';
-import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing/plugin-key';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
 import { createPlugin as createSizeSelectorPlugin, pluginKey as sizeSelectorPluginKey } from './pm-plugins/table-size-selector';
 import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
@@ -49,46 +41,17 @@ import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins
 import { createTableWithWidth } from './pm-plugins/utils/create';
 import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
 import { ContentComponent } from './ui/ContentComponent';
-import FloatingContextualButton from './ui/FloatingContextualButton';
-import FloatingContextualMenu from './ui/FloatingContextualMenu';
-import FloatingDeleteButton from './ui/FloatingDeleteButton';
-import FloatingDragMenu from './ui/FloatingDragMenu';
-// Ignored via go/ees005
-// eslint-disable-next-line import/no-named-as-default
-import FloatingInsertButton from './ui/FloatingInsertButton';
-import { FloatingToolbarLabel } from './ui/FloatingToolbarLabel/FloatingToolbarLabel';
-import { GlobalStylesWrapper } from './ui/global-styles';
-import { SizeSelector } from './ui/SizeSelector';
-import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { getToolbarConfig } from './ui/toolbar';
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
 };
-var useTableSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  var _useSharedPluginState = 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 = 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 = {
@@ -101,7 +64,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));
@@ -472,178 +434,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 (expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true)) {
-        return /*#__PURE__*/React.createElement(ContentComponent, {
-          api: api,
-          editorView: editorView,
-          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-          options: options,
-          popupsMountPoint: popupsMountPoint,
-          popupsBoundariesElement: popupsBoundariesElement,
-          popupsScrollableElement: popupsScrollableElement,
-          defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
-          defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags,
-          isTableSelectorEnabled: isTableSelectorEnabled
-        });
-      }
-      return /*#__PURE__*/React.createElement(ErrorBoundary, {
-        component: ACTION_SUBJECT.TABLES_PLUGIN,
+      return /*#__PURE__*/React.createElement(ContentComponent, {
+        api: api,
+        editorView: editorView,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-        fallbackComponent: null
-      }, /*#__PURE__*/React.createElement(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.createElement(WithPluginState, {
-        plugins: {
-          tableAnalyticsPluginState: tableAnalyticsPluginKey,
-          tablePluginState: pluginKey,
-          tableWidthPluginState: tableWidthPluginKey,
-          tableResizingPluginState: tableResizingPluginKey,
-          stickyHeadersState: stickyHeadersPluginKey,
-          dragAndDropState: dragAndDropPluginKey,
-          sizeSelectorPluginState: sizeSelectorPluginKey
-        },
-        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 ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
-          return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
-            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.createElement(FloatingInsertButton, {
-            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.createElement(FloatingContextualMenu, {
-            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.createElement(FloatingDragMenu, {
-            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.createElement(FloatingDeleteButton, {
-            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.createElement(FloatingToolbarLabel, {
-            target: resizingTableRef,
-            content: editorExperiment('single_column_layouts', true) ? /*#__PURE__*/React.createElement(ResizerBreakoutModeLabel, {
-              layout: "full-width"
-            }) : /*#__PURE__*/React.createElement(FullWidthDisplay, null),
-            alignX: 'center',
-            alignY: 'bottom',
-            stick: true,
-            forcePlacement: true,
-            zIndex: akEditorFloatingPanelZIndex,
-            offset: [0, 10]
-          }), isTableSelectorEnabled && isSizeSelectorOpen && /*#__PURE__*/React.createElement(SizeSelector, {
-            api: api,
-            isOpenedByKeyboard: false,
-            popupsMountPoint: popupsMountPoint,
-            target: (_sizeSelectorPluginSt = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.targetRef) !== null && _sizeSelectorPluginSt !== void 0 ? _sizeSelectorPluginSt : getDomRefFromSelection(editorView, 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.table),
@@ -714,10 +525,15 @@ var tablePlugin = function tablePlugin(_ref) {
         return editorViewRef.current;
       }, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(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 = 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;
       useEffect(function () {
         var state = editorView.state,
           dispatch = editorView.dispatch;

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

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl-next';
 import { browser } from '@atlaskit/editor-common/browser';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findTable, TableMap } from '@atlaskit/editor-tables';
@@ -245,29 +245,6 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     height: previewHeight
   }), previewContainer));
 };
-var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  var _useSharedPluginState = 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 = 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,
@@ -285,9 +262,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 = 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.createElement(DragHandleComponent, {
     isDragMenuTarget: isDragMenuTarget,
     tableLocalId: tableLocalId,

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

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

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

@@ -12,7 +12,7 @@ export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyle
     '> div': _objectSpread({
       // Sits behind button to provide surface-color background
       background: "var(--ds-surface, ".concat(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(contextualMenuTriggerSize + 2, "px"),

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

@@ -17,5 +17,5 @@ export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedCo
 export var tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 ) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
 };

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

@@ -17,7 +17,7 @@ export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedCo
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export var dragMenuBackgroundColorStyles = function dragMenuBackgroundColorStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), TABLE_DRAG_MENU_PADDING_TOP + TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT, dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), ClassName.DRAG_SUBMENU, "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), TABLE_DRAG_MENU_PADDING_TOP + TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT, dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

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

@@ -1,7 +1,7 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 
 import React, { useCallback, useMemo, useRef } from 'react';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
@@ -23,24 +23,6 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   }
   return [];
 };
-var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  var _useSharedPluginState = 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 = useSharedPluginState(api, ['selection']),
-    selectionState = _useSharedPluginState2.selectionState;
-  return {
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
-  };
-});
 export var ColumnControls = function ColumnControls(_ref) {
   var _colWidths$map$join;
   var editorView = _ref.editorView,
@@ -59,8 +41,13 @@ export var ColumnControls = function ColumnControls(_ref) {
     getScrollOffset = _ref.getScrollOffset,
     api = _ref.api;
   var columnControlsRef = useRef(null);
-  var _useSharedState = useSharedState(api),
-    selection = _useSharedState.selection;
+  var _useSharedPluginState = 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/esm/ui/TableFloatingControls/CornerControls/DragCornerControls.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
@@ -49,7 +49,12 @@ var DragCornerControlsComponent = function DragCornerControlsComponent(_ref) {
     className: ClassName.DRAG_CORNER_BUTTON_INNER
   }));
 };
-var useSharedState = 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 = useSharedPluginStateWithSelector(api, ['selection'], function (states) {
       var _states$selectionStat;
       return {
@@ -57,24 +62,6 @@ var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
       };
     }),
     selection = _useSharedPluginState.selection;
-  return {
-    selection: selection
-  };
-}, function (api) {
-  var _useSharedPluginState2 = 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/esm/ui/TableFloatingControls/FloatingControlsWithSelection.js

@@ -1,25 +1,7 @@
 import React from 'react';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { CornerControls } from './CornerControls/ClassicCornerControls';
 import { RowControls } from './RowControls/ClassicControls';
-var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  var _useSharedPluginState = 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 = useSharedPluginState(api, ['selection']),
-    selectionState = _useSharedPluginState2.selectionState;
-  return {
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
-  };
-});
 export var FloatingControlsWithSelection = function FloatingControlsWithSelection(_ref) {
   var editorView = _ref.editorView,
     tableRef = _ref.tableRef,
@@ -33,8 +15,13 @@ export var FloatingControlsWithSelection = function FloatingControlsWithSelectio
     selectRow = _ref.selectRow,
     tableActive = _ref.tableActive,
     api = _ref.api;
-  var _useSharedState = useSharedState(api),
-    selection = _useSharedState.selection;
+  var _useSharedPluginState = 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
     editorView: editorView,
     tableRef: tableRef,

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

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -277,24 +277,6 @@ export var DragControls = function DragControls(_ref) {
     }), rowHandles())
   );
 };
-var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  var _useSharedPluginState = 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 = useSharedPluginState(api, ['selection']),
-    selectionState = _useSharedPluginState2.selectionState;
-  return {
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
-  };
-});
 export var DragControlsWithSelection = function DragControlsWithSelection(_ref5) {
   var editorView = _ref5.editorView,
     tableRef = _ref5.tableRef,
@@ -310,8 +292,13 @@ export var DragControlsWithSelection = function DragControlsWithSelection(_ref5)
     selectRows = _ref5.selectRows,
     updateCellHoverLocation = _ref5.updateCellHoverLocation,
     api = _ref5.api;
-  var _useSharedState = useSharedState(api),
-    selection = _useSharedState.selection;
+  var _useSharedPluginState = 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.createElement(DragControls, {
     editorView: editorView,
     tableRef: tableRef,

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

@@ -7,7 +7,7 @@ var tableFullWidthLabelWrapperStyles = 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,