@atlaskit/editor-plugin-table 7.16.8 → 7.16.9

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 7.16.9
+
+### Patch Changes
+
+-   [#103852](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103852)
+    [`a2972bca7951`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a2972bca7951) -
+    [ux] Table - Disable left align button when table's width is larger than line length
+
 ## 7.16.8
 
 ### Patch Changes

package/dist/cjs/nodeviews/ExternalDropTargets.js

@@ -50,16 +50,20 @@ var ExternalDropTargets = exports.ExternalDropTargets = function ExternalDropTar
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: getTableWrapperWidth(),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       overflow: 'hidden',
+      // 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
       top: "-".concat(_consts.dropTargetExtendedWidth - _styles.tableMarginTop, "px"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       pointerEvents: 'auto',
       zIndex: "".concat(_consts.dropTargetsZIndex)
     },
     "data-testid": "table-floating-column-extended-drop-targets"
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       display: 'flex',
       // move drop targets based on table wrapper scroll
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview

package/dist/cjs/nodeviews/TableComponent.js

@@ -749,7 +749,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var topStickyShadowPosition = isDragAndDropEnabled ? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2 : this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
       var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
         stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar;
-      return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer, {
+      return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      , {
         className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_CONTAINER, (_classnames = {}, (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_SELECTED, (0, _utils2.isTableSelected)(view.state.selection)), _classnames)),
         editorView: view,
         getPos: getPos,
@@ -765,9 +767,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isWholeTableInDanger: isWholeTableInDanger,
         isTableAlignmentEnabled: isTableAlignmentEnabled
       }, /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"
       }), stickyScrollbar && /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
         "data-testid": "sticky-scrollbar-sentinel-top"
       }), allowControls && rowControls, isDragAndDropEnabled && /*#__PURE__*/_react.default.createElement(_ExternalDropTargets.ExternalDropTargets, {
@@ -782,10 +786,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           return ((_this4$wrapper3 = _this4.wrapper) === null || _this4$wrapper3 === void 0 ? void 0 : _this4$wrapper3.clientWidth) || 760;
         }
       }), /*#__PURE__*/_react.default.createElement("div", {
-        contentEditable: false,
-        style: shadowStyle(showBeforeShadow),
+        contentEditable: false
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: shadowStyle(showBeforeShadow)
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: _types.TableCssClassName.TABLE_LEFT_SHADOW
       }), this.state.stickyHeader && /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "".concat(_types.TableCssClassName.TABLE_LEFT_SHADOW, " ").concat(_types.TableCssClassName.TABLE_STICKY_SHADOW),
         style: {
           visibility: showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden',
@@ -793,6 +802,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           paddingBottom: "".concat(isDragAndDropEnabled && "var(--ds-space-025, 2px)")
         }
       }), /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_NODE_WRAPPER),
         ref: function ref(elem) {
           _this4.wrapper = elem;
@@ -807,10 +817,13 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           }
         }
       }, allowControls && colControls), stickyScrollbar && /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
         style: {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           height: "var(--ds-space-250, 20px)",
           // MAX_BROWSER_SCROLLBAR_HEIGHT
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           display: 'none',
           // prevent unwanted scroll during table resize without removing scrollbar container from the dom
           width: isResizing ? "var(--ds-space-0, 0px)" : '100%'
@@ -818,18 +831,26 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react.default.createElement("div", {
         style: {
           width: tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth,
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           height: '100%'
         }
       })), /*#__PURE__*/_react.default.createElement("div", {
-        contentEditable: false,
-        style: shadowStyle(showAfterShadow),
+        contentEditable: false
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
+        style: shadowStyle(showAfterShadow)
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: _types.TableCssClassName.TABLE_RIGHT_SHADOW
       }), this.state.stickyHeader && /*#__PURE__*/_react.default.createElement("div", {
         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
           right: "var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW, " ").concat(_types.TableCssClassName.TABLE_STICKY_SHADOW),
         style: {
           visibility: showAfterShadow && hasHeaderRow ? 'visible' : 'hidden',
@@ -837,9 +858,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           paddingBottom: "".concat(isDragAndDropEnabled && "var(--ds-space-025, 2px)")
         }
       })), /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM,
         "data-testid": "sticky-sentinel-bottom"
       }), stickyScrollbar && /*#__PURE__*/_react.default.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
         "data-testid": "sticky-scrollbar-sentinel-bottom"
       }));

package/dist/cjs/nodeviews/TableContainer.js

