@atlaskit/editor-plugin-table 10.8.0 → 10.8.2

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

@@ -0,0 +1,58 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { jsx } from '@emotion/react';
+import { TableSelectorPopup } from '@atlaskit/editor-common/ui';
+import { pluginKey } from '../../pm-plugins/table-size-selector';
+var DEFAULT_TABLE_SELECTOR_COLS = 3;
+var DEFAULT_TABLE_SELECTOR_ROWS = 3;
+export var SizeSelector = function SizeSelector(_ref) {
+  var api = _ref.api,
+    target = _ref.target,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement;
+  var closeSelectorPopup = useCallback(function () {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
+      var tr = _ref2.tr;
+      tr.setMeta(pluginKey, {
+        isSelectorOpen: false
+      });
+      return tr;
+    });
+  }, [api]);
+  var onSelection = useCallback(function (rowsCount, colsCount) {
+    api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
+      var tr = _ref3.tr;
+      api === null || api === void 0 || api.table.commands.insertTableWithSize(rowsCount, colsCount)({
+        tr: tr
+      });
+      tr.setMeta(pluginKey, {
+        isSelectorOpen: false
+      });
+      return tr;
+    });
+  }, [api]);
+  var onUnmount = function onUnmount() {
+    api === null || api === void 0 || api.core.actions.focus();
+  };
+  return jsx(TableSelectorPopup, {
+    defaultSize: {
+      row: DEFAULT_TABLE_SELECTOR_ROWS,
+      col: DEFAULT_TABLE_SELECTOR_COLS
+    },
+    target: target,
+    onUnmount: onUnmount,
+    onSelection: onSelection,
+    popupsMountPoint: popupsMountPoint,
+    popupsScrollableElement: popupsScrollableElement,
+    popupsBoundariesElement: popupsBoundariesElement,
+    isOpenedByKeyboard: true,
+    handleClickOutside: closeSelectorPopup,
+    handleEscapeKeydown: closeSelectorPopup
+  });
+};

package/dist/types/nodeviews/TableRow.d.ts

@@ -17,6 +17,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
     private isSticky;
     private intersectionObserver?;
     private resizeObserver?;
+    private tableContainerObserver?;
     private sentinels;
     private sentinelData;
     private stickyRowHeight?;

package/dist/types/pm-plugins/table-size-selector.d.ts

@@ -0,0 +1,10 @@
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+type SizeSelectorPluginState = {
+    isSelectorOpen: boolean;
+    targetRef?: HTMLElement;
+};
+export declare const pluginKey: PluginKey<SizeSelectorPluginState>;
+export declare const createPlugin: (dispatch: Dispatch) => SafePlugin<SizeSelectorPluginState>;
+export {};

package/dist/types/ui/SizeSelector/index.d.ts

@@ -0,0 +1,9 @@
+import { jsx } from '@emotion/react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type TableSelectorPopupProps } from '@atlaskit/editor-common/ui';
+import { TablePlugin } from '../../tablePluginType';
+interface SizeSelectorProps extends Omit<TableSelectorPopupProps, 'handleClickOutside' | 'onSelection' | 'unUnmount'> {
+    api?: ExtractInjectionAPI<TablePlugin>;
+}
+export declare const SizeSelector: ({ api, target, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, }: SizeSelectorProps) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/nodeviews/TableRow.d.ts

@@ -17,6 +17,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
     private isSticky;
     private intersectionObserver?;
     private resizeObserver?;
+    private tableContainerObserver?;
     private sentinels;
     private sentinelData;
     private stickyRowHeight?;

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

@@ -0,0 +1,10 @@
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+type SizeSelectorPluginState = {
+    isSelectorOpen: boolean;
+    targetRef?: HTMLElement;
+};
+export declare const pluginKey: PluginKey<SizeSelectorPluginState>;
+export declare const createPlugin: (dispatch: Dispatch) => SafePlugin<SizeSelectorPluginState>;
+export {};

