@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
567 lines (557 loc) • 25.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _reactIntlNext = require("react-intl-next");
var _analytics = require("@atlaskit/editor-common/analytics");
var _messages = require("@atlaskit/editor-common/messages");
var _styles = require("@atlaskit/editor-common/styles");
var _uiColor = require("@atlaskit/editor-common/ui-color");
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
var _userIntent = require("@atlaskit/editor-common/user-intent");
var _utils = require("@atlaskit/editor-common/utils");
var _editorPalette = require("@atlaskit/editor-palette");
var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
var _tableMap = require("@atlaskit/editor-tables/table-map");
var _utils2 = require("@atlaskit/editor-tables/utils");
var _paintBucketEditorBackgroundColor = _interopRequireDefault(require("@atlaskit/icon/core/migration/paint-bucket--editor-background-color"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _primitives = require("@atlaskit/primitives");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
var _commands = require("../../pm-plugins/commands");
var _commandsWithAnalytics = require("../../pm-plugins/commands/commands-with-analytics");
var _commands2 = require("../../pm-plugins/drag-and-drop/commands");
var _pluginFactory = require("../../pm-plugins/drag-and-drop/plugin-factory");
var _pluginFactory2 = require("../../pm-plugins/plugin-factory");
var _dragMenu = require("../../pm-plugins/utils/drag-menu");
var _nodes = require("../../pm-plugins/utils/nodes");
var _selection = require("../../pm-plugins/utils/selection");
var _types = require("../../types");
var _consts = require("../consts");
var _DropdownMenu = require("./DropdownMenu");
var _styles2 = require("./styles");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/* eslint-disable @atlaskit/design-system/prefer-primitives */
/**
* @jsxRuntime classic
* @jsx jsx
*/
/** @jsxFrag */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
var MapDragMenuOptionIdToMessage = {
add_row_above: {
message: _messages.tableMessages.addRowAbove,
plural: null
},
add_row_below: {
message: _messages.tableMessages.addRowBelow,
plural: null
},
add_column_left: {
message: _messages.tableMessages.addColumnLeft,
plural: null
},
add_column_right: {
message: _messages.tableMessages.addColumnRight,
plural: null
},
distribute_columns: {
message: _messages.tableMessages.distributeColumns,
plural: 'noOfCols'
},
clear_cells: {
message: _messages.tableMessages.clearCells,
plural: 'noOfCells'
},
delete_row: {
message: _messages.tableMessages.removeRows,
plural: 'noOfRows'
},
delete_column: {
message: _messages.tableMessages.removeColumns,
plural: 'noOfCols'
},
move_column_left: {
message: _messages.tableMessages.moveColumnLeft,
plural: 'noOfCols'
},
move_column_right: {
message: _messages.tableMessages.moveColumnRight,
plural: 'noOfCols'
},
move_row_up: {
message: _messages.tableMessages.moveRowUp,
plural: 'noOfRows'
},
move_row_down: {
message: _messages.tableMessages.moveRowDown,
plural: 'noOfRows'
},
sort_column_asc: {
message: _messages.tableMessages.sortColumnIncreasing,
plural: null
},
sort_column_desc: {
message: _messages.tableMessages.sortColumnDecreasing,
plural: null
}
};
var getGroupedDragMenuConfig = function getGroupedDragMenuConfig() {
var groupedDragMenuConfig = [['add_row_above', 'add_row_below', 'add_column_left', 'add_column_right', 'distribute_columns', 'clear_cells', 'delete_row', 'delete_column'], ['move_column_left', 'move_column_right', 'move_row_up', 'move_row_down']];
var sortColumnItems = ['sort_column_asc', 'sort_column_desc'];
groupedDragMenuConfig.unshift(sortColumnItems);
return groupedDragMenuConfig;
};
var elementBeforeIconStyles = (0, _primitives.xcss)({
marginRight: 'space.negative.075',
display: 'flex'
});
var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect) {
var groupedDragMenuConfig = getGroupedDragMenuConfig();
var menuItemsArr = (0, _toConsumableArray2.default)(Array(groupedDragMenuConfig.length)).map(function () {
return [];
});
var menuCallback = {};
dragMenuConfig.forEach(function (item) {
var _MapDragMenuOptionIdT;
var menuGroupIndex = groupedDragMenuConfig.findIndex(function (group) {
return group.includes(item.id);
});
if (menuGroupIndex === -1) {
return;
}
var isPlural = Boolean((_MapDragMenuOptionIdT = MapDragMenuOptionIdToMessage[item.id]) === null || _MapDragMenuOptionIdT === void 0 ? void 0 : _MapDragMenuOptionIdT.plural);
var plural = 0;
if (isPlural && selectionRect) {
var top = selectionRect.top,
bottom = selectionRect.bottom,
right = selectionRect.right,
left = selectionRect.left;
switch (MapDragMenuOptionIdToMessage[item.id].plural) {
case 'noOfCols':
{
plural = right - left;
break;
}
case 'noOfRows':
{
plural = bottom - top;
break;
}
case 'noOfCells':
{
plural = Math.max(right - left, bottom - top);
break;
}
}
}
var options = isPlural ? {
0: plural
} : undefined;
menuItemsArr[menuGroupIndex].push({
key: item.id,
content: formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options),
value: {
name: item.id
},
isDisabled: item.disabled,
elemBefore: item.icon ? (0, _react2.jsx)(_primitives.Box, {
xcss: elementBeforeIconStyles
}, (0, _react2.jsx)(item.icon, {
color: "currentColor",
spacing: "spacious",
label: formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options),
LEGACY_fallbackIcon: item.iconFallback ? item.iconFallback : undefined
})) : undefined,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
elemAfter: item.keymap ? (0, _react2.jsx)("div", {
css: _shortcut.shortcutStyle
}, item.keymap) : undefined
});
item.onClick && (menuCallback[item.id] = item.onClick);
});
var menuItems = menuItemsArr.reduce(function (acc, curr) {
(curr === null || curr === void 0 ? void 0 : curr.length) > 0 && acc.push({
items: curr
});
return acc;
}, []);
return {
menuItems: menuItems,
menuCallback: menuCallback
};
};
var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
var _tableMap$hasMergedCe, _pluginConfig$allowBa;
var _ref$direction = _ref.direction,
direction = _ref$direction === void 0 ? 'row' : _ref$direction,
index = _ref.index,
target = _ref.target,
isOpen = _ref.isOpen,
editorView = _ref.editorView,
tableNode = _ref.tableNode,
targetCellPosition = _ref.targetCellPosition,
getEditorContainerWidth = _ref.getEditorContainerWidth,
api = _ref.api,
editorAnalyticsAPI = _ref.editorAnalyticsAPI,
pluginConfig = _ref.pluginConfig,
formatMessage = _ref.intl.formatMessage,
fitHeight = _ref.fitHeight,
fitWidth = _ref.fitWidth,
mountPoint = _ref.mountPoint,
scrollableElement = _ref.scrollableElement,
boundariesElement = _ref.boundariesElement,
isTableScalingEnabled = _ref.isTableScalingEnabled,
shouldUseIncreasedScalingPercent = _ref.shouldUseIncreasedScalingPercent,
isTableFixedColumnWidthsOptionEnabled = _ref.isTableFixedColumnWidthsOptionEnabled,
ariaNotifyPlugin = _ref.ariaNotifyPlugin,
isCommentEditor = _ref.isCommentEditor;
var state = editorView.state,
dispatch = editorView.dispatch;
var selection = state.selection;
var tableMap = tableNode ? _tableMap.TableMap.get(tableNode) : undefined;
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isSubmenuOpen = _useState2[0],
setIsSubmenuOpen = _useState2[1];
var _getPluginState = (0, _pluginFactory.getPluginState)(state),
isKeyboardModeActive = _getPluginState.isKeyboardModeActive;
var selectionRect = (0, _utils2.isSelectionType)(selection, 'cell') ?
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
(0, _utils2.getSelectionRect)(selection) : (0, _utils2.findCellRectClosestToPos)(selection.$from);
var hasMergedCellsInTable = (_tableMap$hasMergedCe = tableMap === null || tableMap === void 0 ? void 0 : tableMap.hasMergedCells()) !== null && _tableMap$hasMergedCe !== void 0 ? _tableMap$hasMergedCe : false;
var allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, api, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, ariaNotifyPlugin, isCommentEditor);
var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect),
menuItems = _convertToDropdownIte.menuItems,
menuCallback = _convertToDropdownIte.menuCallback;
var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
var handleSubMenuRef = function handleSubMenuRef(ref) {
var parent = (0, _utils.closestElement)(
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
editorView.dom, '.fabric-editor-popup-scroll-parent');
if (!parent && (0, _platformFeatureFlags.fg)('platform_editor_fix_table_menus_jira')) {
parent = (0, _utils.closestElement)(
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
editorView.dom, '.ak-editor-content-area');
}
if (!(parent && ref)) {
return;
}
var boundariesRect = parent.getBoundingClientRect();
var rect = ref.getBoundingClientRect();
if ((0, _platformFeatureFlags.fg)('platform_editor_fix_table_menus_jira')) {
if (!!mountPoint) {
return;
}
var offsetParent = ref === null || ref === void 0 ? void 0 : ref.offsetParent;
if (!offsetParent) {
return;
}
var offsetParentRect = offsetParent.getBoundingClientRect();
var rightOverflow = offsetParentRect.right + rect.width - boundariesRect.right;
var leftOverflow = boundariesRect.left - (offsetParentRect.left - rect.width);
if (rightOverflow > leftOverflow) {
ref.style.left = "-".concat(rect.width, "px");
}
// if it overflows regardless of side, let it overlap with the parent menu
if (leftOverflow > 0 && rightOverflow > 0) {
if (rightOverflow < leftOverflow) {
ref.style.left = "".concat(offsetParentRect.width - rightOverflow, "px");
} else {
ref.style.left = "-".concat(rect.width - leftOverflow, "px");
}
}
} else {
if (rect.left + rect.width > boundariesRect.width) {
ref.style.left = "-".concat(rect.width, "px");
}
}
};
var setColor = function setColor(color) {
var state = editorView.state,
dispatch = editorView.dispatch;
(0, _commandsWithAnalytics.setColorWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, color)(state, dispatch);
closeMenu();
setIsSubmenuOpen(false);
};
var createBackgroundColorMenuItem = function createBackgroundColorMenuItem() {
var _node$attrs;
var _getTablePluginState = (0, _pluginFactory2.getPluginState)(editorView.state),
targetCellPosition = _getTablePluginState.targetCellPosition;
var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
var background = (0, _editorPalette.hexToEditorBackgroundPaletteColor)((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(_uiColor.cellBackgroundColorPalette, background, _consts.colorPalletteColumns),
selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
return {
key: 'background',
content: formatMessage(_messages.tableMessages.backgroundColor),
value: {
name: 'background'
},
elemBefore: (0, _react2.jsx)(_primitives.Box, {
xcss: elementBeforeIconStyles
}, (0, _react2.jsx)(_paintBucketEditorBackgroundColor.default, {
color: "currentColor",
spacing: "spacious",
label: formatMessage(_messages.tableMessages.backgroundColor)
})),
elemAfter: (0, _react2.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: _styles.DropdownMenuSharedCssClassName.SUBMENU
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
,
css: (0, _styles2.dragMenuBackgroundColorStyles)()
}, (0, _react2.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
css: (0, _styles2.cellColourPreviewStyles)(background)
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: _types.TableCssClassName.DRAG_SUBMENU_ICON
}), isSubmenuOpen &&
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
(0, _react2.jsx)("div", {
className: _types.TableCssClassName.DRAG_SUBMENU,
ref: handleSubMenuRef
}, (0, _react2.jsx)(_uiMenu.ArrowKeyNavigationProvider, {
type: _uiMenu.ArrowKeyNavigationType.COLOR,
selectedRowIndex: selectedRowIndex,
selectedColumnIndex: selectedColumnIndex,
handleClose: function handleClose() {
var keyboardEvent = new KeyboardEvent('keydown', {
key: 'ArrowDown',
bubbles: true
});
setIsSubmenuOpen(false);
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
target === null || target === void 0 || target.focus();
target === null || target === void 0 || target.dispatchEvent(keyboardEvent);
},
isPopupPositioned: true,
isOpenedByKeyboard: isKeyboardModeActive
}, (0, _react2.jsx)(_uiColor.ColorPalette, {
cols: _consts.colorPalletteColumns,
onClick: function onClick(color) {
setColor(color);
},
selectedColor: background,
paletteOptions: {
palette: _uiColor.cellBackgroundColorPalette,
paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages,
hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
}
}))))
};
};
var toggleHeaderColumn = function toggleHeaderColumn() {
(0, _commandsWithAnalytics.toggleHeaderColumnWithAnalytics)(editorAnalyticsAPI)(state, dispatch);
};
var toggleHeaderRow = function toggleHeaderRow() {
(0, _commandsWithAnalytics.toggleHeaderRowWithAnalytics)(editorAnalyticsAPI)(state, dispatch);
};
var toggleRowNumbers = function toggleRowNumbers() {
(0, _commandsWithAnalytics.toggleNumberColumnWithAnalytics)(editorAnalyticsAPI)(state, dispatch);
};
var createHeaderRowColumnMenuItem = function createHeaderRowColumnMenuItem(direction) {
return direction === 'column' ? {
key: 'header_column',
content: formatMessage(_messages.tableMessages.headerColumn),
value: {
name: 'header_column'
},
elemAfter:
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
(0, _react2.jsx)("div", {
css: _styles2.toggleStyles
}, (0, _react2.jsx)(_toggle.default, {
id: "toggle-header-column",
label: (0, _expValEquals.expValEquals)('platform_editor_enghealth_table_plugin_lable_rule', 'isEnabled', true) ? formatMessage(_messages.tableMessages.headerColumn) : undefined,
onChange: toggleHeaderColumn,
isChecked: (0, _nodes.checkIfHeaderColumnEnabled)(selection)
}))
} : {
key: 'header_row',
content: formatMessage(_messages.tableMessages.headerRow),
value: {
name: 'header_row'
},
elemAfter:
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
(0, _react2.jsx)("div", {
css: _styles2.toggleStyles
}, (0, _react2.jsx)(_toggle.default, {
id: "toggle-header-row",
label: (0, _expValEquals.expValEquals)('platform_editor_enghealth_table_plugin_lable_rule', 'isEnabled', true) ? formatMessage(_messages.tableMessages.headerRow) : undefined,
onChange: toggleHeaderRow,
isChecked: (0, _nodes.checkIfHeaderRowEnabled)(selection)
}))
};
};
var createRowNumbersMenuItem = function createRowNumbersMenuItem() {
return {
key: 'row_numbers',
content: formatMessage(_messages.tableMessages.rowNumbers),
value: {
name: 'row_numbers'
},
elemAfter:
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
(0, _react2.jsx)("div", {
css: _styles2.toggleStyles
}, (0, _react2.jsx)(_toggle.default, {
id: "toggle-row-numbers",
label: (0, _expValEquals.expValEquals)('platform_editor_enghealth_table_plugin_lable_rule', 'isEnabled', true) ? formatMessage(_messages.tableMessages.numberedColumn) : undefined,
onChange: toggleRowNumbers,
isChecked: (0, _nodes.checkIfNumberColumnEnabled)(selection)
}))
};
};
/**
* This function is to check if the menu should be closed or not.
* As when continously clicking on tyle handle on different rows/columns,
* should open the menu corresponding to the position of the drag handle.
* @returns true when the menu should be closed, false otherwise
*/
var shouldCloseMenu = function shouldCloseMenu(state) {
var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
previousOpenState = _getPluginState2.isDragMenuOpen,
previousDragMenuDirection = _getPluginState2.dragMenuDirection,
previousDragMenuIndex = _getPluginState2.dragMenuIndex;
// menu open but menu direction changed, means user clicked on drag handle of different row/column
// menu open menu direction not changed, but index changed, means user clicked on drag handle of same row/column, different cells.
// 2 scenarios above , menu should not be closed.
if (previousOpenState === true && previousDragMenuDirection !== direction || previousOpenState === true && previousDragMenuDirection === direction && previousDragMenuIndex !== index) {
return false;
} else {
return true;
}
};
var closeMenu = function closeMenu() {
var focusTarget = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'handle';
var state = editorView.state,
dispatch = editorView.dispatch;
if (shouldCloseMenu(state)) {
if (target && focusTarget === 'handle') {
target === null || target === void 0 || target.focus();
} else {
editorView.dom.focus();
}
(0, _commands2.toggleDragMenu)(false, direction, index)(state, dispatch);
}
};
var handleMenuItemActivated = function handleMenuItemActivated(_ref2) {
var _menuCallback$item$va;
var item = _ref2.item;
(_menuCallback$item$va = menuCallback[item.value.name]) === null || _menuCallback$item$va === void 0 || _menuCallback$item$va.call(menuCallback, state, dispatch);
switch (item.value.name) {
case 'background':
setIsSubmenuOpen(!isSubmenuOpen);
break;
case 'header_column':
toggleHeaderColumn();
break;
case 'header_row':
toggleHeaderRow();
break;
case 'row_numbers':
toggleRowNumbers();
break;
default:
break;
}
if (['header_column', 'header_row', 'row_numbers', 'background'].indexOf(item.value.name) <= -1) {
closeMenu('editor');
}
};
var handleItemMouseEnter = function handleItemMouseEnter(_ref3) {
var _item$value$name;
var item = _ref3.item;
if (!selectionRect) {
return;
}
if (item.value.name === 'background' && !isSubmenuOpen) {
setIsSubmenuOpen(true);
}
if (!((_item$value$name = item.value.name) !== null && _item$value$name !== void 0 && _item$value$name.startsWith('delete'))) {
return;
}
(item.value.name === 'delete_column' ? (0, _commands.hoverColumns)((0, _selection.getSelectedColumnIndexes)(selectionRect), true) : (0, _commands.hoverRows)((0, _selection.getSelectedRowIndexes)(selectionRect), true))(state, dispatch);
};
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var handleItemMouseLeave = function handleItemMouseLeave(_ref4) {
var item = _ref4.item;
if (item.value.name === 'background' && isSubmenuOpen) {
setIsSubmenuOpen(false);
}
if (['sort_column_asc', 'sort_column_desc', 'delete_column', 'delete_row'].indexOf(item.value.name) > -1) {
(0, _commands.clearHoverSelection)()(state, dispatch);
}
};
(0, _react.useEffect)(function () {
// focus on first menu item automatically when menu renders
// and user is using keyboard
if (isOpen && target && isKeyboardModeActive) {
var keyboardEvent = new KeyboardEvent('keydown', {
key: 'ArrowDown',
bubbles: true
});
target.dispatchEvent(keyboardEvent);
}
}, [isOpen, target, isKeyboardModeActive]);
if (!menuItems) {
return null;
}
if (allowBackgroundColor) {
menuItems[1].items.unshift(createBackgroundColorMenuItem());
}
// If first row, add toggle for Header row, default is true
// If first column, add toggle for Header column, default is false
if (index === 0) {
menuItems.push({
items: [createHeaderRowColumnMenuItem(direction)]
});
}
// All rows, add toggle for numbered rows, default is false
if (direction === 'row') {
index === 0 ? menuItems[menuItems.length - 1].items.push(createRowNumbersMenuItem()) : menuItems.push({
items: [createRowNumbersMenuItem()]
});
}
var Menu = (0, _react2.jsx)(_DropdownMenu.DropdownMenu, {
disableKeyboardHandling: isSubmenuOpen,
section: {
hasSeparator: true
},
items: menuItems,
onItemActivated: handleMenuItemActivated,
onMouseEnter: handleItemMouseEnter,
onMouseLeave: handleItemMouseLeave,
handleClose: closeMenu,
fitHeight: fitHeight,
fitWidth: fitWidth,
direction: direction,
boundariesElement: boundariesElement,
scrollableElement: scrollableElement
});
return isToolbarAIFCEnabled || (0, _expValEquals.expValEquals)('platform_editor_lovability_user_intent', 'isEnabled', true) ? (0, _react2.jsx)(_userIntent.UserIntentPopupWrapper, {
api: api,
userIntent: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_lovability_user_intent', 'isEnabled', true) ? 'tablePopupOpen' : undefined
}, Menu) : Menu;
});
var _default = exports.default = (0, _reactIntlNext.injectIntl)(DragMenu);