@atlaskit/editor-plugin-table 24.5.0 → 24.5.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-table
 
+## 24.5.2
+
+### Patch Changes
+
+- [`109c3998554f2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/109c3998554f2) -
+  Add SSR-safe, experiment-gated CSS overflow shadows for editor tables and keep renderer shadows
+  within table bounds when sticky scrollbars are present.
+- Updated dependencies
+
+## 24.5.1
+
+### Patch Changes
+
+- [`3b0816741523c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3b0816741523c) -
+  Add lime, orange, and magenta colors to table cell background color palette
+- Updated dependencies
+
 ## 24.5.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -13,7 +13,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _classnames2 = _interopRequireDefault(require("classnames"));
+var _classnames3 = _interopRequireDefault(require("classnames"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _reactIntl = require("react-intl");
 var _browser = require("@atlaskit/editor-common/browser");
@@ -928,7 +928,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       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, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), _types.TableCssClassName.TABLE_STICKY, !this.props.limitedMode && this.state.stickyHeader && hasHeaderRow), _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), _types.TableCssClassName.TABLE_SELECTED, (0, _utils2.isTableSelected)(selection !== null && selection !== void 0 ? selection : view.state.selection)), _types.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, tableActive && allowControls && this.isNestedInTable)),
+        className: (0, _classnames3.default)(_types.TableCssClassName.TABLE_CONTAINER, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), _types.TableCssClassName.TABLE_STICKY, !this.props.limitedMode && this.state.stickyHeader && hasHeaderRow), _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), _types.TableCssClassName.TABLE_SELECTED, (0, _utils2.isTableSelected)(selection !== null && selection !== void 0 ? selection : view.state.selection)), _types.TableCssClassName.NESTED_TABLE_WITH_CONTROLS, tableActive && allowControls && this.isNestedInTable)),
         editorView: view,
         getPos: getPos,
         node: node