package/dist/types-ts4.5/ui/SizeSelector/index.d.ts

@@ -0,0 +1,9 @@
+import { jsx } from '@emotion/react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type TableSelectorPopupProps } from '@atlaskit/editor-common/ui';
+import { TablePlugin } from '../../tablePluginType';
+interface SizeSelectorProps extends Omit<TableSelectorPopupProps, 'handleClickOutside' | 'onSelection' | 'unUnmount'> {
+    api?: ExtractInjectionAPI<TablePlugin>;
+}
+export declare const SizeSelector: ({ api, target, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, }: SizeSelectorProps) => jsx.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.8.0",
+	"version": "10.8.2",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/custom-steps": "^0.11.0",
-		"@atlaskit/editor-common": "^103.7.0",
+		"@atlaskit/editor-common": "^103.12.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
@@ -54,9 +54,9 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.8.0",
+		"@atlaskit/tmp-editor-statsig": "^4.12.0",
 		"@atlaskit/toggle": "^15.0.0",
-		"@atlaskit/tokens": "^4.7.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -197,6 +197,12 @@
 		},
 		"platform_editor_controls_patch_4": {
 			"type": "boolean"
+		},
+		"platform_editor_tables_table_selector": {
+			"type": "boolean"
+		},
+		"platform_editor_controls_table_picker": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/TableRow.ts

@@ -39,7 +39,7 @@ interface SentinelData {
 // limit scroll event calls
 const HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
 
-// timeout for resetting the scroll class - if it’s too long then users won’t be able to click on the header cells,
+// timeout for resetting the scroll class - if it's too long then users won't be able to click on the header cells,
 // if too short it would trigger too many dom updates.
 const HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
 
@@ -86,6 +86,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 	private isSticky: boolean;
 	private intersectionObserver?: IntersectionObserver;
 	private resizeObserver?: ResizeObserver;
+	private tableContainerObserver?: MutationObserver;
 	private sentinels: {
 		top?: HTMLElement | null;
 		bottom?: HTMLElement | null;
@@ -157,6 +158,10 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 
 			this.emitOff(true);
 		}
+
+		if (this.tableContainerObserver) {
+			this.tableContainerObserver.disconnect();
+		}
 	}
 
 	ignoreMutation(mutationRecord: MutationRecord | { type: 'selection'; target: Node }) {
@@ -289,32 +294,36 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 		}
 
 		window.requestAnimationFrame(() => {
+			const getTableContainer = () =>
+				getTree(this.dom)?.wrapper.closest(`.${TableCssClassName.NODEVIEW_WRAPPER}`);
+
 			// we expect tree to be defined after animation frame
-			const tableContainer = getTree(this.dom)?.wrapper.closest(
-				`.${TableCssClassName.NODEVIEW_WRAPPER}`,
-			);
+			let tableContainer = getTableContainer();
+
 			if (tableContainer) {
 				const getSentinelTop = () =>
+					tableContainer &&
 					// Ignored via go/ees005
 					// eslint-disable-next-line @atlaskit/editor/no-as-casting
-					tableContainer
+					(tableContainer
 						.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_TOP)
-						.item(0) as HTMLElement;
+						.item(0) as HTMLElement);
 				const getSentinelBottom = () => {
 					// Multiple bottom sentinels may be found if there are nested tables.
 					// We need to make sure we get the last one which will belong to the parent table.
-					const bottomSentinels = tableContainer.getElementsByClassName(
-						ClassName.TABLE_STICKY_SENTINEL_BOTTOM,
-					);
+					const bottomSentinels =
+						tableContainer &&
+						tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM);
 					// Ignored via go/ees005
 					// eslint-disable-next-line @atlaskit/editor/no-as-casting
 					return fg('platform_editor_nested_tables_bottom_sentinel')
 						? // eslint-disable-next-line @atlaskit/editor/no-as-casting
-							(bottomSentinels.item(bottomSentinels.length - 1) as HTMLElement)
-						: // eslint-disable-next-line @atlaskit/editor/no-as-casting
-							(tableContainer
-								.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)
-								.item(0) as HTMLElement);
+							bottomSentinels && (bottomSentinels.item(bottomSentinels.length - 1) as HTMLElement)
+						: tableContainer &&
+								// eslint-disable-next-line @atlaskit/editor/no-as-casting
+								(tableContainer
+									.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)
+									.item(0) as HTMLElement);
 				};
 
 				const sentinelsInDom = () => getSentinelTop() !== null && getSentinelBottom() !== null;
