@atlaskit/editor-plugin-table 7.16.8 → 7.16.10

package/dist/esm/nodeviews/TableResizer.js

@@ -120,20 +120,26 @@ export var TableResizer = function TableResizer(_ref) {
     startMeasure = _useMeasureFramerate.startMeasure,
     endMeasure = _useMeasureFramerate.endMeasure,
     countFrames = _useMeasureFramerate.countFrames;
+  var excludeGuidelineConfig = useMemo(function () {
+    return {
+      innerGuidelines: !!isTableAlignmentEnabled,
+      breakoutPoints: !!(isTableAlignmentEnabled && tableState !== null && tableState !== void 0 && tableState.isFullWidthModeEnabled)
+    };
+  }, [tableState, isTableAlignmentEnabled]);
   var updateActiveGuidelines = useCallback(function (_ref3) {
     var gap = _ref3.gap,
       keys = _ref3.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
+      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth);
       displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline]);
+  }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline]);
   var guidelineSnaps = useMemo(function () {
     return snappingEnabled ? {
-      x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths
+      x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
     } : undefined;
-  }, [snappingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth]);
+  }, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth]);
   var switchToCenterAlignment = useCallback(function (pos, node, newWidth, state, dispatch) {
     if (isTableAlignmentEnabled && node && node.attrs.layout === ALIGN_START && newWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH &&
     // We don't want to switch alignment in Full-width editor
@@ -183,12 +189,12 @@ export var TableResizer = function TableResizer(_ref) {
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
+    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (onResizeStart) {
       onResizeStart();
     }
-  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline, onResizeStart]);
+  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, onResizeStart]);
   var handleResize = useCallback(function (originalState, delta) {
     var _node$attrs$localId, _node$attrs;
     countFrames();
@@ -208,14 +214,14 @@ export var TableResizer = function TableResizer(_ref) {
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
-    var closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
+    var closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
     updateActiveGuidelines(closestSnap);
 
     // When snapping to the full width guideline, resize the table to be 1800px
     var state = editorView.state,
       dispatch = editorView.dispatch;
     var currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
-    var fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled).filter(function (guideline) {
+    var fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig).filter(function (guideline) {
       return guideline.isFullWidth;
     })[0];
     var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
@@ -225,7 +231,7 @@ export var TableResizer = function TableResizer(_ref) {
     }, updateWidthToWidest(_defineProperty({}, currentTableNodeLocalId, shouldUpdateWidthToWidest)))(state, dispatch);
     updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
     return newWidth;
-  }, [countFrames, isTableScalingEnabled, isTableAlignmentEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
+  }, [countFrames, isTableScalingEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
   var scheduleResize = useMemo(function () {
     return rafSchd(handleResize);
   }, [handleResize]);

package/dist/esm/toolbar.js

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
@@ -320,7 +323,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
         var alignmentMenu;
         var isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
-        alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI) : [];
+        alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth) : [];
         var cellItems;
         cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled);
         var columnSettingsItems;
@@ -584,7 +587,7 @@ var highlightColumnsHandler = function highlightColumnsHandler(state, dispatch)
   }
   return false;
 };