@@ -973,10 +973,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           return ((_this5$wrapper3 = _this5.wrapper) === null || _this5$wrapper3 === void 0 ? void 0 : _this5$wrapper3.clientWidth) || 760;
         }
       }), /*#__PURE__*/_react.default.createElement(_reactNodeView.NodeViewContentHole
-      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- existing table wrapper class required for legacy styling hooks
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- existing table wrapper class required for legacy styling hooks
       , {
-        className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_NODE_WRAPPER),
+        className: (0, _classnames3.default)(_types.TableCssClassName.TABLE_NODE_WRAPPER, (0, _defineProperty2.default)({}, _types.TableCssClassName.TABLE_SCROLL_INLINE_SHADOW, (0, _expValEquals.expValEquals)('platform_editor_table_css_overflow_shadow', 'isEnabled', true))),
         ref: this.setWrapperRef
       }, (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
         contentEditable: false,
@@ -992,7 +991,17 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         ,
         className: _types.TableCssClassName.TABLE_CORNER_MASK,
         "data-corner": "right"
-      })), allowControls && colControls), !this.isNestedInTable ? /*#__PURE__*/_react.default.createElement("div", {
+      })), allowControls && colControls), (0, _expValEquals.expValEquals)('platform_editor_table_css_overflow_shadow', 'isEnabled', true) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        contentEditable: false,
+        "aria-hidden": "true",
+        "data-vc-nvs": "true",
+        "data-table-overflow-shadow": "start"
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        contentEditable: false,
+        "aria-hidden": "true",
+        "data-vc-nvs": "true",
+        "data-table-overflow-shadow": "end"
+      })), !this.isNestedInTable ? /*#__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,
         "data-vc-nvs": "true",

package/dist/cjs/nodeviews/toDOM.js

@@ -67,6 +67,17 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
       if (config.allowColumnResizing) {
         colgroup = ['colgroup', {}].concat((0, _toConsumableArray2.default)((0, _colgroup.generateColgroupFromNode)(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)));
       }
+      var overflowShadows = (0, _expValEquals.expValEquals)('platform_editor_table_css_overflow_shadow', 'isEnabled', true) ? [['div', {
+        contenteditable: 'false',
+        'aria-hidden': 'true',
+        'data-vc-nvs': 'true',
+        'data-table-overflow-shadow': 'start'
+      }], ['div', {
+        contenteditable: 'false',
+        'aria-hidden': 'true',
+        'data-vc-nvs': 'true',
+        'data-table-overflow-shadow': 'end'
+      }]] : [];
       var roundedTableCornerMasks = (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? [['div', {
         contenteditable: 'false',
         'aria-hidden': 'true',
@@ -89,11 +100,11 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
       }], ['div', {
         class: 'pm-table-row-controls-wrapper'
       }, ['div']], ['div', {
-        class: 'pm-table-wrapper'
-      }].concat(roundedTableCornerMasks, [['table', attrs, colgroup, ['tbody', 0]]]), ['div', {
+        class: (0, _classnames.default)(_types.TableCssClassName.TABLE_NODE_WRAPPER, (0, _defineProperty2.default)({}, _types.TableCssClassName.TABLE_SCROLL_INLINE_SHADOW, (0, _expValEquals.expValEquals)('platform_editor_table_css_overflow_shadow', 'isEnabled', true)))
+      }].concat(roundedTableCornerMasks, [['table', attrs, colgroup, ['tbody', 0]]])].concat(overflowShadows, [['div', {
         class: 'pm-table-sticky-sentinel-bottom',
         'data-testid': 'sticky-sentinel-bottom'
-      }]].concat((0, _toConsumableArray2.default)((0, _coreUtils.isSSRStreaming)() ? [['div', {
+      }]], (0, _toConsumableArray2.default)((0, _coreUtils.isSSRStreaming)() ? [['div', {
         contenteditable: 'false',
         class: 'pm-table-left-border',
         'data-with-numbered-table': node.attrs.isNumberColumnEnabled,

package/dist/cjs/pm-plugins/commands/commands-with-analytics.js

@@ -6,12 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.wrapTableInExpandWithAnalytics = exports.toggleNumberColumnWithAnalytics = exports.toggleHeaderRowWithAnalytics = exports.toggleHeaderColumnWithAnalytics = exports.toggleFixedColumnWidthsOptionAnalytics = exports.splitCellWithAnalytics = exports.sortColumnWithAnalytics = exports.setTableAlignmentWithTableContentWithPosWithAnalytics = exports.setTableAlignmentWithAnalytics = exports.setColorWithAnalytics = exports.setCellVerticalAlignmentWithAnalytics = exports.mergeCellsWithAnalytics = exports.insertRowWithAnalytics = exports.insertColumnWithAnalytics = exports.emptyMultipleCellsWithAnalytics = exports.distributeColumnsWidthsWithAnalytics = exports.deleteTableWithAnalytics = exports.deleteTableIfSelectedWithAnalytics = exports.deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = exports.deleteRowsWithAnalytics = exports.deleteColumnsWithAnalytics = exports.changeColumnWidthByStepWithAnalytics = exports.addRowAroundSelection = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _adfSchema = require("@atlaskit/adf-schema");
+var _tableNodes = require("@atlaskit/adf-schema/tableNodes");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _preset = require("@atlaskit/editor-common/preset");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _pluginFactory = require("../plugin-factory");
 var _commands = require("../table-resizing/commands");
 var _deleteRows = require("../transforms/delete-rows");
@@ -134,7 +136,7 @@ var setColorWithAnalytics = exports.setColorWithAnalytics = function setColorWit
         actionSubjectId: null,
         attributes: {
           inputMethod: inputMethod,
-          cellColor: (_adfSchema.tableBackgroundColorPalette.get(cellColor.toLowerCase()) || cellColor).toLowerCase(),
+          cellColor: (((0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_2') ? _tableNodes.tableBackgroundColorPaletteNew : _tableNodes.tableBackgroundColorPalette).get(cellColor.toLowerCase()) || cellColor).toLowerCase(),
           horizontalCells: horizontalCells,
           verticalCells: verticalCells,
           totalCells: totalCells,

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

@@ -38,6 +38,7 @@ var _tableColumnDelete = _interopRequireDefault(require("@atlaskit/icon/core/tab
 var _tableColumnsDistribute = _interopRequireDefault(require("@atlaskit/icon/core/table-columns-distribute"));
 var _tableRowAddBelow = _interopRequireDefault(require("@atlaskit/icon/core/table-row-add-below"));
 var _tableRowDelete = _interopRequireDefault(require("@atlaskit/icon/core/table-row-delete"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -133,10 +134,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         var _node$attrs, _node$attrs2;
         var node = isOpen && 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 selectedRowAndColumnFromPalette = (0, _uiColor.getSelectedRowAndColumnFromPalette)(_uiColor.cellBackgroundColorPalette,
+        var isMoreColorsEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_2');
+        var activePalette = isMoreColorsEnabled ? _uiColor.cellBackgroundColorPaletteNew : _uiColor.cellBackgroundColorPalette;
+        var activeCols = isMoreColorsEnabled ? _consts.colorPaletteColumns : _consts.colorPaletteColumnsOld;
+        var selectedRowAndColumnFromPalette = (0, _uiColor.getSelectedRowAndColumnFromPalette)(activePalette,
         // Ignored via go/ees005
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        background, _consts.colorPalletteColumns);
+        background, activeCols);
         var selectedRowIndex = selectedRowAndColumnFromPalette.selectedRowIndex;
         var selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
         return {
@@ -188,13 +192,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             ,
             isOpenedByKeyboard: isCellMenuOpenByKeyboard
           }, (0, _react2.jsx)(_uiColor.ColorPalette, {
-            cols: 7,
+            cols: activeCols,
             onClick: _this.setColor,
             selectedColor: (node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.background) || '#ffffff'
             // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
             ,
             paletteOptions: {
-              palette: _uiColor.cellBackgroundColorPalette,
+              palette: activePalette,
               paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages,
               hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
             }

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

@@ -23,7 +23,9 @@ var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _paintBucket = _interopRequireDefault(require("@atlaskit/icon/core/paint-bucket"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
 var _commands = require("../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../pm-plugins/commands/commands-with-analytics");
@@ -282,7 +284,10 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
       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),
+    var isMoreColorsEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_2');
+    var activePalette = isMoreColorsEnabled ? _uiColor.cellBackgroundColorPaletteNew : _uiColor.cellBackgroundColorPalette;
+    var activeCols = isMoreColorsEnabled ? _consts.colorPaletteColumns : _consts.colorPaletteColumnsOld;
+    var _getSelectedRowAndCol = (0, _uiColor.getSelectedRowAndColumnFromPalette)(activePalette, background, activeCols),
       selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
       selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
     return {
@@ -335,7 +340,7 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
         isPopupPositioned: true,
         isOpenedByKeyboard: isKeyboardModeActive
       }, (0, _react2.jsx)(_uiColor.ColorPalette, {
-        cols: _consts.colorPalletteColumns
+        cols: activeCols
         // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
         ,
         onClick: function onClick(color) {
@@ -345,7 +350,7 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
         // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
         ,
         paletteOptions: {
-          palette: _uiColor.cellBackgroundColorPalette,
+          palette: activePalette,
           paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages,
           hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
         }

package/dist/cjs/ui/TableMenu/shared/items/BackgroundColorItem.js

@@ -15,13 +15,15 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("../../../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
 var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
+var _consts = require("../../../../ui/consts");
 var _TableMenuContext = require("../TableMenuContext");
 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); }
-var colorPaletteColumns = 7;
 var colorPaletteStyles = {
   container: "_1rjcu2gc",
   elemAfter: "_zulp1b66 _1e0c1txw _4cvr1h6o",
@@ -59,13 +61,16 @@ var BackgroundColorItem = exports.BackgroundColorItem = function BackgroundColor
       backgroundColor: selectedColor
     };
   }, [selectedColor]);
+  var isMoreColorsEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_2');
+  var activePalette = isMoreColorsEnabled ? _uiColor.cellBackgroundColorPaletteNew : _uiColor.cellBackgroundColorPalette;
+  var activeCols = isMoreColorsEnabled ? _consts.colorPaletteColumns : _consts.colorPaletteColumnsOld;
   var paletteOptions = (0, _react.useMemo)(function () {
     return {
-      palette: _uiColor.cellBackgroundColorPalette,
+      palette: activePalette,
       paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages,
       hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
     };
-  }, []);
+  }, [activePalette]);
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.PaintBucketIcon, {
       color: "currentColor",
@@ -85,7 +90,7 @@ var BackgroundColorItem = exports.BackgroundColorItem = function BackgroundColor
   }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: colorPaletteStyles.container
   }, /*#__PURE__*/_react.default.createElement(_uiColor.ColorPalette, {
-    cols: colorPaletteColumns,
+    cols: activeCols,
     onClick: onClick,
     selectedColor: colorPreviewStyle.backgroundColor,
     paletteOptions: paletteOptions

package/dist/cjs/ui/consts.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tableResizerWidth = exports.tablePopupMenuFitHeight = exports.tablePadding = exports.tableOverflowShadowWidthWide = exports.tableOverflowShadowWidth = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellSelectedColor = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableColumnControlsHeight = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.nativeStickyHeaderZIndex = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dropTargetsZIndex = exports.dropTargetExtendedWidth = exports.dragTableInsertColumnButtonSize = exports.dragRowControlsWidth = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidthDnD = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.colorPalletteColumns = exports.belowNativeStickyHeaderZIndex = exports.aboveNativeStickyHeaderZIndex = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.TABLE_DRAG_MENU_SORT_GROUP_HEIGHT = exports.TABLE_DRAG_MENU_PADDING_TOP = exports.TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
+exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tableResizerWidth = exports.tablePopupMenuFitHeight = exports.tablePadding = exports.tableOverflowShadowWidthWide = exports.tableOverflowShadowWidth = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellSelectedColor = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableColumnControlsHeight = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.nativeStickyHeaderZIndex = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dropTargetsZIndex = exports.dropTargetExtendedWidth = exports.dragTableInsertColumnButtonSize = exports.dragRowControlsWidth = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidthDnD = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.colorPaletteColumnsOld = exports.colorPaletteColumns = exports.belowNativeStickyHeaderZIndex = exports.aboveNativeStickyHeaderZIndex = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.TABLE_DRAG_MENU_SORT_GROUP_HEIGHT = exports.TABLE_DRAG_MENU_PADDING_TOP = exports.TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _types = require("../types");
@@ -85,5 +85,6 @@ var dragMenuDropdownWidth = exports.dragMenuDropdownWidth = 250;
 var dragTableInsertColumnButtonSize = exports.dragTableInsertColumnButtonSize = 16;
 var dropTargetExtendedWidth = exports.dropTargetExtendedWidth = 150;
 var dragRowControlsWidth = exports.dragRowControlsWidth = 14;
-var colorPalletteColumns = exports.colorPalletteColumns = 7;
+var colorPaletteColumnsOld = exports.colorPaletteColumnsOld = 7;
+var colorPaletteColumns = exports.colorPaletteColumns = 10;
 var tableResizerWidth = exports.tableResizerWidth = 8;

package/dist/cjs/ui/toolbar.js

@@ -35,6 +35,7 @@ var _customize = _interopRequireDefault(require("@atlaskit/icon/core/customize")
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
 var _shrinkHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/shrink-horizontal"));
 var _tableColumnsDistribute = _interopRequireDefault(require("@atlaskit/icon/core/table-columns-distribute"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../pm-plugins/commands");
@@ -53,6 +54,7 @@ var _table = require("../pm-plugins/utils/table");
 var _applyMeasuredWidthToSelectedTable = require("../pm-plugins/utils/tableMode/apply-measured-width-to-selected-table");
 var _isContentModeSupported = require("../pm-plugins/utils/tableMode/is-content-mode-supported");
 var _types = require("../types");
+var _consts = require("./consts");
 var _FloatingAlignmentButtons = require("./FloatingAlignmentButtons/FloatingAlignmentButtons");
 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); }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -669,7 +671,9 @@ var getColorPicker = function getColorPicker(state, menu, _ref4, editorAnalytics
   }
   var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : undefined;
   var currentBackground = (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff';
-  var defaultPalette = _uiColor.cellBackgroundColorPalette.find(function (item) {
+  var isMoreColorsEnabled = (0, _expValEquals.expValEquals)('platform_editor_lovability_text_bg_color', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_lovability_text_bg_color_patch_2');
+  var activePalette = isMoreColorsEnabled ? _uiColor.cellBackgroundColorPaletteNew : _uiColor.cellBackgroundColorPalette;
+  var defaultPalette = activePalette.find(function (item) {
     return item.value === currentBackground;
   }) || {
     // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
@@ -683,8 +687,9 @@ var getColorPicker = function getColorPicker(state, menu, _ref4, editorAnalytics
     type: 'select',
     isAriaExpanded: true,
     selectType: 'color',
+    cols: isMoreColorsEnabled ? _consts.colorPaletteColumns : _consts.colorPaletteColumnsOld,
     defaultValue: defaultPalette,
-    options: _uiColor.cellBackgroundColorPalette,
+    options: activePalette,
     returnEscToButton: true,
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/dist/es2019/nodeviews/TableComponent.js

@@ -936,10 +936,11 @@ class TableComponent extends React.Component {
         return ((_this$wrapper4 = this.wrapper) === null || _this$wrapper4 === void 0 ? void 0 : _this$wrapper4.clientWidth) || 760;
       }
     }), /*#__PURE__*/React.createElement(NodeViewContentHole
-    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- existing table wrapper class required for legacy styling hooks
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- existing table wrapper class required for legacy styling hooks
     , {
-      className: classnames(ClassName.TABLE_NODE_WRAPPER),
+      className: classnames(ClassName.TABLE_NODE_WRAPPER, {
+        [ClassName.TABLE_SCROLL_INLINE_SHADOW]: expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true)
+      }),
       ref: this.setWrapperRef
     }, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       contentEditable: false,
@@ -955,7 +956,17 @@ class TableComponent extends React.Component {
       ,
       className: ClassName.TABLE_CORNER_MASK,
       "data-corner": "right"
-    })), allowControls && colControls), !this.isNestedInTable ? /*#__PURE__*/React.createElement("div", {
+    })), allowControls && colControls), expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      contentEditable: false,
+      "aria-hidden": "true",
+      "data-vc-nvs": "true",
+      "data-table-overflow-shadow": "start"
+    }), /*#__PURE__*/React.createElement("div", {
+      contentEditable: false,
+      "aria-hidden": "true",
+      "data-vc-nvs": "true",
+      "data-table-overflow-shadow": "end"
+    })), !this.isNestedInTable ? /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
       "data-vc-nvs": "true",

