@atlaskit/editor-plugin-table 18.1.3 → 18.1.5

package/dist/es2019/ui/ui-styles.js

@@ -2,8 +2,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { tableCellBorderWidth, tableMarginTop, tableMarginTopWithControl } from '@atlaskit/editor-common/styles';
-import { akEditorShadowZIndex, akEditorTableBorder, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
-import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
+import { akEditorShadowZIndex, akEditorTableNumberColumnWidth, akEditorUnitZIndex } from '@atlaskit/editor-shared-styles';
 import { TableCssClassName as ClassName } from '../types';
 import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, dragTableInsertColumnButtonSize, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
 const InsertLine = cssString => css`
@@ -83,14 +82,14 @@ export const HeaderButton = cssString => css`
 	}
 
 	.active .${ClassName.CONTROLS_BUTTON} {
-		color: ${`var(--ds-icon-inverse, ${N0})`};
+		color: ${"var(--ds-icon-inverse, #FFFFFF)"};
 		background-color: ${tableToolbarSelectedColor};
 		border-color: ${tableBorderSelectedColor};
 	}
 `;
 export const HeaderButtonHover = () => css`
 	.${ClassName.CONTROLS_BUTTON}:hover {
-		color: ${`var(--ds-icon-inverse, ${N0})`};
+		color: ${"var(--ds-icon-inverse, #FFFFFF)"};
 		background-color: ${tableToolbarSelectedColor};
 		border-color: ${tableBorderSelectedColor};
 		cursor: pointer;
@@ -116,9 +115,9 @@ const InsertButton = () => css`
 	}
 	.${ClassName.CONTROLS_INSERT_BUTTON} {
 		${Button(`
-      background: ${"var(--ds-surface-overlay, white)"};
-      box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
-      color: ${`var(--ds-icon, ${N300})`};
+      background: ${"var(--ds-surface-overlay, #FFFFFF)"};
+      box-shadow: ${"var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)"};
+      color: ${"var(--ds-icon, #292A2E)"};
     `)}
 	}
 	.${ClassName.CONTROLS_INSERT_LINE} {
@@ -130,8 +129,8 @@ const InsertButton = () => css`
 `;
 const InsertButtonHover = () => css`
 	.${ClassName.CONTROLS_INSERT_BUTTON}:hover {
-		background: ${`var(--ds-background-brand-bold, ${B300})`};
-		color: ${"var(--ds-icon-inverse, white)"};
+		background: ${"var(--ds-background-brand-bold, #1868DB)"};
+		color: ${"var(--ds-icon-inverse, #FFFFFF)"};
 		cursor: pointer;
 	}
 `;
@@ -157,9 +156,9 @@ export const dragInsertButtonWrapper = () => css`
 
 	.${ClassName.DRAG_CONTROLS_INSERT_BUTTON} {
 		${Button(`
-    background: ${"var(--ds-surface-overlay, white)"};
-    color: ${`var(--ds-icon, ${N300})`};
-    border: 1px solid ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
+    background: ${"var(--ds-surface-overlay, #FFFFFF)"};
+    color: ${"var(--ds-icon, #292A2E)"};
+    border: 1px solid ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"};
     border-radius: 50%;
     height: ${dragTableInsertColumnButtonSize}px;
     width: ${dragTableInsertColumnButtonSize}px;
@@ -167,9 +166,9 @@ export const dragInsertButtonWrapper = () => css`
 	}
 
 	.${ClassName.DRAG_CONTROLS_INSERT_BUTTON}:hover {
-		background: ${`var(--ds-background-brand-bold, ${B300})`};
-		border: 1px solid ${`var(--ds-background-brand-bold, ${B300})`};
-		color: ${"var(--ds-icon-inverse, white)"};
+		background: ${"var(--ds-background-brand-bold, #1868DB)"};
+		border: 1px solid ${"var(--ds-background-brand-bold, #1868DB)"};
+		color: ${"var(--ds-icon-inverse, #FFFFFF)"};
 		cursor: pointer;
 	}
 `;
@@ -193,7 +192,7 @@ export const dragCornerControlButton = () => css`
 		z-index: ${akEditorUnitZIndex * 99};
 
 		&.active .${ClassName.DRAG_CORNER_BUTTON_INNER} {
-			background-color: ${"var(--ds-border-selected, #0C66E4)"};
+			background-color: ${"var(--ds-border-selected, #1868DB)"};
 			width: 10px;
 			height: 10px;
 			border-width: 2px;
@@ -217,8 +216,8 @@ export const dragCornerControlButton = () => css`
 	}
 
 	.${ClassName.DRAG_CORNER_BUTTON_INNER} {
-		border: 1px solid ${"var(--ds-border-inverse, #FFF)"};
-		background-color: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
+		border: 1px solid ${"var(--ds-border-inverse, #FFFFFF)"};
+		background-color: ${"var(--ds-background-accent-gray-subtler, #DDDEE1)"};
 		border-radius: 2px;
 		width: 5px;
 		height: 5px;
@@ -285,14 +284,10 @@ export const OverflowShadow = isDragAndDropEnabled => css`
 	}
 	.${ClassName.TABLE_LEFT_SHADOW} {
 		background:
-			linear-gradient(
-				to left,
-				transparent 0,
-				${`var(--ds-shadow-overflow-spread, ${N40A})`} 140%
-			),
+			linear-gradient(to left, transparent 0, ${"var(--ds-shadow-overflow-spread, #1E1F2129)"} 140%),
 			linear-gradient(
 				to right,
-				${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
+				${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"} 0px,
 				transparent 1px
 			);
 		left: 0px;
@@ -302,16 +297,8 @@ export const OverflowShadow = isDragAndDropEnabled => css`
 	}
 	.${ClassName.TABLE_RIGHT_SHADOW} {
 		background:
-			linear-gradient(
-				to right,
-				transparent 0,
-				${`var(--ds-shadow-overflow-spread, ${N40A})`} 140%
-			),
-			linear-gradient(
-				to left,
-				${"var(--ds-shadow-overflow-perimeter, transparent)"} 0px,
-				transparent 1px
-			);
+			linear-gradient(to right, transparent 0, ${"var(--ds-shadow-overflow-spread, #1E1F2129)"} 140%),
+			linear-gradient(to left, ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"} 0px, transparent 1px);
 		left: calc(100% - ${tableOverflowShadowWidthWide}px);
 	}
 	.${ClassName.WITH_CONTROLS} {
@@ -366,7 +353,7 @@ const columnHeaderButton = cssString => {
   cssString);
 };
 const columnHeaderButtonSelected = () => css({
-  color: `var(--ds-text-inverse, ${N0})`,
+  color: "var(--ds-text-inverse, #FFFFFF)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   backgroundColor: tableToolbarSelectedColor,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -595,8 +582,8 @@ export const hoveredWarningCell = css`
 	:not(.${ClassName.IS_RESIZING})
 		.${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {
 		td.${ClassName.HOVERED_CELL_WARNING} {
-			background-color: ${`var(--ds-background-warning, ${Y50})`} !important; /* We need to override the background-color added to the cell */
-			border: 1px solid ${`var(--ds-border-warning, ${Y200})`};
+			background-color: ${"var(--ds-background-warning, #FFF5DB)"} !important; /* We need to override the background-color added to the cell */
+			border: 1px solid ${"var(--ds-border-warning, #E06C00)"};
 		}
 	}
 `;
@@ -756,7 +743,7 @@ const insertLineActiveColor = css({
 });
 const insertLineInactiveColor = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  backgroundColor: `var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`
+  backgroundColor: "var(--ds-background-accent-gray-subtler, #DDDEE1)"
 });
 
 // Explicit pixel values required here to ensure correct positioning of line that is show on row

package/dist/esm/nodeviews/TableComponent.js

@@ -837,7 +837,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         stickyHeader: !this.props.limitedMode ? this.state.stickyHeader : undefined,
         getEditorFeatureFlags: getEditorFeatureFlags,
         tableContainerWidth: tableContainerWidth,
-        isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
+        isNumberColumnEnabled: node.attrs.isNumberColumnEnabled
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+        ,
         getScrollOffset: function getScrollOffset() {
           var _this5$wrapper;
           return ((_this5$wrapper = _this5.wrapper) === null || _this5$wrapper === void 0 ? void 0 : _this5$wrapper.scrollLeft) || 0;
@@ -899,11 +901,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         "data-testid": "sticky-scrollbar-sentinel-top"
       }), allowControls && rowControls, isDragAndDropEnabled && /*#__PURE__*/React.createElement(ExternalDropTargets, {
         editorView: view,
-        node: node,
+        node: node
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+        ,
         getScrollOffset: function getScrollOffset() {
           var _this5$wrapper2;
           return ((_this5$wrapper2 = _this5.wrapper) === null || _this5$wrapper2 === void 0 ? void 0 : _this5$wrapper2.scrollLeft) || 0;
-        },
+        }
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+        ,
         getTableWrapperWidth: function getTableWrapperWidth() {
           var _this5$wrapper3;
           return ((_this5$wrapper3 = _this5.wrapper) === null || _this5$wrapper3 === void 0 ? void 0 : _this5$wrapper3.clientWidth) || 760;

package/dist/esm/nodeviews/TableComponentWithSharedState.js

@@ -80,6 +80,7 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
   try {
     currentTablePos = getPos ? getPos() : undefined;
   } catch (e) {
+    // eslint-disable-line no-unused-vars
     currentTablePos = undefined;
   }
   var selectedTable = findTable(view.state.selection);
@@ -103,7 +104,9 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     tableActive: tableActive && !isLivePageViewMode && interaction !== 'hasNotHadInteraction',
     ordering: ordering,
     isResizing: isResizing,
-    getNode: getNode,
+    getNode: getNode
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     containerWidth: {
       width: width !== null && width !== void 0 ? width : 0,
       lineLength: lineLength

package/dist/esm/nodeviews/TableContainer.js

@@ -398,7 +398,9 @@ export var TableContainer = function TableContainer(_ref5) {
     className: classNames(className, {
       'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested && !(isChromelessEditor && isDragAndDropEnabled)
     }),
-    style: {
+    style:
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
+    {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       width: 'inherit',
       marginLeft: isChromelessEditor ? 18 : undefined,

package/dist/esm/nodeviews/TableResizer.js

@@ -510,7 +510,9 @@ export var TableResizer = function TableResizer(_ref) {
     isHandleVisible: isTableSelected,
     needExtendedResizeZone: expValEquals('platform_editor_table_resizer_extended_zone', 'isEnabled', true) ? true : !isTableSelected,
     appearance: isTableSelected && isWholeTableInDanger ? 'danger' : undefined,
-    handleHighlight: "shadow",
+    handleHighlight: "shadow"
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     handleTooltipContent: function handleTooltipContent(_ref3) {
       var update = _ref3.update;
       updateTooltip.current = update;

package/dist/esm/ui/ContentComponent.js

@@ -180,7 +180,9 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     alignY: 'bottom',
     stick: true,
     forcePlacement: true,
-    zIndex: akEditorFloatingPanelZIndex,
+    zIndex: akEditorFloatingPanelZIndex
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     offset: [0, 10]
   }), isTableSelectorEnabled && isSizeSelectorOpen && /*#__PURE__*/React.createElement(SizeSelector, {
     api: api,

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

@@ -18,12 +18,16 @@ export var DragPreview = function DragPreview(_ref) {
   var marginTop = direction === 'row' ? height / 2 - 14 : -10;
   var transform = direction === 'row' ? 'rotate(90deg)' : 'none';
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: boxStyles,
+    xcss: boxStyles
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     style: {
       width: "".concat(width, "px"),
       height: "".concat(height, "px")
     }
-  }, /*#__PURE__*/React.createElement(DragInMotionIcon, {
+  }, /*#__PURE__*/React.createElement(DragInMotionIcon
+  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+  , {
     style: {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       position: 'absolute',

package/dist/esm/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.js

@@ -41,7 +41,9 @@ export var FloatingAlignmentButtons = function FloatingAlignmentButtons(_ref) {
           }) : undefined,
           title: item.title,
           selected: item.selected,
-          disabled: item.disabled,
+          disabled: item.disabled
+          // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+          ,
           onClick: function onClick() {
             dispatchCommand(item.onClick);
           },

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

@@ -155,7 +155,9 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
     target: targetCellRef,
     mountTo: tableWrapper || mountPoint,
     boundariesElement: targetCellRef,
-    scrollableElement: scrollableElement,
+    scrollableElement: scrollableElement
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     offset: [BUTTON_OFFSET, -BUTTON_OFFSET],
     forcePlacement: true,
     allowOutOfBounds: true,

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

@@ -1,13 +1,12 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-import { N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
 import { contextualMenuTriggerSize } from '../consts';
 export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
   return css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '> div': {
       // Sits behind button to provide surface-color background
-      background: "var(--ds-surface, ".concat(N20, ")"),
+      background: "var(--ds-surface, #FFFFFF)",
       borderRadius: "var(--ds-radius-small, 3px)",
       display: 'flex',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
@@ -17,10 +16,10 @@ export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyle
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&& button': {
-      background: "var(--ds-background-neutral, none)",
+      background: "var(--ds-background-neutral, #0515240F)",
       flexDirection: 'column',
       margin: "var(--ds-space-025, 2px)",
-      outline: "2px solid ".concat("var(--ds-surface, ".concat(N0, ")")),
+      outline: "2px solid ".concat("var(--ds-surface, #FFFFFF)"),
       borderRadius: '1px',
       padding: 0,
       height: 'calc(100% - 4px)',
@@ -28,11 +27,11 @@ export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyle
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&& button:hover': {
-      background: "var(--ds-background-neutral-hovered, ".concat(N30A, ")")
+      background: "var(--ds-background-neutral-hovered, #0B120E24)"
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&& button:active': {
-      background: "var(--ds-background-neutral-pressed, rgba(179, 212, 255, 0.6))"
+      background: "var(--ds-background-neutral-pressed, #080F214A)"
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&& button > span': {
@@ -48,15 +47,15 @@ export var tableFloatingCellButtonSelectedStyles = function tableFloatingCellBut
   return css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&& button': {
-      background: "var(--ds-background-selected, ".concat(N700, ")")
+      background: "var(--ds-background-selected, #E9F2FE)"
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&& button:hover': {
-      background: "var(--ds-background-selected-hovered, ".concat(N700, ")")
+      background: "var(--ds-background-selected-hovered, #CFE1FD)"
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&& button:active': {
-      background: "var(--ds-background-selected-pressed, ".concat(N700, ")")
+      background: "var(--ds-background-selected-pressed, #8FB8F6)"
     }
   });
 };

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

@@ -157,7 +157,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           }, jsx(ArrowKeyNavigationProvider, {
             type: ArrowKeyNavigationType.COLOR,
             selectedRowIndex: selectedRowIndex || 0,
-            selectedColumnIndex: selectedColumnIndex || 0,
+            selectedColumnIndex: selectedColumnIndex || 0
+            // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+            ,
             handleClose: function handleClose() {
               _this.setState({
                 isSubmenuOpen: false
@@ -177,7 +179,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           }, jsx(ColorPalette, {
             cols: 7,
             onClick: _this.setColor,
-            selectedColor: (node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.background) || '#ffffff',
+            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,
               paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
@@ -782,6 +786,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       }, jsx(DropdownMenu
       //This needs be removed when the a11y is completely handled
       //Disabling key navigation now as it works only partially
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
       , {
         arrowKeyNavigationProviderOptions: {
           type: ArrowKeyNavigationType.MENU,
@@ -794,7 +799,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         onMouseEnter: this.handleItemMouseEnter,
         onMouseLeave: this.handleItemMouseLeave,
         fitHeight: 188,
-        fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth,
+        fitWidth: isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+        ,
         shouldFocusFirstItem: function shouldFocusFirstItem() {
           return Boolean(isCellMenuOpenByKeyboard);
         },

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

@@ -80,7 +80,9 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     // in table, but below floating dialogs like typeaheads, pickers, etc.
     ,
     zIndex: parentSticky ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex,
-    forcePlacement: true,
+    forcePlacement: true
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     offset: [-7, 0],
     stick: true
   }, jsx("div", {
@@ -89,7 +91,9 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
   // Remove ! during platform_editor_hydratable_ui cleanup
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   , {
-    editorView: editorView,
+    editorView: editorView
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     offset: [contextualMenuTriggerSize / 2, -contextualMenuTriggerSize],
     isOpen: isOpen,
     targetCellPosition: targetCellPosition,

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

@@ -3,7 +3,6 @@ var _templateObject;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
-import { N60A, N90 } from '@atlaskit/theme/colors';
 import { TableCssClassName as ClassName } from '../../types';
 import { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
 export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
@@ -17,5 +16,5 @@ export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedCo
 export var tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 ) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 20px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 20px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, #FFFFFF)", "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)", isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, #292A2E)", ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, #292A2E)");
 };

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

@@ -308,7 +308,9 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
       }, jsx(ArrowKeyNavigationProvider, {
         type: ArrowKeyNavigationType.COLOR,
         selectedRowIndex: selectedRowIndex,
-        selectedColumnIndex: selectedColumnIndex,
+        selectedColumnIndex: selectedColumnIndex
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+        ,
         handleClose: function handleClose() {
           var keyboardEvent = new KeyboardEvent('keydown', {
             key: 'ArrowDown',
@@ -323,11 +325,15 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
         isPopupPositioned: true,
         isOpenedByKeyboard: isKeyboardModeActive
       }, jsx(ColorPalette, {
-        cols: colorPalletteColumns,
+        cols: colorPalletteColumns
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+        ,
         onClick: function onClick(color) {
           setColor(color);
         },
-        selectedColor: background,
+        selectedColor: background
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+        ,
         paletteOptions: {
           palette: cellBackgroundColorPalette,
           paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
@@ -557,7 +563,9 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
     api: api,
     userIntent: "tableDragMenuPopupOpen"
   }, jsx(DropdownMenu, {
-    disableKeyboardHandling: isSubmenuOpen,
+    disableKeyboardHandling: isSubmenuOpen
+    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+    ,
     section: {
       hasSeparator: true
     },

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

@@ -50,15 +50,21 @@ export var DropdownMenu = function DropdownMenu(_ref) {
     return /*#__PURE__*/React.createElement(DropListWithOutsideListeners, {
       isOpen: true,
       shouldFitContainer: true,
-      position: popupPlacement.join(' '),
+      position: popupPlacement.join(' ')
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      ,
       handleClickOutside: function handleClickOutside() {
         return handleClose('editor');
-      },
+      }
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      ,
       handleEscapeKeydown: function handleEscapeKeydown() {
         if (!disableKeyboardHandling) {
           handleClose('handle');
         }
-      },
+      }
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      ,
       handleEnterKeydown: function handleEnterKeydown(e) {
         if (!disableKeyboardHandling) {
           e.preventDefault();
@@ -154,13 +160,17 @@ export var DropdownMenu = function DropdownMenu(_ref) {
       target: targetRefDiv,
       mountTo: mountPoint,
       boundariesElement: boundariesElement,
-      scrollableElement: scrollableElement,
+      scrollableElement: scrollableElement
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      ,
       onPlacementChanged: function onPlacementChanged(placement) {
         setPopupPlacement(placement);
       },
       fitHeight: fitHeight,
       fitWidth: fitWidth,
-      zIndex: akEditorFloatingPanelZIndex,
+      zIndex: akEditorFloatingPanelZIndex
+      // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+      ,
       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
     }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {

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

@@ -3,7 +3,6 @@ var _templateObject;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
-import { N60A, N90 } from '@atlaskit/theme/colors';
 import { TableCssClassName as ClassName } from '../../types';
 import { dragMenuDropdownWidth, TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT, TABLE_DRAG_MENU_PADDING_TOP, TABLE_DRAG_MENU_SORT_GROUP_HEIGHT } from '../consts';
 export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
@@ -17,7 +16,7 @@ export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedCo
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export var dragMenuBackgroundColorStyles = function dragMenuBackgroundColorStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: ", "px; /* move the submenu down when 'sort increasing/decreasing' appear before background color picker */\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.DRAG_SUBMENU, "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), TABLE_DRAG_MENU_PADDING_TOP + TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT, dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: ", "px; /* move the submenu down when 'sort increasing/decreasing' appear before background color picker */\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.DRAG_SUBMENU, "var(--ds-radius-small, 3px)", "var(--ds-surface-overlay, #FFFFFF)", "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)", TABLE_DRAG_MENU_PADDING_TOP + TABLE_DRAG_MENU_SORT_GROUP_HEIGHT + TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT, dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-radius-small, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, #292A2E)");
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

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

@@ -40,7 +40,9 @@ export var SizeSelector = function SizeSelector(_ref) {
   var onUnmount = function onUnmount() {
     api === null || api === void 0 || api.core.actions.focus();
   };
-  return jsx(TableSelectorPopup, {
+  return jsx(TableSelectorPopup
+  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+  , {
     defaultSize: {
       row: DEFAULT_TABLE_SELECTOR_ROWS,
       col: DEFAULT_TABLE_SELECTOR_COLS

package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js

@@ -249,7 +249,9 @@ export var DragControls = function DragControls(_ref) {
       , {
         key: "drop-target-".concat(index),
         index: index,
-        localId: currentNodeLocalId,
+        localId: currentNodeLocalId
+        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed) 
+        ,
         style: {
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           gridColumn: '1 / span 3',