-export var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6, editorAnalyticsAPI) {
+export var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6, editorAnalyticsAPI, getEditorContainerWidth) {
   var formatMessage = _ref6.formatMessage;
   var tableObject = findTable(editorState.selection);
   if (!tableObject) {
@@ -610,14 +613,16 @@ export var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editor
       value = alignmentIcon.value,
       icon = alignmentIcon.icon;
     var currentLayout = tableObject.node.attrs.layout;
-    return {
+    return _objectSpread({
       id: id,
       type: 'button',
       icon: icon,
       title: formatMessage(layoutToMessages[value]),
       selected: normaliseAlignment(currentLayout) === value,
       onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI)(value, currentLayout, INPUT_METHOD.FLOATING_TB)
-    };
+    }, isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth) && {
+      disabled: value !== 'center'
+    });
   });
   var alignmentItemOptions = {
     render: function render(props) {
@@ -644,4 +649,11 @@ export var getSelectedAlignmentIcon = function getSelectedAlignmentIcon(alignmen
   return alignmentIcons.find(function (icon) {
     return icon.value === normaliseAlignment(selectedAlignment);
   });
+};
+export var isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth) {
+  var lineLength = getEditorContainerWidth().lineLength;
+  if (selectedNode && lineLength && selectedNode.attrs.width > lineLength) {
+    return true;
+  }
+  return false;
 };

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

@@ -14,6 +14,7 @@ export var ColumnResizeWidget = function ColumnResizeWidget(_ref) {
     formatMessage = _useIntl.formatMessage;
   if (!includeTooltip) {
     return jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: TableCssClassName.RESIZE_HANDLE_DECORATION,
       "data-start-index": startIndex,
       "data-end-index": endIndex
@@ -30,6 +31,7 @@ export var ColumnResizeWidget = function ColumnResizeWidget(_ref) {
     mousePosition: "auto-start"
   }, function (tooltipProps) {
     return jsx("div", _extends({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: TableCssClassName.RESIZE_HANDLE_DECORATION,
       "data-start-index": startIndex,
       "data-end-index": endIndex

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

@@ -146,7 +146,9 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
   }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells]);
   var showDragMenuAnchorId = isRow ? 'drag-handle-button-row' : 'drag-handle-button-column';
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
-    type: "button",
+    type: "button"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE,
     "data-testid": "table-drag-handle-clickable-zone-button",
     style: {
@@ -171,7 +173,9 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     onClick: onClick
   }), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    id: isDragMenuTarget ? showDragMenuAnchorId : undefined,
+    id: isDragMenuTarget ? showDragMenuAnchorId : undefined
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: classnames(ClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, _defineProperty({}, ClassName.DRAG_HANDLE_DISABLED, hasMergedCells)),
     ref: dragHandleDivRef,
     style: {
@@ -198,7 +202,10 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     }
   }, appearance !== 'placeholder' ?
   //  cannot block pointer events in Firefox as it breaks Dragging functionality
-  browser.gecko ? /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps) : /*#__PURE__*/React.createElement("span", {
+  browser.gecko ? /*#__PURE__*/React.createElement(HandleIconComponent, handleIconProps) :
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  React.createElement("span", {
     style: {
       pointerEvents: 'none'
     }

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

@@ -23,6 +23,7 @@ export var DragPreview = function DragPreview(_ref) {
     }
   }, /*#__PURE__*/React.createElement(DragInMotionIcon, {
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       position: 'absolute',
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginLeft: "".concat(marginLeft, "px"),

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

@@ -91,19 +91,26 @@ export var FixedButton = function FixedButton(_ref2) {
   React.createElement("div", {
     ref: observerTargetRef,
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       position: 'absolute',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       top: "var(--ds-space-0, 0px)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       left: "var(--ds-space-0, 0px)",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       width: "var(--ds-space-250, 20px)",
       // BUTTON_WIDTH
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       height: "var(--ds-space-250, 20px)" // BUTTON_WIDTH
     }
   }, /*#__PURE__*/React.createElement("div", {
     ref: fixedButtonRef,
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       position: 'fixed',
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: stickyHeader.top + stickyHeader.padding + offset * 2,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       zIndex: akEditorTableCellOnStickyHeaderZIndex,
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       left: calcLeftPos({
@@ -112,10 +119,14 @@ export var FixedButton = function FixedButton(_ref2) {
         cellRefWidth: targetCellRef.clientWidth,
         offset: offset
       }),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       width: "var(--ds-space-250, 20px)",
       // BUTTON_WIDTH
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       height: "var(--ds-space-250, 20px)" // BUTTON_WIDTH
-    },
+    }
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: ClassName.CONTEXTUAL_MENU_BUTTON_FIXED
   }, children)), mountTo);
 };

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

@@ -46,7 +46,9 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
   var labelCellOptions = formatMessage(messages.cellOptions);
   var button = jsx("div", {
     css: [tableFloatingCellButtonStyles(), isContextualMenuOpen && tableFloatingCellButtonSelectedStyles()]
-  }, jsx(ToolbarButton, {
+  }, jsx(ToolbarButton
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: ClassName.CONTEXTUAL_MENU_BUTTON,
     selected: isContextualMenuOpen,
     title: labelCellOptions,

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

@@ -89,12 +89,17 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
             label: formatMessage(messages.backgroundColor),
             size: "medium"
           })) : undefined,
-          elemAfter: jsx("div", {
+          elemAfter:
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+          jsx("div", {
             className: DropdownMenuSharedCssClassName.SUBMENU
           }, jsx("div", {
-            css: cellColourPreviewStyles(background),
+            css: cellColourPreviewStyles(background)
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+            ,
             className: isDragAndDropEnabled ? ClassName.CONTEXTUAL_MENU_ICON_SMALL : ClassName.CONTEXTUAL_MENU_ICON
           }), isSubmenuOpen && jsx("div", {
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className: ClassName.CONTEXTUAL_SUBMENU,
             ref: _this.handleSubMenuRef
           }, jsx(ColorPalette, {

package/dist/esm/ui/FloatingDeleteButton/DeleteButton.js

@@ -9,7 +9,10 @@ var DeleteButton = function DeleteButton(_ref) {
     removeLabel = _ref.removeLabel,
     formatMessage = _ref.intl.formatMessage;
   return /*#__PURE__*/React.createElement("div", {
-    className: ClassName.CONTROLS_DELETE_BUTTON_WRAP,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ClassName.CONTROLS_DELETE_BUTTON_WRAP
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: style,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
@@ -17,7 +20,9 @@ var DeleteButton = function DeleteButton(_ref) {
     type: "button",
     "aria-label": formatMessage(removeLabel, {
       0: 1
-    }),
+    })
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: ClassName.CONTROLS_DELETE_BUTTON,
     onMouseDown: onClick,
     onMouseMove: function onMouseMove(e) {

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

@@ -198,9 +198,11 @@ var FloatingDeleteButton = /*#__PURE__*/function (_Component) {
           });
           return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
             style: {
+              // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
               position: 'fixed',
               // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
               top: pos.top,
+              // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
               zIndex: stickyRowZIndex,
               // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
               left: rect.left + (pos.left || 0) - (this.state.selectionType === 'column' ? this.state.scrollLeft : 0) - (this.props.isNumberColumnEnabled ? akEditorTableNumberColumnWidth : 0)

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

@@ -251,12 +251,17 @@ export var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
         size: "medium"
       })),
       elemAfter: jsx("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: DropdownMenuSharedCssClassName.SUBMENU,
         css: dragMenuBackgroundColorStyles
       }, jsx("div", {
-        css: cellColourPreviewStyles(background),
+        css: cellColourPreviewStyles(background)
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: ClassName.DRAG_SUBMENU_ICON
-      }), isSubmenuOpen && jsx("div", {
+      }), isSubmenuOpen &&
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      jsx("div", {
         className: ClassName.DRAG_SUBMENU,
         ref: handleSubMenuRef
       }, jsx(ArrowKeyNavigationProvider, {

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

@@ -82,69 +82,73 @@ export var DropdownMenu = function DropdownMenu(_ref) {
       }));
     })));
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "drag-dropdown-menu-wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "drag-dropdown-menu-popup-ref",
-    ref: handleRef
-  }), /*#__PURE__*/React.createElement(Popup, {
-    target: targetRefDiv,
-    mountTo: mountPoint,
-    boundariesElement: boundariesElement,
-    scrollableElement: scrollableElement,
-    onPlacementChanged: function onPlacementChanged(placement) {
-      setPopupPlacement(placement);
-    },
-    fitHeight: fitHeight,
-    fitWidth: fitWidth,
-    zIndex: akEditorFloatingPanelZIndex,
-    offset: [offsetX, offsetY],
-    allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
-  }, disableKeyboardHandling ? innerMenu() : /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
-    closeOnTab: true,
-    type: ArrowKeyNavigationType.MENU,
-    handleClose: function handleClose() {
-      return _handleClose('handle');
-    },
-    onSelection: function onSelection(index) {
-      var results = items.flatMap(function (item) {
-        return 'items' in item ? item.items : item;
-      });
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    React.createElement("div", {
+      className: "drag-dropdown-menu-wrapper"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "drag-dropdown-menu-popup-ref",
+      ref: handleRef
+    }), /*#__PURE__*/React.createElement(Popup, {
+      target: targetRefDiv,
+      mountTo: mountPoint,
+      boundariesElement: boundariesElement,
+      scrollableElement: scrollableElement,
+      onPlacementChanged: function onPlacementChanged(placement) {
+        setPopupPlacement(placement);
+      },
+      fitHeight: fitHeight,
+      fitWidth: fitWidth,
+      zIndex: akEditorFloatingPanelZIndex,
+      offset: [offsetX, offsetY],
+      allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
+    }, disableKeyboardHandling ? innerMenu() : /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+      closeOnTab: true,
+      type: ArrowKeyNavigationType.MENU,
+      handleClose: function handleClose() {
+        return _handleClose('handle');
+      },
+      onSelection: function onSelection(index) {
+        var results = items.flatMap(function (item) {
+          return 'items' in item ? item.items : item;
+        });
 
-      // onSelection is called when any focusable element is 'activated'
-      // this is an issue as some menu items have toggles, which cause the index value
-      // in the callback to be outside of array length.
-      // The logic below normalises the index value based on the number
-      // of menu items with 2 focusable elements, and adjusts the index to ensure
-      // the correct menu item is sent in onItemActivated callback
-      var keys = ['row_numbers', 'header_row', 'header_column'];
-      var doubleItemCount = 0;
-      var firstIndex = results.findIndex(function (value) {
-        return keys.includes(value.key);
-      });
-      if (firstIndex === -1 || index <= firstIndex) {
-        onItemActivated && onItemActivated({
-          item: results[index]
+        // onSelection is called when any focusable element is 'activated'
+        // this is an issue as some menu items have toggles, which cause the index value
+        // in the callback to be outside of array length.
+        // The logic below normalises the index value based on the number
+        // of menu items with 2 focusable elements, and adjusts the index to ensure
+        // the correct menu item is sent in onItemActivated callback
+        var keys = ['row_numbers', 'header_row', 'header_column'];
+        var doubleItemCount = 0;
+        var firstIndex = results.findIndex(function (value) {
+          return keys.includes(value.key);
         });
-        return;
-      }
-      for (var i = firstIndex; i < results.length; i += 1) {
-        if (keys.includes(results[i].key)) {
-          doubleItemCount += 1;
-        }
-        if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
+        if (firstIndex === -1 || index <= firstIndex) {
           onItemActivated && onItemActivated({
-            item: results[i]
+            item: results[index]
           });
           return;
         }
-        if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
-          onItemActivated && onItemActivated({
-            item: results[i]
-          });
-          return;
+        for (var i = firstIndex; i < results.length; i += 1) {
+          if (keys.includes(results[i].key)) {
+            doubleItemCount += 1;
+          }
+          if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
+            onItemActivated && onItemActivated({
+              item: results[i]
+            });
+            return;
+          }
+          if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
+            onItemActivated && onItemActivated({
+              item: results[i]
+            });
+            return;
+          }
         }
       }
-    }
-  }, innerMenu())));
+    }, innerMenu())))
+  );
 };