@@ -23,8 +23,12 @@ var InnerContainer = exports.InnerContainer = /*#__PURE__*/(0, _react.forwardRef
     node = _ref.node,
     children = _ref.children;
   return /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref,
-    style: style,
+    ref: ref
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: style
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     "data-number-column": node.attrs.isNumberColumnEnabled,
     "data-layout": node.attrs.layout,
@@ -46,10 +50,14 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
   var style = (0, _react.useMemo)(function () {
     return alignment === 'align-start' ? leftAlignStyle : centerAlignStyle;
   }, [alignment]);
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": "table-alignment-container",
-    style: style
-  }, children);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    _react.default.createElement("div", {
+      "data-testid": "table-alignment-container",
+      style: style
+    }, children)
+  );
 };
 var AlignmentTableContainerWrapper = function AlignmentTableContainerWrapper(_ref3) {
   var isTableAlignmentEnabled = _ref3.isTableAlignmentEnabled,
@@ -59,7 +67,9 @@ var AlignmentTableContainerWrapper = function AlignmentTableContainerWrapper(_re
     return /*#__PURE__*/_react.default.createElement("div", {
       "data-testid": "table-alignment-container",
       style: {
+        // 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'
       }
     }, children);
@@ -181,12 +191,18 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
       width: tableWidthRef.current,
       height: resizing ? updateContainerHeight(tableWrapperHeight !== null && tableWrapperHeight !== void 0 ? tableWrapperHeight : 'auto') : 'auto',
       position: isLivePageViewMode ? 'relative' : 'unset'
-    },
+    }
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: _types.TableCssClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
-  }, isLivePageViewMode ? /*#__PURE__*/_react.default.createElement(InnerContainer, {
+  }, isLivePageViewMode ? /*#__PURE__*/_react.default.createElement(InnerContainer
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: className,
-    node: node,
+    node: node
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: {
       width: 'inherit'
     }
@@ -214,7 +230,9 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref5) {
     isTableScalingEnabled = _ref5.isTableScalingEnabled,
     isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled;
   if (isTableResizingEnabled && !isNested) {
-    return /*#__PURE__*/_react.default.createElement(ResizableTableContainer, {
+    return /*#__PURE__*/_react.default.createElement(ResizableTableContainer
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: className,
       node: node,
       containerWidth: editorWidth,
@@ -231,11 +249,14 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref5) {
     }, children);
   }
   return /*#__PURE__*/_react.default.createElement(InnerContainer, {
-    node: node,
+    node: node
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: (0, _classnames.default)(className, {
       'less-padding': editorWidth < _editorSharedStyles.akEditorMobileBreakoutPoint && !isNested
     }),
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       width: 'inherit'
     }
   }, children);

package/dist/cjs/toolbar.js

@@ -5,8 +5,9 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getSelectedAlignmentIcon = exports.getLockBtnConfig = exports.getDistributeConfig = exports.getClosestSelectionRect = exports.getClosestSelectionOrTableRect = exports.getAlignmentOptionsConfig = void 0;
+exports.isLayoutOptionDisabled = exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getSelectedAlignmentIcon = exports.getLockBtnConfig = exports.getDistributeConfig = exports.getClosestSelectionRect = exports.getClosestSelectionOrTableRect = exports.getAlignmentOptionsConfig = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("@emotion/react");
 var _customSteps = require("@atlaskit/custom-steps");
@@ -40,8 +41,8 @@ var _utils4 = require("./utils");
 var _alignment = require("./utils/alignment");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** @jsx jsx */
-
+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) { (0, _defineProperty2.default)(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 */
 var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
   var formatMessage = _ref.formatMessage;
   var optionItem = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33') ? 'item-checkbox' : 'item';
@@ -331,7 +332,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
         var alignmentMenu;
         var isNested = pluginState.tablePos && (0, _utils4.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;
@@ -595,7 +596,7 @@ var highlightColumnsHandler = function highlightColumnsHandler(state, dispatch)
   }
   return false;
 };
-var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6, editorAnalyticsAPI) {
+var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6, editorAnalyticsAPI, getEditorContainerWidth) {
   var formatMessage = _ref6.formatMessage;
   var tableObject = (0, _utils3.findTable)(editorState.selection);
   if (!tableObject) {
@@ -621,14 +622,16 @@ var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function get
       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: (0, _alignment.normaliseAlignment)(currentLayout) === value,
       onClick: (0, _commandsWithAnalytics.setTableAlignmentWithAnalytics)(editorAnalyticsAPI)(value, currentLayout, _analytics.INPUT_METHOD.FLOATING_TB)
-    };
+    }, isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth) && {
+      disabled: value !== 'center'
+    });
   });
   var alignmentItemOptions = {
     render: function render(props) {
@@ -655,4 +658,11 @@ var getSelectedAlignmentIcon = exports.getSelectedAlignmentIcon = function getSe
   return alignmentIcons.find(function (icon) {
     return icon.value === (0, _alignment.normaliseAlignment)(selectedAlignment);
   });
+};
+var isLayoutOptionDisabled = exports.isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth) {
+  var lineLength = getEditorContainerWidth().lineLength;
+  if (selectedNode && lineLength && selectedNode.attrs.width > lineLength) {
+    return true;
+  }
+  return false;
 };

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