package/dist/es2019/nodeviews/toDOM.js

@@ -51,6 +51,17 @@ export const tableNodeSpecWithFixedToDOM = config => {
       if (config.allowColumnResizing) {
         colgroup = ['colgroup', {}, ...generateColgroupFromNode(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)];
       }
+      const overflowShadows = expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true) ? [['div', {
+        contenteditable: 'false',
+        'aria-hidden': 'true',
+        'data-vc-nvs': 'true',
+        'data-table-overflow-shadow': 'start'
+      }], ['div', {
+        contenteditable: 'false',
+        'aria-hidden': 'true',
+        'data-vc-nvs': 'true',
+        'data-table-overflow-shadow': 'end'
+      }]] : [];
       const roundedTableCornerMasks = expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? [['div', {
         contenteditable: 'false',
         'aria-hidden': 'true',
@@ -73,8 +84,10 @@ export const tableNodeSpecWithFixedToDOM = config => {
       }], ['div', {
         class: 'pm-table-row-controls-wrapper'
       }, ['div']], ['div', {
-        class: 'pm-table-wrapper'
-      }, ...roundedTableCornerMasks, ['table', attrs, colgroup, ['tbody', 0]]], ['div', {
+        class: classNames(ClassName.TABLE_NODE_WRAPPER, {
+          [ClassName.TABLE_SCROLL_INLINE_SHADOW]: expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true)
+        })
+      }, ...roundedTableCornerMasks, ['table', attrs, colgroup, ['tbody', 0]]], ...overflowShadows, ['div', {
         class: 'pm-table-sticky-sentinel-bottom',
         'data-testid': 'sticky-sentinel-bottom'
       }], ...(isSSRStreaming() ? [['div', {

package/dist/es2019/pm-plugins/commands/commands-with-analytics.js

@@ -1,9 +1,11 @@
-import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
+import { tableBackgroundColorPalette, tableBackgroundColorPaletteNew } from '@atlaskit/adf-schema/tableNodes';
 import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_DISPLAY_MODE } from '@atlaskit/editor-common/analytics';
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellClosestToPos, findCellRectClosestToPos, getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getPluginState } from '../plugin-factory';
 import { distributeColumnsWidths } from '../table-resizing/commands';
 import { deleteRows } from '../transforms/delete-rows';
@@ -119,7 +121,7 @@ export const setColorWithAnalytics = editorAnalyticsAPI => (inputMethod, cellCol
     actionSubjectId: null,
     attributes: {
       inputMethod,
-      cellColor: (tableBackgroundColorPalette.get(cellColor.toLowerCase()) || cellColor).toLowerCase(),
+      cellColor: ((expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_2') ? tableBackgroundColorPaletteNew : tableBackgroundColorPalette).get(cellColor.toLowerCase()) || cellColor).toLowerCase(),
       horizontalCells,
       verticalCells,
       totalCells,

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

@@ -16,7 +16,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette, getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
+import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, cellBackgroundColorPaletteNew, ColorPalette, getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
 import { closestElement } from '@atlaskit/editor-common/utils';
@@ -32,6 +32,7 @@ import TableColumnDeleteIcon from '@atlaskit/icon/core/table-column-delete';
 import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
 import TableRowAddBelowIcon from '@atlaskit/icon/core/table-row-add-below';
 import TableRowDeleteIcon from '@atlaskit/icon/core/table-row-delete';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -45,7 +46,7 @@ import { canMergeCells } from '../../pm-plugins/transforms/merge';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../pm-plugins/utils/selection';
 import { getMergedCellsPositions } from '../../pm-plugins/utils/table';
 import { TableCssClassName as ClassName } from '../../types';
-import { colorPalletteColumns, contextualMenuDropdownWidthDnD } from '../consts';
+import { colorPaletteColumns, colorPaletteColumnsOld, contextualMenuDropdownWidthDnD } from '../consts';
 import { cellColourPreviewStyles } from './styles';
 const dropdownMenuSection = {
   hasSeparator: true
@@ -121,10 +122,13 @@ export class ContextualMenu extends Component {
         var _node$attrs, _node$attrs2;
         const node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
         const background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
-        const selectedRowAndColumnFromPalette = getSelectedRowAndColumnFromPalette(cellBackgroundColorPalette,
+        const isMoreColorsEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_2');
+        const activePalette = isMoreColorsEnabled ? cellBackgroundColorPaletteNew : cellBackgroundColorPalette;
+        const activeCols = isMoreColorsEnabled ? colorPaletteColumns : colorPaletteColumnsOld;
+        const selectedRowAndColumnFromPalette = getSelectedRowAndColumnFromPalette(activePalette,
         // Ignored via go/ees005
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        background, colorPalletteColumns);
+        background, activeCols);
         const selectedRowIndex = selectedRowAndColumnFromPalette.selectedRowIndex;
         const selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
         return {
@@ -176,13 +180,13 @@ export class ContextualMenu extends Component {
             ,
             isOpenedByKeyboard: isCellMenuOpenByKeyboard
           }, jsx(ColorPalette, {
-            cols: 7,
+            cols: activeCols,
             onClick: this.setColor,
             selectedColor: (node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.background) || '#ffffff'
             // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
             ,
             paletteOptions: {
-              palette: cellBackgroundColorPalette,
+              palette: activePalette,
               paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
               hexToPaletteColor: hexToEditorBackgroundPaletteColor
             }

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

@@ -12,7 +12,7 @@ import { injectIntl } from 'react-intl';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette, getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
+import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, cellBackgroundColorPaletteNew, ColorPalette, getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
 import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
 import { closestElement } from '@atlaskit/editor-common/utils';
@@ -21,8 +21,10 @@ import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import PaintBucketIcon from '@atlaskit/icon/core/paint-bucket';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Toggle from '@atlaskit/toggle';
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../pm-plugins/commands';
 import { setColorWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics } from '../../pm-plugins/commands/commands-with-analytics';
@@ -33,7 +35,7 @@ import { getDragMenuConfig } from '../../pm-plugins/utils/drag-menu';
 import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled } from '../../pm-plugins/utils/nodes';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../pm-plugins/utils/selection';
 import { TableCssClassName as ClassName } from '../../types';
-import { colorPalletteColumns } from '../consts';
+import { colorPaletteColumns, colorPaletteColumnsOld } from '../consts';
 import { DropdownMenu } from './DropdownMenu';
 import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, toggleStyles } from './styles';
 const MapDragMenuOptionIdToMessage = {
@@ -275,10 +277,13 @@ const DragMenu = /*#__PURE__*/React.memo(({
     } = getTablePluginState(editorView.state);
     const node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
     const background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
+    const isMoreColorsEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_2');
+    const activePalette = isMoreColorsEnabled ? cellBackgroundColorPaletteNew : cellBackgroundColorPalette;
+    const activeCols = isMoreColorsEnabled ? colorPaletteColumns : colorPaletteColumnsOld;
     const {
       selectedRowIndex,
       selectedColumnIndex
-    } = getSelectedRowAndColumnFromPalette(cellBackgroundColorPalette, background, colorPalletteColumns);
+    } = getSelectedRowAndColumnFromPalette(activePalette, background, activeCols);
     return {
       key: 'background',
       content: formatMessage(messages.backgroundColor),
@@ -329,7 +334,7 @@ const DragMenu = /*#__PURE__*/React.memo(({
         isPopupPositioned: true,
         isOpenedByKeyboard: isKeyboardModeActive
       }, jsx(ColorPalette, {
-        cols: colorPalletteColumns
+        cols: activeCols
         // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
         ,
         onClick: color => {
@@ -339,7 +344,7 @@ const DragMenu = /*#__PURE__*/React.memo(({
         // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
         ,
         paletteOptions: {
-          palette: cellBackgroundColorPalette,
+          palette: activePalette,
           paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
           hexToPaletteColor: hexToEditorBackgroundPaletteColor
         }

package/dist/es2019/ui/TableMenu/shared/items/BackgroundColorItem.js

@@ -5,15 +5,17 @@ import React, { useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette } from '@atlaskit/editor-common/ui-color';
+import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, cellBackgroundColorPaletteNew, ColorPalette } from '@atlaskit/editor-common/ui-color';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { NestedDropdownRightIcon, PaintBucketIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { setColorWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../../../../pm-plugins/plugin-factory';
+import { colorPaletteColumns, colorPaletteColumnsOld } from '../../../../ui/consts';
 import { useTableMenuContext } from '../TableMenuContext';
-const colorPaletteColumns = 7;
 const colorPaletteStyles = {
   container: "_1rjcu2gc",
   elemAfter: "_zulp1b66 _1e0c1txw _4cvr1h6o",
@@ -53,13 +55,16 @@ export const BackgroundColorItem = ({
   const colorPreviewStyle = useMemo(() => ({
     backgroundColor: selectedColor
   }), [selectedColor]);
+  const isMoreColorsEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_2');
+  const activePalette = isMoreColorsEnabled ? cellBackgroundColorPaletteNew : cellBackgroundColorPalette;
+  const activeCols = isMoreColorsEnabled ? colorPaletteColumns : colorPaletteColumnsOld;
   const paletteOptions = useMemo(() => {
     return {
-      palette: cellBackgroundColorPalette,
+      palette: activePalette,
       paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
       hexToPaletteColor: hexToEditorBackgroundPaletteColor
     };
-  }, []);
+  }, [activePalette]);
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
     elemBefore: /*#__PURE__*/React.createElement(PaintBucketIcon, {
       color: "currentColor",
@@ -79,7 +84,7 @@ export const BackgroundColorItem = ({
   }, /*#__PURE__*/React.createElement(Box, {
     xcss: colorPaletteStyles.container
   }, /*#__PURE__*/React.createElement(ColorPalette, {
-    cols: colorPaletteColumns,
+    cols: activeCols,
     onClick: onClick,
     selectedColor: colorPreviewStyle.backgroundColor,
     paletteOptions: paletteOptions

package/dist/es2019/ui/consts.js

@@ -80,5 +80,6 @@ export const dragMenuDropdownWidth = 250;
 export const dragTableInsertColumnButtonSize = 16;
 export const dropTargetExtendedWidth = 150;
 export const dragRowControlsWidth = 14;
-export const colorPalletteColumns = 7;
+export const colorPaletteColumnsOld = 7;
+export const colorPaletteColumns = 10;
 export const tableResizerWidth = 8;

package/dist/es2019/ui/toolbar.js

@@ -15,7 +15,7 @@ import commonMessages, { tableMessages as messages } from '@atlaskit/editor-comm
 import { isNestedTablesSupported, isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
-import { DEFAULT_BORDER_COLOR, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
+import { DEFAULT_BORDER_COLOR, cellBackgroundColorPalette, cellBackgroundColorPaletteNew } from '@atlaskit/editor-common/ui-color';
 import { closestElement, getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
 import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -29,6 +29,7 @@ import CustomizeIcon from '@atlaskit/icon/core/customize';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import ShrinkHorizontalIcon from '@atlaskit/icon/core/shrink-horizontal';
 import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from '../pm-plugins/commands';
@@ -47,6 +48,7 @@ import { getMergedCellsPositions } from '../pm-plugins/utils/table';
 import { applyMeasuredWidthToSelectedTable } from '../pm-plugins/utils/tableMode/apply-measured-width-to-selected-table';
 import { isContentModeSupported } from '../pm-plugins/utils/tableMode/is-content-mode-supported';
 import { TableCssClassName } from '../types';
+import { colorPaletteColumns, colorPaletteColumnsOld } from './consts';
 import { FloatingAlignmentButtons } from './FloatingAlignmentButtons/FloatingAlignmentButtons';
 export const getToolbarMenuConfig = (config, state, {
   formatMessage
@@ -625,7 +627,9 @@ const getColorPicker = (state, menu, {
   }
   const node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : undefined;
   const currentBackground = (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff';
-  const defaultPalette = cellBackgroundColorPalette.find(item => item.value === currentBackground) || {
+  const isMoreColorsEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_2');
+  const activePalette = isMoreColorsEnabled ? cellBackgroundColorPaletteNew : cellBackgroundColorPalette;
+  const defaultPalette = activePalette.find(item => item.value === currentBackground) || {
     // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
     label: 'Custom',
     value: currentBackground,
@@ -637,8 +641,9 @@ const getColorPicker = (state, menu, {
     type: 'select',
     isAriaExpanded: true,
     selectType: 'color',
+    cols: isMoreColorsEnabled ? colorPaletteColumns : colorPaletteColumnsOld,
     defaultValue: defaultPalette,
-    options: cellBackgroundColorPalette,
+    options: activePalette,
     returnEscToButton: true,
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/dist/esm/nodeviews/TableComponent.js

@@ -967,10 +967,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           return ((_this5$wrapper3 = _this5.wrapper) === null || _this5$wrapper3 === void 0 ? void 0 : _this5$wrapper3.clientWidth) || 760;
         }
       }), /*#__PURE__*/React.createElement(NodeViewContentHole
-      // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- existing table wrapper class required for legacy styling hooks
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/design-system/no-unsafe-style-overrides -- existing table wrapper class required for legacy styling hooks
       , {
-        className: classnames(ClassName.TABLE_NODE_WRAPPER),
+        className: classnames(ClassName.TABLE_NODE_WRAPPER, _defineProperty({}, ClassName.TABLE_SCROLL_INLINE_SHADOW, expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true))),
         ref: this.setWrapperRef
       }, expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
         contentEditable: false,
@@ -986,7 +985,17 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         ,
         className: ClassName.TABLE_CORNER_MASK,
         "data-corner": "right"
-      })), allowControls && colControls), !this.isNestedInTable ? /*#__PURE__*/React.createElement("div", {
+      })), allowControls && colControls), expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        contentEditable: false,
+        "aria-hidden": "true",
+        "data-vc-nvs": "true",
+        "data-table-overflow-shadow": "start"
+      }), /*#__PURE__*/React.createElement("div", {
+        contentEditable: false,
+        "aria-hidden": "true",
+        "data-vc-nvs": "true",
+        "data-table-overflow-shadow": "end"
+      })), !this.isNestedInTable ? /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
         "data-vc-nvs": "true",

package/dist/esm/nodeviews/toDOM.js

@@ -60,6 +60,17 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
       if (config.allowColumnResizing) {
         colgroup = ['colgroup', {}].concat(_toConsumableArray(generateColgroupFromNode(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)));
       }
+      var overflowShadows = expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true) ? [['div', {
+        contenteditable: 'false',
+        'aria-hidden': 'true',
+        'data-vc-nvs': 'true',
+        'data-table-overflow-shadow': 'start'
+      }], ['div', {
+        contenteditable: 'false',
+        'aria-hidden': 'true',
+        'data-vc-nvs': 'true',
+        'data-table-overflow-shadow': 'end'
+      }]] : [];
       var roundedTableCornerMasks = expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? [['div', {
         contenteditable: 'false',
         'aria-hidden': 'true',
@@ -82,11 +93,11 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
       }], ['div', {
         class: 'pm-table-row-controls-wrapper'
       }, ['div']], ['div', {
-        class: 'pm-table-wrapper'
-      }].concat(roundedTableCornerMasks, [['table', attrs, colgroup, ['tbody', 0]]]), ['div', {
+        class: classNames(ClassName.TABLE_NODE_WRAPPER, _defineProperty({}, ClassName.TABLE_SCROLL_INLINE_SHADOW, expValEquals('platform_editor_table_css_overflow_shadow', 'isEnabled', true)))
+      }].concat(roundedTableCornerMasks, [['table', attrs, colgroup, ['tbody', 0]]])].concat(overflowShadows, [['div', {
         class: 'pm-table-sticky-sentinel-bottom',
         'data-testid': 'sticky-sentinel-bottom'
-      }]].concat(_toConsumableArray(isSSRStreaming() ? [['div', {
+      }]], _toConsumableArray(isSSRStreaming() ? [['div', {
         contenteditable: 'false',
         class: 'pm-table-left-border',
         'data-with-numbered-table': node.attrs.isNumberColumnEnabled,

package/dist/esm/pm-plugins/commands/commands-with-analytics.js

@@ -1,12 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
-import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
+import { tableBackgroundColorPalette, tableBackgroundColorPaletteNew } from '@atlaskit/adf-schema/tableNodes';
 import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_DISPLAY_MODE } from '@atlaskit/editor-common/analytics';
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellClosestToPos, findCellRectClosestToPos, getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getPluginState } from '../plugin-factory';
 import { distributeColumnsWidths } from '../table-resizing/commands';
 import { deleteRows } from '../transforms/delete-rows';
@@ -127,7 +129,7 @@ export var setColorWithAnalytics = function setColorWithAnalytics(editorAnalytic
         actionSubjectId: null,
         attributes: {
           inputMethod: inputMethod,
-          cellColor: (tableBackgroundColorPalette.get(cellColor.toLowerCase()) || cellColor).toLowerCase(),
+          cellColor: ((expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_2') ? tableBackgroundColorPaletteNew : tableBackgroundColorPalette).get(cellColor.toLowerCase()) || cellColor).toLowerCase(),
           horizontalCells: horizontalCells,
           verticalCells: verticalCells,
           totalCells: totalCells,

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

@@ -26,7 +26,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette, getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
+import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, cellBackgroundColorPaletteNew, ColorPalette, getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
 import { closestElement } from '@atlaskit/editor-common/utils';
@@ -42,6 +42,7 @@ import TableColumnDeleteIcon from '@atlaskit/icon/core/table-column-delete';
 import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
 import TableRowAddBelowIcon from '@atlaskit/icon/core/table-row-add-below';
 import TableRowDeleteIcon from '@atlaskit/icon/core/table-row-delete';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -55,7 +56,7 @@ import { canMergeCells } from '../../pm-plugins/transforms/merge';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../pm-plugins/utils/selection';
 import { getMergedCellsPositions } from '../../pm-plugins/utils/table';
 import { TableCssClassName as ClassName } from '../../types';
-import { colorPalletteColumns, contextualMenuDropdownWidthDnD } from '../consts';
+import { colorPaletteColumns, colorPaletteColumnsOld, contextualMenuDropdownWidthDnD } from '../consts';
 import { cellColourPreviewStyles } from './styles';
 var dropdownMenuSection = {
   hasSeparator: true
@@ -130,10 +131,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         var _node$attrs, _node$attrs2;
         var node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
         var background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
-        var selectedRowAndColumnFromPalette = getSelectedRowAndColumnFromPalette(cellBackgroundColorPalette,
+        var isMoreColorsEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_2');
+        var activePalette = isMoreColorsEnabled ? cellBackgroundColorPaletteNew : cellBackgroundColorPalette;
+        var activeCols = isMoreColorsEnabled ? colorPaletteColumns : colorPaletteColumnsOld;
+        var selectedRowAndColumnFromPalette = getSelectedRowAndColumnFromPalette(activePalette,
         // Ignored via go/ees005
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        background, colorPalletteColumns);
+        background, activeCols);
         var selectedRowIndex = selectedRowAndColumnFromPalette.selectedRowIndex;
         var selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
         return {
@@ -185,13 +189,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
             ,
             isOpenedByKeyboard: isCellMenuOpenByKeyboard
           }, jsx(ColorPalette, {
-            cols: 7,
+            cols: activeCols,
             onClick: _this.setColor,
             selectedColor: (node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.background) || '#ffffff'
             // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
             ,
             paletteOptions: {
-              palette: cellBackgroundColorPalette,
+              palette: activePalette,
               paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
               hexToPaletteColor: hexToEditorBackgroundPaletteColor
             }

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

@@ -14,7 +14,7 @@ import { injectIntl } from 'react-intl';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette, getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
+import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, cellBackgroundColorPaletteNew, ColorPalette, getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
 import { UserIntentPopupWrapper } from '@atlaskit/editor-common/user-intent';
 import { closestElement } from '@atlaskit/editor-common/utils';
@@ -23,8 +23,10 @@ import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import PaintBucketIcon from '@atlaskit/icon/core/paint-bucket';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Toggle from '@atlaskit/toggle';
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../pm-plugins/commands';
 import { setColorWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics } from '../../pm-plugins/commands/commands-with-analytics';
@@ -35,7 +37,7 @@ import { getDragMenuConfig } from '../../pm-plugins/utils/drag-menu';
 import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled } from '../../pm-plugins/utils/nodes';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../../pm-plugins/utils/selection';
 import { TableCssClassName as ClassName } from '../../types';
-import { colorPalletteColumns } from '../consts';
+import { colorPaletteColumns, colorPaletteColumnsOld } from '../consts';
 import { DropdownMenu } from './DropdownMenu';
 import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, toggleStyles } from './styles';
 var MapDragMenuOptionIdToMessage = {
@@ -271,7 +273,10 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
       targetCellPosition = _getTablePluginState.targetCellPosition;
     var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
     var background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
-    var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(cellBackgroundColorPalette, background, colorPalletteColumns),
+    var isMoreColorsEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_2');
+    var activePalette = isMoreColorsEnabled ? cellBackgroundColorPaletteNew : cellBackgroundColorPalette;
+    var activeCols = isMoreColorsEnabled ? colorPaletteColumns : colorPaletteColumnsOld;
+    var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(activePalette, background, activeCols),
       selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
       selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
     return {
@@ -324,7 +329,7 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
         isPopupPositioned: true,
         isOpenedByKeyboard: isKeyboardModeActive
       }, jsx(ColorPalette, {
-        cols: colorPalletteColumns
+        cols: activeCols
         // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
         ,
         onClick: function onClick(color) {
@@ -334,7 +339,7 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
         // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
         ,
         paletteOptions: {
-          palette: cellBackgroundColorPalette,
+          palette: activePalette,
           paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
           hexToPaletteColor: hexToEditorBackgroundPaletteColor
         }

package/dist/esm/ui/TableMenu/shared/items/BackgroundColorItem.js

@@ -5,15 +5,17 @@ import React, { useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette } from '@atlaskit/editor-common/ui-color';
+import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, cellBackgroundColorPaletteNew, ColorPalette } from '@atlaskit/editor-common/ui-color';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { NestedDropdownRightIcon, PaintBucketIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { setColorWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../../../../pm-plugins/plugin-factory';
+import { colorPaletteColumns, colorPaletteColumnsOld } from '../../../../ui/consts';
 import { useTableMenuContext } from '../TableMenuContext';
-var colorPaletteColumns = 7;
 var colorPaletteStyles = {
   container: "_1rjcu2gc",
   elemAfter: "_zulp1b66 _1e0c1txw _4cvr1h6o",
@@ -51,13 +53,16 @@ export var BackgroundColorItem = function BackgroundColorItem(_ref) {
       backgroundColor: selectedColor
     };
   }, [selectedColor]);
+  var isMoreColorsEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_2');
+  var activePalette = isMoreColorsEnabled ? cellBackgroundColorPaletteNew : cellBackgroundColorPalette;
+  var activeCols = isMoreColorsEnabled ? colorPaletteColumns : colorPaletteColumnsOld;
   var paletteOptions = useMemo(function () {
     return {
-      palette: cellBackgroundColorPalette,
+      palette: activePalette,
       paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
       hexToPaletteColor: hexToEditorBackgroundPaletteColor
     };
-  }, []);
+  }, [activePalette]);
   return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
     elemBefore: /*#__PURE__*/React.createElement(PaintBucketIcon, {
       color: "currentColor",
@@ -77,7 +82,7 @@ export var BackgroundColorItem = function BackgroundColorItem(_ref) {
   }, /*#__PURE__*/React.createElement(Box, {
     xcss: colorPaletteStyles.container
   }, /*#__PURE__*/React.createElement(ColorPalette, {
-    cols: colorPaletteColumns,
+    cols: activeCols,
     onClick: onClick,
     selectedColor: colorPreviewStyle.backgroundColor,
     paletteOptions: paletteOptions

package/dist/esm/ui/consts.js

@@ -80,5 +80,6 @@ export var dragMenuDropdownWidth = 250;
 export var dragTableInsertColumnButtonSize = 16;
 export var dropTargetExtendedWidth = 150;
 export var dragRowControlsWidth = 14;
-export var colorPalletteColumns = 7;
+export var colorPaletteColumnsOld = 7;
+export var colorPaletteColumns = 10;
 export var tableResizerWidth = 8;

package/dist/esm/ui/toolbar.js

@@ -21,7 +21,7 @@ import commonMessages, { tableMessages as messages } from '@atlaskit/editor-comm
 import { isNestedTablesSupported, isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
-import { DEFAULT_BORDER_COLOR, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
+import { DEFAULT_BORDER_COLOR, cellBackgroundColorPalette, cellBackgroundColorPaletteNew } from '@atlaskit/editor-common/ui-color';
 import { closestElement, getChildrenInfo as _getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
 import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -35,6 +35,7 @@ import CustomizeIcon from '@atlaskit/icon/core/customize';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import ShrinkHorizontalIcon from '@atlaskit/icon/core/shrink-horizontal';
 import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from '../pm-plugins/commands';
@@ -53,6 +54,7 @@ import { getMergedCellsPositions } from '../pm-plugins/utils/table';
 import { applyMeasuredWidthToSelectedTable } from '../pm-plugins/utils/tableMode/apply-measured-width-to-selected-table';
 import { isContentModeSupported } from '../pm-plugins/utils/tableMode/is-content-mode-supported';
 import { TableCssClassName } from '../types';
+import { colorPaletteColumns, colorPaletteColumnsOld } from './consts';
 import { FloatingAlignmentButtons } from './FloatingAlignmentButtons/FloatingAlignmentButtons';
 export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
   var formatMessage = _ref.formatMessage;
@@ -662,7 +664,9 @@ var getColorPicker = function getColorPicker(state, menu, _ref4, editorAnalytics
   }
   var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : undefined;
   var currentBackground = (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff';
-  var defaultPalette = cellBackgroundColorPalette.find(function (item) {
+  var isMoreColorsEnabled = expValEquals('platform_editor_lovability_text_bg_color', 'isEnabled', true) && fg('platform_editor_lovability_text_bg_color_patch_2');
+  var activePalette = isMoreColorsEnabled ? cellBackgroundColorPaletteNew : cellBackgroundColorPalette;
+  var defaultPalette = activePalette.find(function (item) {
     return item.value === currentBackground;
   }) || {
     // eslint-disable-next-line @atlassian/i18n/no-literal-string-in-object
@@ -676,8 +680,9 @@ var getColorPicker = function getColorPicker(state, menu, _ref4, editorAnalytics
     type: 'select',
     isAriaExpanded: true,
     selectType: 'color',
+    cols: isMoreColorsEnabled ? colorPaletteColumns : colorPaletteColumnsOld,
     defaultValue: defaultPalette,
-    options: cellBackgroundColorPalette,
+    options: activePalette,
     returnEscToButton: true,
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/dist/types/ui/consts.d.ts

@@ -65,5 +65,6 @@ export declare const dragMenuDropdownWidth = 250;
 export declare const dragTableInsertColumnButtonSize = 16;
 export declare const dropTargetExtendedWidth = 150;
 export declare const dragRowControlsWidth = 14;
-export declare const colorPalletteColumns = 7;
+export declare const colorPaletteColumnsOld = 7;
+export declare const colorPaletteColumns = 10;
 export declare const tableResizerWidth = 8;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "24.5.0",
+	"version": "24.5.2",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -20,10 +20,10 @@
 		"singleton": true
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^56.2.0",
+		"@atlaskit/adf-schema": "^56.3.0",
 		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/custom-steps": "^1.0.0",
-		"@atlaskit/editor-palette": "^3.2.0",
+		"@atlaskit/editor-palette": "^3.3.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^12.1.0",
 		"@atlaskit/editor-plugin-analytics": "^12.1.0",
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^12.1.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
 		"@atlaskit/primitives": "^22.2.0",
-		"@atlaskit/tmp-editor-statsig": "^135.7.0",
+		"@atlaskit/tmp-editor-statsig": "^135.9.0",
 		"@atlaskit/toggle": "^17.1.0",
 		"@atlaskit/tokens": "^16.3.0",
 		"@atlaskit/tooltip": "^24.0.0",
@@ -67,7 +67,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.45.0",
+		"@atlaskit/editor-common": "^116.46.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -162,6 +162,9 @@
 		},
 		"platform_editor_table_flicker_issue": {
 			"type": "boolean"
+		},
+		"platform_editor_lovability_text_bg_color_patch_2": {
+			"type": "boolean"
 		}
 	},
 	"devDependencies": {