package/dist/esm/ui/FloatingInsertButton/InsertButton.js

@@ -68,12 +68,16 @@ export var InsertButtonForDragAndDrop = function InsertButtonForDragAndDrop(_ref
     }),
     position: "top"
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: classnames(ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, (_classnames = {}, _defineProperty(_classnames, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, isRow), _defineProperty(_classnames, ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, !isRow), _classnames))
   }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
+    type: "button"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: ClassName.DRAG_CONTROLS_INSERT_BUTTON,
     onMouseDown: onMouseDown
   }, /*#__PURE__*/React.createElement("svg", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: ClassName.CONTROLS_BUTTON_ICON,
     width: "16",
     height: "16",
@@ -84,7 +88,10 @@ export var InsertButtonForDragAndDrop = function InsertButtonForDragAndDrop(_ref
     d: "M8 4C7.44771 4 7 4.44771 7 5V7H5C4.44771 7 4 7.44771 4 8C4 8.55229 4.44771 9 5 9H7V11C7 11.5523 7.44771 12 8 12C8.55229 12 9 11.5523 9 11V9H11C11.5523 9 12 8.55229 12 8C12 7.44771 11.5523 7 11 7H9V5C9 4.44771 8.55229 4 8 4Z",
     fill: "currentColor"
   })))), /*#__PURE__*/React.createElement("div", {
-    className: ClassName.CONTROLS_INSERT_LINE,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ClassName.CONTROLS_INSERT_LINE
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: type === 'row' ? {
       width: getInsertLineWidth(tableRef, true),
       left: "var(--ds-space-150, 12px)"
@@ -95,11 +102,16 @@ export var InsertButtonForDragAndDrop = function InsertButtonForDragAndDrop(_ref
     }
   })));
   var floatingButtonClassName = isRow ? ClassName.CONTROLS_FLOATING_BUTTON_ROW : ClassName.CONTROLS_FLOATING_BUTTON_COLUMN;