@@ -333,24 +342,57 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 					});
 				};
 
-				if (sentinelsInDom()) {
-					// great - DOM ready, observe as normal
-					observeStickySentinels();
+				if (fg('platform_editor_table_initial_load_fix')) {
+					const isInitialProsemirrorToDomRender = tableContainer.hasAttribute(
+						'data-prosemirror-initial-toDOM-render',
+					);
+
+					// Sentinels may be in the DOM but they're part of the prosemirror placeholder structure which is replaced with the fully rendered React node.
+					if (sentinelsInDom() && !isInitialProsemirrorToDomRender) {
+						// great - DOM ready, observe as normal
+						observeStickySentinels();
+					} else {
+						// concurrent loading issue - here TableRow is too eager trying to
+						// observe sentinels before they are in the DOM, use MutationObserver
+						// to wait for sentinels to be added to the parent Table node DOM
+						// then attach the IntersectionObserver
+						this.tableContainerObserver = new MutationObserver(() => {
+							// Check if the tableContainer is still connected to the DOM. It can become disconnected when the placholder
+							// prosemirror node is replaced with the fully rendered React node (see _handleTableRef).
+							if (!tableContainer || !tableContainer.isConnected) {
+								tableContainer = getTableContainer();
+							}
+							if (sentinelsInDom()) {
+								observeStickySentinels();
+								this.tableContainerObserver?.disconnect();
+							}
+						});
+
+						const mutatingNode = tableContainer;
+						if (mutatingNode && this.tableContainerObserver) {
+							this.tableContainerObserver.observe(mutatingNode, { subtree: true, childList: true });
+						}
+					}
 				} else {
-					// concurrent loading issue - here TableRow is too eager trying to
-					// observe sentinels before they are in the DOM, use MutationObserver
-					// to wait for sentinels to be added to the parent Table node DOM
-					// then attach the IntersectionObserver
-					const tableContainerObserver = new MutationObserver(() => {
-						if (sentinelsInDom()) {
-							observeStickySentinels();
-							tableContainerObserver.disconnect();
+					if (sentinelsInDom()) {
+						// great - DOM ready, observe as normal
+						observeStickySentinels();
+					} else {
+						// concurrent loading issue - here TableRow is too eager trying to
+						// observe sentinels before they are in the DOM, use MutationObserver
+						// to wait for sentinels to be added to the parent Table node DOM
+						// then attach the IntersectionObserver
+						const tableContainerObserver = new MutationObserver(() => {
+							if (sentinelsInDom()) {
+								observeStickySentinels();
+								tableContainerObserver.disconnect();
+							}
+						});
+
+						const mutatingNode = tableContainer;
+						if (mutatingNode) {
+							tableContainerObserver.observe(mutatingNode, { subtree: true, childList: true });
 						}
-					});
-
-					const mutatingNode = tableContainer;
-					if (mutatingNode) {
-						tableContainerObserver.observe(mutatingNode, { subtree: true, childList: true });
 					}
 				}
 			}

package/src/nodeviews/table.tsx

@@ -81,7 +81,7 @@ const handleInlineTableWidth = (table: HTMLElement, width: number | undefined) =
 	table.style.setProperty('width', `${width}px`);
 };
 
-// Leave as a fallback incase the table's NodeSpec.toDOM is not defined.
+// Remove after removing the platform_editor_table_initial_load_fix flag.
 const toDOM = (node: PmNode, props: Props) => {
 	let colgroup: DOMOutputSpec = '';
 	if (props.allowColumnResizing) {

package/src/nodeviews/toDOM.ts

@@ -111,6 +111,7 @@ export const tableNodeSpecWithFixedToDOM = (
 					'div',
 					{
 						class: 'tableView-content-wrap',
+						'data-prosemirror-initial-toDOM-render': 'true',
 					},
 					tableContainerDiv,
 				];
@@ -161,6 +162,7 @@ export const tableNodeSpecWithFixedToDOM = (
 				'div',
 				{
 					class: 'tableView-content-wrap',
+					'data-prosemirror-initial-toDOM-render': 'true',
 				},
 				tableResizingDiv,
 			];

package/src/pm-plugins/table-size-selector.ts

@@ -0,0 +1,39 @@
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+
+type SizeSelectorPluginState = {
+	isSelectorOpen: boolean;
+	targetRef?: HTMLElement;
+};
+
+export const pluginKey = new PluginKey<SizeSelectorPluginState>('tableSizeSelectorPlugin');
+
+export const createPlugin = (dispatch: Dispatch) => {
+	return new SafePlugin<SizeSelectorPluginState>({
+		key: pluginKey,
+		state: {
+			init: () => ({
+				isSelectorOpen: false,
+			}),
+			apply: (tr, currentPluginState) => {
+				const meta = tr.getMeta(pluginKey);
+
+				if (meta) {
+					const keys = Object.keys(meta) as Array<keyof SizeSelectorPluginState>;
+					const changed = keys.some((key) => {
+						return currentPluginState[key] !== meta[key];
+					});
+
+					if (changed) {
+						const newState = { ...currentPluginState, ...meta };
+
+						dispatch(pluginKey, newState);
+						return newState;
+					}
+				}
+				return currentPluginState;
+			},
+		},
+	});
+};

package/src/tablePlugin.tsx

@@ -18,6 +18,7 @@ import {
 } 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 { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
@@ -61,6 +62,10 @@ import { createPlugin as createFlexiResizingPlugin } from './pm-plugins/table-re
 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,
@@ -79,6 +84,7 @@ import FloatingDragMenu from './ui/FloatingDragMenu';
 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';
 
@@ -109,6 +115,14 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 			// When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
 			options?.isCommentEditor);
 
+	const isTableSelectorEnabled =
+		// eslint-disable-next-line @atlaskit/platform/no-preconditioning
+		!options?.isChromelessEditor &&
+		!options?.isCommentEditor &&
+		options?.getEditorFeatureFlags?.().tableSelector &&
+		editorExperiment('platform_editor_controls', 'variant1') &&
+		fg('platform_editor_controls_table_picker');
+
 	return {
 		name: 'table',
 
@@ -487,6 +501,11 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 						});
 					},
 				},
