@atlaskit/editor-plugin-table 13.0.4 → 13.0.6

package/dist/es2019/tablePlugin.js

@@ -2,26 +2,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';
@@ -38,7 +31,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';
@@ -46,39 +38,8 @@ 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';
 const defaultGetEditorFeatureFlags = () => ({});
-const useTableSharedState = sharedPluginStateHookMigratorFactory(api => {
-  const {
-    mode
-  } = useSharedPluginStateWithSelector(api, ['editorViewMode'], states => {
-    var _states$editorViewMod;
-    return {
-      mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
-    };
-  });
-  return {
-    mode
-  };
-}, api => {
-  const {
-    editorViewModeState
-  } = useSharedPluginState(api, ['editorViewMode']);
-  return {
-    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
-  };
-});
 
 /**
  * Table plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
@@ -88,7 +49,7 @@ const tablePlugin = ({
   config: options,
   api
 }) => {
-  var _api$analytics, _api$accessibilityUti, _options$getEditorFea, _options$getEditorFea2, _api$analytics2;
+  var _api$analytics, _options$getEditorFea, _options$getEditorFea2, _api$analytics2;
   const editorViewRef = {
     current: null
   };
@@ -99,7 +60,6 @@ const tablePlugin = ({
     };
   };
   const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
-  const ariaNotifyPlugin = api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify;
   const isTableFixedColumnWidthsOptionEnabled = (options === null || options === void 0 ? void 0 : (_options$getEditorFea = options.getEditorFeatureFlags) === null || _options$getEditorFea === void 0 ? void 0 : _options$getEditorFea.call(options).tableWithFixedColumnWidthsOption) || false;
   const 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));
@@ -476,175 +436,18 @@ const tablePlugin = ({
       popupsScrollableElement,
       dispatchAnalyticsEvent
     }) {
-      var _api$featureFlags;
-      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 ? 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: ({
-          tableResizingPluginState: resizingPluginState,
-          stickyHeadersState,
-          tablePluginState,
-          tableWidthPluginState,
-          dragAndDropState,
-          sizeSelectorPluginState
-        }) => {
-          var _sizeSelectorPluginSt, _api$analytics3;
-          // Any changes made inside `<WithPluginState>` need to be reflected in the
-          // `<ContentComponent>` as well.
-          const isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
-          const isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
-          const resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;
-          const resizingTableRef = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableRef;
-          const isResizing = isColumnResizing || isTableResizing;
-          const widthToWidest = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.widthToWidest;
-          const isSizeSelectorOpen = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.isSelectorOpen;
-          const {
-            tableNode,
-            tablePos,
-            targetCellPosition,
-            isContextualMenuOpen,
-            tableRef,
-            pluginConfig,
-            insertColumnButtonIndex,
-            insertRowButtonIndex,
-            isHeaderColumnEnabled,
-            isHeaderRowEnabled,
-            isDragAndDropEnabled,
-            tableWrapperTarget,
-            isCellMenuOpenByKeyboard
-            // Ignored via go/ees005
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          } = tablePluginState;
-          const {
-            allowControls
-          } = pluginConfig;
-          const 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 ? 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: ({
@@ -722,7 +525,12 @@ const tablePlugin = ({
     }) {
       const {
         mode
-      } = useTableSharedState(api);
+      } = useSharedPluginStateWithSelector(api, ['editorViewMode'], states => {
+        var _states$editorViewMod;
+        return {
+          mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+        };
+      });
       useEffect(() => {
         const {
           state,

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

@@ -5,7 +5,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';
@@ -250,31 +250,6 @@ const DragHandleComponent = ({
     height: previewHeight
   }), previewContainer));
 };
-const useSharedState = sharedPluginStateHookMigratorFactory(api => {
-  const {
-    hoveredColumns,
-    hoveredRows
-  } = useSharedPluginStateWithSelector(api, ['table'], 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
-    };
-  });
-  return {
-    hoveredColumns,
-    hoveredRows
-  };
-}, api => {
-  const {
-    tableState
-  } = useSharedPluginState(api, ['table']);
-  const tableStateInternal = tableState;
-  return {
-    hoveredColumns: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredColumns,
-    hoveredRows: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredRows
-  };
-});
 const DragHandleComponentWithSharedState = ({
   isDragMenuTarget,
   tableLocalId,
@@ -296,7 +271,13 @@ const DragHandleComponentWithSharedState = ({
   const {
     hoveredColumns,
     hoveredRows
-  } = useSharedState(api);
+  } = useSharedPluginStateWithSelector(api, ['table'], 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
+    };
+  });
   return /*#__PURE__*/React.createElement(DragHandleComponent, {
     isDragMenuTarget: isDragMenuTarget,
     tableLocalId: tableLocalId,

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

@@ -6,7 +6,7 @@ import { DragInMotionIcon } from '../icons/DragInMotionIcon';
 const 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/es2019/ui/FloatingContextualButton/styles.js

@@ -8,7 +8,7 @@ export const tableFloatingCellButtonStyles = () => css({
   '> div': {
     // Sits behind button to provide surface-color background
     background: `var(--ds-surface, ${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: `${contextualMenuTriggerSize + 2}px`,

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

@@ -14,7 +14,7 @@ export const tablePopupStyles = (isDragAndDropEnabled
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 ) => css`
 	.${ClassName.CONTEXTUAL_SUBMENU} {
-		border-radius: ${"var(--ds-border-radius, 3px)"};
+		border-radius: ${"var(--ds-radius-small, 3px)"};
 		background: ${"var(--ds-surface-overlay, white)"};
 		box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
 		display: block;
@@ -35,7 +35,7 @@ export const tablePopupStyles = (isDragAndDropEnabled
 			content: '';
 			display: block;
 			border: 1px solid ${tableBackgroundBorderColor};
-			border-radius: ${"var(--ds-border-radius, 3px)"};
+			border-radius: ${"var(--ds-radius-small, 3px)"};
 			width: 20px;
 			height: 20px;
 		}
@@ -55,7 +55,7 @@ export const tablePopupStyles = (isDragAndDropEnabled
 			content: '';
 			display: block;
 			border: 1px solid ${tableBackgroundBorderColor};
-			border-radius: ${"var(--ds-border-radius, 3px)"};
+			border-radius: ${"var(--ds-radius-small, 3px)"};
 			width: 14px;
 			height: 14px;
 		}

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

@@ -14,7 +14,7 @@ export const cellColourPreviewStyles = selectedColor => css({
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export const dragMenuBackgroundColorStyles = () => css`
 	.${ClassName.DRAG_SUBMENU} {
-		border-radius: ${"var(--ds-border-radius, 3px)"};
+		border-radius: ${"var(--ds-radius-small, 3px)"};
 		background: ${"var(--ds-surface-overlay, white)"};
 		box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
 		display: block;
@@ -35,7 +35,7 @@ export const dragMenuBackgroundColorStyles = () => css`
 			content: '';
 			display: block;
 			border: 1px solid ${tableBackgroundBorderColor};
-			border-radius: ${"var(--ds-border-radius, 3px)"};
+			border-radius: ${"var(--ds-radius-small, 3px)"};
 			width: 14px;
 			height: 14px;
 		}

package/dist/es2019/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,26 +23,6 @@ const getSelectedColumns = selection => {
   }
   return [];
 };
-const useSharedState = sharedPluginStateHookMigratorFactory(api => {
-  const {
-    selection
-  } = useSharedPluginStateWithSelector(api, ['selection'], states => {
-    var _states$selectionStat;
-    return {
-      selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
-    };
-  });
-  return {
-    selection
-  };
-}, api => {
-  const {
-    selectionState
-  } = useSharedPluginState(api, ['selection']);
-  return {
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
-  };
-});
 export const ColumnControls = ({
   editorView,
   tableActive,
@@ -64,7 +44,12 @@ export const ColumnControls = ({
   const columnControlsRef = useRef(null);
   const {
     selection
-  } = useSharedState(api);
+  } = useSharedPluginStateWithSelector(api, ['selection'], states => {
+    var _states$selectionStat;
+    return {
+      selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+    };
+  });
   const widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(width =>
   // when there is sticky header, a `margin-right: -1px` applied to `tr.sticky th` so it causes colWidths to be 1px wider
   // we need to reduce the width by 1px to avoid misalignment of column controls.

package/dist/es2019/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';
@@ -58,26 +58,6 @@ const DragCornerControlsComponent = ({
     className: ClassName.DRAG_CORNER_BUTTON_INNER
   }));
 };
-const useSharedState = sharedPluginStateHookMigratorFactory(api => {
-  const {
-    selection
-  } = useSharedPluginStateWithSelector(api, ['selection'], states => {
-    var _states$selectionStat;
-    return {
-      selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
-    };
-  });
-  return {
-    selection
-  };
-}, api => {
-  const {
-    selectionState
-  } = useSharedPluginState(api, ['selection']);
-  return {
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
-  };
-});
 const DragCornerControlsComponentWithSelection = ({
   editorView,
   isInDanger,
@@ -89,7 +69,12 @@ const DragCornerControlsComponentWithSelection = ({
 }) => {
   const {
     selection
-  } = useSharedState(api);
+  } = useSharedPluginStateWithSelector(api, ['selection'], states => {
+    var _states$selectionStat;
+    return {
+      selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+    };
+  });
   const handleOnClick = () => {
     const {
       state,

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

@@ -1,27 +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';
-const useSharedState = sharedPluginStateHookMigratorFactory(api => {
-  const {
-    selection
-  } = useSharedPluginStateWithSelector(api, ['selection'], states => {
-    var _states$selectionStat;
-    return {
-      selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
-    };
-  });
-  return {
-    selection
-  };
-}, api => {
-  const {
-    selectionState
-  } = useSharedPluginState(api, ['selection']);
-  return {
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
-  };
-});
 export const FloatingControlsWithSelection = ({
   editorView,
   tableRef,
@@ -38,7 +18,12 @@ export const FloatingControlsWithSelection = ({
 }) => {
   const {
     selection
-  } = useSharedState(api);
+  } = useSharedPluginStateWithSelector(api, ['selection'], states => {
+    var _states$selectionStat;
+    return {
+      selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+    };
+  });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
     editorView: editorView,
     tableRef: tableRef,

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

@@ -1,7 +1,7 @@
 /* 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';
@@ -275,26 +275,6 @@ export const DragControls = ({
     }))), rowHandles())
   );
 };
-const useSharedState = sharedPluginStateHookMigratorFactory(api => {
-  const {
-    selection
-  } = useSharedPluginStateWithSelector(api, ['selection'], states => {
-    var _states$selectionStat;
-    return {
-      selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
-    };
-  });
-  return {
-    selection
-  };
-}, api => {
-  const {
-    selectionState
-  } = useSharedPluginState(api, ['selection']);
-  return {
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
-  };
-});
 export const DragControlsWithSelection = ({
   editorView,
   tableRef,
@@ -313,7 +293,12 @@ export const DragControlsWithSelection = ({
 }) => {
   const {
     selection
-  } = useSharedState(api);
+  } = useSharedPluginStateWithSelector(api, ['selection'], states => {
+    var _states$selectionStat;
+    return {
+      selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
+    };
+  });
   return /*#__PURE__*/React.createElement(DragControls, {
     editorView: editorView,
     tableRef: tableRef,

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

@@ -7,7 +7,7 @@ const 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,

package/dist/es2019/ui/global-styles.js

@@ -4,9 +4,13 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { Global, jsx } from '@emotion/react';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableStyles } from './common-styles';
-const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+export const GlobalStylesWrapper = ({
+  featureFlags,
+  isDragAndDropEnabledOption,
+  api
+}) => {
   const {
     mode
   } = useSharedPluginStateWithSelector(api, ['editorViewMode'], states => {
@@ -15,25 +19,6 @@ const useSharedState = sharedPluginStateHookMigratorFactory(api => {
       mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
     };
   });
-  return {
-    mode
-  };
-}, api => {
-  const {
-    editorViewModeState
-  } = useSharedPluginState(api, ['editorViewMode']);
-  return {
-    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
-  };
-});
-export const GlobalStylesWrapper = ({
-  featureFlags,
-  isDragAndDropEnabledOption,
-  api
-}) => {
-  const {
-    mode
-  } = useSharedState(api);
   const isLivePageViewMode = mode === 'view';
   return jsx(Global, {
     styles: tableStyles({