-  return /*#__PURE__*/React.createElement("div", {
-    className: floatingButtonClassName
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(ClassName.DRAG_CONTROLS_INSERT_BUTTON_WRAP, " ").concat(ClassName.CONTROLS_INSERT_ROW)
-  }, content));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    React.createElement("div", {
+      className: floatingButtonClassName
+    }, /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: "".concat(ClassName.DRAG_CONTROLS_INSERT_BUTTON_WRAP, " ").concat(ClassName.CONTROLS_INSERT_ROW)
+    }, content))
+  );
 };
 export var DragAndDropInsertButton = injectIntl(InsertButtonForDragAndDrop);
 var InsertButton = function InsertButton(_ref3) {
@@ -117,7 +129,9 @@ var InsertButton = function InsertButton(_ref3) {
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: ClassName.CONTROLS_INSERT_BUTTON_INNER
   }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
+    type: "button"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: ClassName.CONTROLS_INSERT_BUTTON,
     onMouseDown: onMouseDown
   }, /*#__PURE__*/React.createElement("svg", {
@@ -127,7 +141,10 @@ var InsertButton = function InsertButton(_ref3) {
     fill: "currentColor",
     fillRule: "evenodd"
   })))), /*#__PURE__*/React.createElement("div", {
-    className: ClassName.CONTROLS_INSERT_LINE,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ClassName.CONTROLS_INSERT_LINE
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: type === 'row' ? {
       width: getInsertLineWidth(tableRef)
     } : {
@@ -135,10 +152,15 @@ var InsertButton = function InsertButton(_ref3) {
     }
   })));
   var floatingButtonClassName = type === 'column' ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
