@atlaskit/editor-plugin-table 10.9.19 → 10.9.21

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -2,7 +2,10 @@
 import type { MouseEvent } from 'react';
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import {
+	sharedPluginStateHookMigratorFactory,
+	useSharedPluginState,
+} from '@atlaskit/editor-common/hooks';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -12,7 +15,6 @@ import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { token } from '@atlaskit/tokens';
 
 import { clearHoverSelection } from '../../../pm-plugins/commands';
@@ -371,6 +373,21 @@ export const DragControls = ({
 	);
 };
 
+const useSharedState = sharedPluginStateHookMigratorFactory(
+	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
+		const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection');
+		return {
+			selection: selectionsSelector,
+		};
+	},
+	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
+		const { selectionState } = useSharedPluginState(api, ['selection']);
+		return {
+			selection: selectionState?.selection,
+		};
+	},
+);
+
 export const DragControlsWithSelection = ({
 	editorView,
 	tableRef,
@@ -387,17 +404,7 @@ export const DragControlsWithSelection = ({
 	updateCellHoverLocation,
 	api,
 }: Exclude<DragControlsProps, 'selection'>) => {
-	// selection
-	const { selectionState } = useSharedPluginState(api, ['selection'], {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
-	});
-	const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? selectionsSelector
-		: selectionState?.selection;
-
+	const { selection } = useSharedState(api);
 	return (
 		<DragControls
 			editorView={editorView}

package/src/ui/global-styles.tsx

@@ -5,15 +5,32 @@
 // 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 { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import {
+	sharedPluginStateHookMigratorFactory,
+	useSharedPluginState,
+} from '@atlaskit/editor-common/hooks';
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import type { PluginInjectionAPI } from '../types';
 
 import { tableStyles } from './common-styles';
 
+const useSharedState = sharedPluginStateHookMigratorFactory(
+	(api: PluginInjectionAPI | undefined) => {
+		const mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+		return {
+			mode,
+		};
+	},
+	(api: PluginInjectionAPI | undefined) => {
+		const { editorViewModeState } = useSharedPluginState(api, ['editorViewMode']);
+		return {
+			mode: editorViewModeState?.mode,
+		};
+	},
+);
+
 export const GlobalStylesWrapper = ({
 	featureFlags,
 	isDragAndDropEnabledOption,
@@ -23,17 +40,7 @@ export const GlobalStylesWrapper = ({
 	isDragAndDropEnabledOption?: boolean;
 	api?: PluginInjectionAPI;
 }) => {
-	// mode
-	const { editorViewModeState } = useSharedPluginState(api, ['editorViewMode'], {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
-	});
-	const modeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? modeSelector
-		: editorViewModeState?.mode;
-
+	const { mode } = useSharedState(api);
 	const isLivePageViewMode = mode === 'view';
 	return (
 		<Global

package/src/ui/icons/SortingIconWrapper.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
 
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import {
+	sharedPluginStateHookMigratorFactory,
+	useSharedPluginState,
+} from '@atlaskit/editor-common/hooks';
 import { SortingIcon } from '@atlaskit/editor-common/table';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import type { TablePlugin } from '../../tablePluginType';
 
@@ -13,19 +15,23 @@ type SortingIconWrapperProps = SortingIconProps & {
 	api: ExtractInjectionAPI<TablePlugin>;
 };
 
-export const SortingIconWrapper = (props: SortingIconWrapperProps) => {
-	const { editorViewModeState } = useSharedPluginState(props.api, ['editorViewMode'], {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
-	});
-
-	// mode
-	const modeSelector = useSharedPluginStateSelector(props.api, 'editorViewMode.mode', {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	});
-	const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true)
-		? modeSelector
-		: editorViewModeState?.mode;
+const useSharedState = sharedPluginStateHookMigratorFactory(
+	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
+		const mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+		return {
+			mode,
+		};
+	},
+	(api: ExtractInjectionAPI<TablePlugin> | undefined) => {
+		const { editorViewModeState } = useSharedPluginState(api, ['editorViewMode']);
+		return {
+			mode: editorViewModeState?.mode,
+		};
+	},
+);
 
+export const SortingIconWrapper = (props: SortingIconWrapperProps) => {
+	const { mode } = useSharedState(props.api);
 	if (mode === 'edit') {
 		return null;
 	}

package/src/ui/toolbar.tsx

@@ -676,6 +676,12 @@ export const getToolbarConfig =
 				editorExperiment('platform_editor_controls', 'variant1') &&
 				fg('platform_editor_controls_patch_6');
 
+			// testId is required to show focus on trigger button on ESC key press
+			// see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
+			const overflowDropdownTestId = fg('platform_editor_controls_patch_8')
+				? 'table-overflow-dropdown-trigger'
+				: undefined;
+
 			return {
 				title: toolbarTitle,
 				getDomRef,
@@ -705,6 +711,7 @@ export const getToolbarConfig =
 								shouldGroupWithoutSeparators && { type: 'separator', fullHeight: true },
 								{
 									type: 'overflow-dropdown',
+									testId: overflowDropdownTestId,
 									dropdownWidth: 220,
 									options: [
 										{