+				{
+					name: 'tableSizeSelectorPlugin',
+					plugin: ({ dispatch }) =>
+						isTableSelectorEnabled ? createSizeSelectorPlugin(dispatch) : undefined,
+				},
 			];
 
 			// Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
@@ -529,6 +548,7 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 							tableResizingPluginState: tableResizingPluginKey,
 							stickyHeadersState: stickyHeadersPluginKey,
 							dragAndDropState: dragAndDropPluginKey,
+							sizeSelectorPluginState: sizeSelectorPluginKey,
 						}}
 						render={({
 							tableResizingPluginState: resizingPluginState,
@@ -536,6 +556,7 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 							tablePluginState,
 							tableWidthPluginState,
 							dragAndDropState,
+							sizeSelectorPluginState,
 						}) => {
 							const isColumnResizing = resizingPluginState?.dragging;
 							const isTableResizing = tableWidthPluginState?.resizing;
@@ -543,6 +564,7 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 							const resizingTableRef = tableWidthPluginState?.tableRef;
 							const isResizing = isColumnResizing || isTableResizing;
 							const widthToWidest = tablePluginState?.widthToWidest;
+							const isSizeSelectorOpen = sizeSelectorPluginState?.isSelectorOpen;
 
 							const {
 								tableNode,
@@ -695,6 +717,24 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 												offset={[0, 10]}
 											/>
 										)}
+
+									{isTableSelectorEnabled && isSizeSelectorOpen && (
+										<SizeSelector
+											api={api}
+											isOpenedByKeyboard={false}
+											popupsMountPoint={popupsMountPoint}
+											target={
+												sizeSelectorPluginState?.targetRef ??
+												getDomRefFromSelection(
+													editorView,
+													ACTION_SUBJECT_ID.PICKER_TABLE_SIZE,
+													api?.analytics?.actions.fireAnalyticsEvent,
+												)
+											}
+											popupsBoundariesElement={popupsBoundariesElement}
+											popupsScrollableElement={popupsScrollableElement}
+										/>
+									)}
 								</>
 							);
 						}}