-  return /*#__PURE__*/React.createElement("div", {
-    className: floatingButtonClassName
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(ClassName.CONTROLS_INSERT_BUTTON_WRAP, " ").concat(ClassName.CONTROLS_INSERT_ROW)
-  }, content));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    React.createElement("div", {
+      className: floatingButtonClassName
+    }, /*#__PURE__*/React.createElement("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: "".concat(ClassName.CONTROLS_INSERT_BUTTON_WRAP, " ").concat(ClassName.CONTROLS_INSERT_ROW)
+    }, content))
+  );
 };
 export default injectIntl(InsertButton);

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

@@ -129,14 +129,23 @@ export var ColumnControls = function ColumnControls(_ref) {
       key: type,
       style: {
         gridColumn: gridColumn,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         gridRow: '1',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         display: 'flex',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         justifyContent: 'center',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         alignItems: 'center',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         height: 'fit-content',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         placeSelf: 'center',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         zIndex: 99,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         width: '100%',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         position: 'relative'
       },
       "data-testid": "table-floating-column-".concat(isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0], "-drag-handle")
@@ -178,15 +187,19 @@ export var ColumnControls = function ColumnControls(_ref) {
   };
   var containerWidth = isNumberColumnEnabled && tableContainerWidth ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth;
   return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: ClassName.DRAG_COLUMN_CONTROLS,
     onMouseMove: handleMouseMove
   }, /*#__PURE__*/React.createElement("div", {
-    ref: columnControlsRef,
+    ref: columnControlsRef
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: ClassName.DRAG_COLUMN_CONTROLS_INNER,
     "data-testid": "table-floating-column-controls",
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       gridTemplateColumns: widths,
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       marginTop: marginTop,
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       width: stickyTop ? containerWidth : undefined,
@@ -201,12 +214,17 @@ export var ColumnControls = function ColumnControls(_ref) {
         gridColumn: "".concat(startIndex + 1, " / span 1")
       },
       "data-start-index": startIndex,
-      "data-end-index": endIndex,
+      "data-end-index": endIndex
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER,
       contentEditable: false,
       key: index
     }, /*#__PURE__*/React.createElement("div", {
-      className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
       style: columnParams.length - 1 === index ? {
         right: '0'
       } : {}

package/dist/esm/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.js

@@ -80,7 +80,9 @@ export var ColumnDropTarget = function ColumnDropTarget(_ref) {
       height: height && "".concat(height, "px"),
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginTop: marginTop && "".concat(marginTop, "px"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       pointerEvents: 'auto',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       flexShrink: 0
     },
     "data-drop-target-index": index,