@@ -22,6 +22,7 @@ var ColumnResizeWidget = exports.ColumnResizeWidget = function ColumnResizeWidge
     formatMessage = _useIntl.formatMessage;
   if (!includeTooltip) {
     return (0, _react.jsx)("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: _types.TableCssClassName.RESIZE_HANDLE_DECORATION,
       "data-start-index": startIndex,
       "data-end-index": endIndex
@@ -38,6 +39,7 @@ var ColumnResizeWidget = exports.ColumnResizeWidget = function ColumnResizeWidge
     mousePosition: "auto-start"
   }, function (tooltipProps) {
     return (0, _react.jsx)("div", (0, _extends2.default)({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: _types.TableCssClassName.RESIZE_HANDLE_DECORATION,
       "data-start-index": startIndex,
       "data-end-index": endIndex

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

@@ -156,7 +156,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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
+    type: "button"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: _types.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE,
     "data-testid": "table-drag-handle-clickable-zone-button",
     style: {
@@ -181,7 +183,9 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     onClick: onClick
   }), /*#__PURE__*/_react.default.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: (0, _classnames2.default)(_types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, appearance, (0, _defineProperty2.default)({}, _types.TableCssClassName.DRAG_HANDLE_DISABLED, hasMergedCells)),
     ref: dragHandleDivRef,
     style: {
@@ -208,7 +212,10 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     }
   }, appearance !== 'placeholder' ?
   //  cannot block pointer events in Firefox as it breaks Dragging functionality
-  _utils.browser.gecko ? /*#__PURE__*/_react.default.createElement(_HandleIconComponent.HandleIconComponent, handleIconProps) : /*#__PURE__*/_react.default.createElement("span", {
+  _utils.browser.gecko ? /*#__PURE__*/_react.default.createElement(_HandleIconComponent.HandleIconComponent, handleIconProps) :
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  _react.default.createElement("span", {
     style: {
       pointerEvents: 'none'
     }

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

@@ -30,6 +30,7 @@ var DragPreview = exports.DragPreview = function DragPreview(_ref) {
     }
   }, /*#__PURE__*/_react.default.createElement(_DragInMotionIcon.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/cjs/ui/FloatingContextualButton/FixedButton.js

@@ -101,19 +101,26 @@ var FixedButton = exports.FixedButton = function FixedButton(_ref2) {
   _react.default.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.default.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: _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex,
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       left: calcLeftPos({
@@ -122,10 +129,14 @@ var FixedButton = exports.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: _types.TableCssClassName.CONTEXTUAL_MENU_BUTTON_FIXED
   }, children)), mountTo);
 };

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

@@ -54,7 +54,9 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
   var labelCellOptions = formatMessage(_messages.tableMessages.cellOptions);
   var button = (0, _react2.jsx)("div", {
     css: [(0, _styles.tableFloatingCellButtonStyles)(), isContextualMenuOpen && (0, _styles.tableFloatingCellButtonSelectedStyles)()]
-  }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+  }, (0, _react2.jsx)(_uiMenu.ToolbarButton
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: _types.TableCssClassName.CONTEXTUAL_MENU_BUTTON,
     selected: isContextualMenuOpen,
     title: labelCellOptions,

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

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

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

@@ -16,7 +16,10 @@ var DeleteButton = function DeleteButton(_ref) {
     removeLabel = _ref.removeLabel,
     formatMessage = _ref.intl.formatMessage;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: _types.TableCssClassName.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
@@ -24,7 +27,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: _types.TableCssClassName.CONTROLS_DELETE_BUTTON,
     onMouseDown: onClick,
     onMouseMove: function onMouseMove(e) {

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

@@ -209,9 +209,11 @@ var FloatingDeleteButton = /*#__PURE__*/function (_Component) {
           });
           return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.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: _consts.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 ? _editorSharedStyles.akEditorTableNumberColumnWidth : 0)

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

@@ -262,12 +262,17 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
         size: "medium"
       })),
       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,
         css: _styles2.dragMenuBackgroundColorStyles
       }, (0, _react2.jsx)("div", {
-        css: (0, _styles2.cellColourPreviewStyles)(background),
+        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 && (0, _react2.jsx)("div", {
+      }), 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, {

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

@@ -93,69 +93,73 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
       }));
     })));
   };
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "drag-dropdown-menu-wrapper"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "drag-dropdown-menu-popup-ref",
-    ref: handleRef
-  }), /*#__PURE__*/_react.default.createElement(_ui.Popup, {
-    target: targetRefDiv,
-    mountTo: mountPoint,
-    boundariesElement: boundariesElement,
-    scrollableElement: scrollableElement,
-    onPlacementChanged: function onPlacementChanged(placement) {
-      setPopupPlacement(placement);
-    },
-    fitHeight: fitHeight,
-    fitWidth: fitWidth,
-    zIndex: _editorSharedStyles.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.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
-    closeOnTab: true,
-    type: _uiMenu.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.default.createElement("div", {
+      className: "drag-dropdown-menu-wrapper"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "drag-dropdown-menu-popup-ref",
+      ref: handleRef
+    }), /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+      target: targetRefDiv,
+      mountTo: mountPoint,
+      boundariesElement: boundariesElement,
+      scrollableElement: scrollableElement,
+      onPlacementChanged: function onPlacementChanged(placement) {
+        setPopupPlacement(placement);
+      },
+      fitHeight: fitHeight,
+      fitWidth: fitWidth,
+      zIndex: _editorSharedStyles.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.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
+      closeOnTab: true,
+      type: _uiMenu.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())))
+  );
 };