@@ -714,6 +754,15 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 					keyshortcut: tooltip(toggleTable),
 					icon: () => <IconTable />,
 					action(insert, state) {
+						if (isTableSelectorEnabled) {
+							const tr = insert('');
+							tr.setMeta(sizeSelectorPluginKey, {
+								isSelectorOpen: true,
+							});
+
+							return tr;
+						}
+
 						// see comment on tablesPlugin.getSharedState on usage
 						const tableState = api?.table?.sharedState.currentState();
 						const tableNodeProps = {

package/src/ui/SizeSelector/index.tsx

@@ -0,0 +1,74 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { jsx } from '@emotion/react';
+
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { TableSelectorPopup, type TableSelectorPopupProps } from '@atlaskit/editor-common/ui';
+
+import { pluginKey } from '../../pm-plugins/table-size-selector';
+import { TablePlugin } from '../../tablePluginType';
+
+interface SizeSelectorProps
+	extends Omit<TableSelectorPopupProps, 'handleClickOutside' | 'onSelection' | 'unUnmount'> {
+	api?: ExtractInjectionAPI<TablePlugin>;
+}
+
+const DEFAULT_TABLE_SELECTOR_COLS = 3;
+const DEFAULT_TABLE_SELECTOR_ROWS = 3;
+
+export const SizeSelector = ({
+	api,
+	target,
+	popupsMountPoint,
+	popupsBoundariesElement,
+	popupsScrollableElement,
+}: SizeSelectorProps) => {
+	const closeSelectorPopup = useCallback(() => {
+		api?.core.actions.execute(({ tr }) => {
+			tr.setMeta(pluginKey, {
+				isSelectorOpen: false,
+			});
+
+			return tr;
+		});
+	}, [api]);
+
+	const onSelection = useCallback(
+		(rowsCount: number, colsCount: number) => {
+			api?.core.actions.execute(({ tr }) => {
+				api?.table.commands.insertTableWithSize(rowsCount, colsCount)({ tr });
+
+				tr.setMeta(pluginKey, {
+					isSelectorOpen: false,
+				});
+
+				return tr;
+			});
+		},
+		[api],
+	);
+
+	const onUnmount = () => {
+		api?.core.actions.focus();
+	};
+
+	return (
+		<TableSelectorPopup
+			defaultSize={{ row: DEFAULT_TABLE_SELECTOR_ROWS, col: DEFAULT_TABLE_SELECTOR_COLS }}
+			target={target}
+			onUnmount={onUnmount}
+			onSelection={onSelection}
+			popupsMountPoint={popupsMountPoint}
+			popupsScrollableElement={popupsScrollableElement}
+			popupsBoundariesElement={popupsBoundariesElement}
+			isOpenedByKeyboard={true}
+			handleClickOutside={closeSelectorPopup}
+			handleEscapeKeydown={closeSelectorPopup}
+		/>
+	);
+};