@atlaskit/renderer 109.29.4 → 109.29.6

package/dist/es2019/react/nodes/tableRow.js

@@ -57,7 +57,10 @@ export default class TableRow extends React.Component {
     const childrenArray = React.Children.toArray(children);
     return /*#__PURE__*/React.createElement("tr", {
       ref: innerRef
-    }, this.props.isNumberColumnEnabled && /*#__PURE__*/React.createElement("td", {
+    }, this.props.isNumberColumnEnabled &&
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    React.createElement("td", {
       className: RendererCssClassName.NUMBER_COLUMN
     }, this.props.index), compose(this.addSortableColumn, this.addColGroupWidth)(childrenArray));
   }

package/dist/es2019/react/nodes/unknownBlock.js

@@ -1,5 +1,6 @@
 import React from 'react';
 export default function UnknownBlock(props) {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   return /*#__PURE__*/React.createElement("div", {
     className: "UnknownBlock"
   }, props.children);

package/dist/es2019/ui/ExtensionRenderer.js

@@ -124,10 +124,13 @@ const InlineNodeRendererWrapper = ({
   children
 }) => {
   if (getBooleanFF('platform.editor.inline_extension.extended_lcqdn')) {
-    return jsx("div", {
-      className: "inline-extension-renderer",
-      css: inlineExtensionStyle
-    }, children);
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      jsx("div", {
+        className: "inline-extension-renderer",
+        css: inlineExtensionStyle
+      }, children)
+    );
   }
   return jsx(Fragment, null, children);
 };

package/dist/es2019/ui/Renderer/index.js

@@ -37,7 +37,7 @@ import { nodeToReact } from '../../react/nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.29.4";
+const packageVersion = "109.29.6";
 export const defaultNodeComponents = nodeToReact;
 export class Renderer extends PureComponent {
   constructor(props) {
@@ -504,7 +504,9 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
       return () => observer.disconnect();
     }
   }, [innerRef, addTelepointer]);
-  return jsx(WidthProvider, {
+  return jsx(WidthProvider
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: `ak-renderer-wrapper is-${appearance}`,
     "data-appearance": appearance,
     shouldCheckExistingValue: getBooleanFF('platform.editor.inline_extension.extended_lcqdn') && isInsideOfInlineExtension

package/dist/es2019/ui/Renderer/style.js

@@ -20,11 +20,7 @@ import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
 export const FullPagePadding = 32;
 const tableShadowWidth = 32;
 export const TELEPOINTER_ID = 'ai-streaming-telepointer';
-const telepointerStyles = () => {
-  const {
-    colorMode
-  } = getGlobalTheme();
-
+const telepointerStyles = colorMode => {
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return css`
     #${TELEPOINTER_ID} {
@@ -395,6 +391,9 @@ const getShadowOverrides = () => {
   `;
 };
 export const rendererStyles = wrapperProps => theme => {
+  const {
+    colorMode
+  } = getGlobalTheme();
   // This is required to be compatible with styled-components prop structure.
   const themeProps = {
     theme
@@ -473,7 +472,7 @@ export const rendererStyles = wrapperProps => theme => {
         color: ${`var(--ds-text-subtlest, ${colors.N200})`};
       }
 
-      ${telepointerStyles()}
+      ${telepointerStyles(colorMode)}
       ${whitespaceSharedStyles};
       ${blockquoteSharedStyles};
       ${headingsSharedStyles()};
@@ -486,7 +485,7 @@ export const rendererStyles = wrapperProps => theme => {
       ${shadowSharedStyle};
       ${dateSharedStyle};
       ${textColorStyles};
-      ${backgroundColorStyles};
+      ${backgroundColorStyles(colorMode)};
       ${tasksAndDecisionsStyles};
       ${smartCardSharedStyles}
 

package/dist/esm/react/marks/alignment.js

@@ -16,7 +16,9 @@ var MarkWrapper = function MarkWrapper(props) {
   );
 };
 export default function Alignment(props) {
-  return jsx(MarkWrapper, {
+  return jsx(MarkWrapper
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: "fabric-editor-block-mark fabric-editor-alignment",
     "data-align": props.align
   }, props.children);

package/dist/esm/react/marks/backgroundColor.js

@@ -41,8 +41,12 @@ export default function BackgroundColor(props) {
     return _defineProperty({}, '--custom-palette-color', paletteColorValue);
   }, [paletteColorValue]);
   return /*#__PURE__*/React.createElement("span", _extends({}, props.dataAttributes, {
-    "data-background-custom-color": props.color,
-    className: "fabric-background-color-mark",
+    "data-background-custom-color": props.color
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: "fabric-background-color-mark"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: style
   }), props.children);
 }

package/dist/esm/react/marks/breakout.js

@@ -17,7 +17,9 @@ export default function Breakout(props) {
       "data-mode": props.mode,
       style: {
         width: calcBreakoutWidth(props.mode, width)
-      },
+      }
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: "fabric-editor-breakout-mark fabric-editor-block-mark"
     }, props.children);
   });

package/dist/esm/react/marks/code.js

@@ -8,7 +8,9 @@ export var isCodeMark = function isCodeMark(mark) {
 };
 export function CodeWithIntl(props) {
   var codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
-  return /*#__PURE__*/React.createElement(AkCode, _extends({
+  return /*#__PURE__*/React.createElement(AkCode
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , _extends({
     className: "code",
     codeBidiWarningLabel: codeBidiWarningLabel,
     codeBidiWarningTooltipEnabled: props.codeBidiWarningTooltipEnabled

package/dist/esm/react/marks/indentation.js

@@ -1,6 +1,7 @@
 import React from 'react';
 export default function Indentation(props) {
   return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "fabric-editor-block-mark fabric-editor-indentation-mark",
     "data-level": props.level
   }, props.children);

package/dist/esm/react/marks/strike.js

@@ -1,9 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 export default function Strike(props) {
-  return /*#__PURE__*/React.createElement("span", _extends({}, props.dataAttributes, {
-    style: {
-      textDecoration: 'line-through'
-    }
-  }), props.children);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    React.createElement("span", _extends({}, props.dataAttributes, {
+      style: {
+        textDecoration: 'line-through'
+      }
+    }), props.children)
+  );
 }

package/dist/esm/react/marks/textColor.js

@@ -45,8 +45,12 @@ export default function TextColor(props) {
     return _defineProperty({}, '--custom-palette-color', paletteColorValue);
   }, [paletteColorValue]);
   return /*#__PURE__*/React.createElement("span", _extends({}, props.dataAttributes, {
-    "data-text-custom-color": props.color,
-    className: "fabric-text-color-mark",
+    "data-text-custom-color": props.color
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: "fabric-text-color-mark"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: style
   }), props.children);
 }

package/dist/esm/react/nodes/blockCard.js

@@ -119,6 +119,7 @@ export default function BlockCard(props) {
   return jsx(AnalyticsContext, {
     data: analyticsData
   }, jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "blockCardView-content-wrap",
     "data-block-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,

package/dist/esm/react/nodes/bulletList.js

@@ -3,6 +3,7 @@ import { bulletListSelector } from '@atlaskit/adf-schema';
 import { getListIndentLevel } from '../utils/lists';
 export default function BulletList(props) {
   return /*#__PURE__*/React.createElement("ul", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: bulletListSelector.substr(1),
     "data-indent-level": props.path ? getListIndentLevel(props.path) : 1
   }, props.children);

package/dist/esm/react/nodes/codeBlock/codeBlock.js

@@ -23,7 +23,9 @@ function CodeBlock(props) {
     setWrapLongLines = _useState2[1];
   return jsx(CodeBlockContainer, {
     allowCopyToClipboard: allowCopyToClipboard,
-    allowWrapCodeBlock: allowWrapCodeBlock,
+    allowWrapCodeBlock: allowWrapCodeBlock
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     setWrapLongLines: setWrapLongLines,
     text: text,

package/dist/esm/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -20,15 +20,18 @@ var CodeBlockContainer = function CodeBlockContainer(_ref) {
     setWrapLongLines = _ref.setWrapLongLines,
     text = _ref.text,
     wrapLongLines = _ref.wrapLongLines;
-  return jsx("div", {
-    className: className,
-    css: codeBlockStyleOverrides
-  }, jsx(CodeBlockButtonContainer, {
-    allowCopyToClipboard: allowCopyToClipboard,
-    allowWrapCodeBlock: allowWrapCodeBlock,
-    setWrapLongLines: setWrapLongLines,
-    text: text,
-    wrapLongLines: wrapLongLines
-  }), children);
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    jsx("div", {
+      className: className,
+      css: codeBlockStyleOverrides
+    }, jsx(CodeBlockButtonContainer, {
+      allowCopyToClipboard: allowCopyToClipboard,
+      allowWrapCodeBlock: allowWrapCodeBlock,
+      setWrapLongLines: setWrapLongLines,
+      text: text,
+      wrapLongLines: wrapLongLines
+    }), children)
+  );
 };
 export default CodeBlockContainer;

package/dist/esm/react/nodes/codeBlock/components/codeBlockCopyButton.js

@@ -36,7 +36,9 @@ var CopyButton = function CopyButton(_ref) {
     }, jsx(Button, {
       appearance: "subtle",
       "aria-haspopup": true,
-      "aria-label": tooltip,
+      "aria-label": tooltip
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: className,
       iconBefore: jsx(CopyIcon, {
         label: tooltip

package/dist/esm/react/nodes/codeBlock/components/codeBlockWrapButton.js

@@ -36,7 +36,9 @@ var CodeBlockWrapButton = function CodeBlockWrapButton(_ref) {
     }, jsx(Button, {
       appearance: "subtle",
       "aria-haspopup": true,
-      "aria-label": wrapMessage,
+      "aria-label": wrapMessage
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: "wrap-code ".concat(wrapLongLines ? 'clicked' : ''),
       iconBefore: jsx(Icon, {
         glyph: WrapIcon,

package/dist/esm/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -36,14 +36,17 @@ var LightWeightCodeBlock = /*#__PURE__*/forwardRef(function (_ref, ref) {
     renderBidiWarnings = _useBidiWarnings.renderBidiWarnings;
   var classNames = [LightWeightCodeBlockCssClassName.CONTAINER, className].join(' ');
   return jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: classNames,
     ref: ref,
     css: [codeBlockSharedStyles(), lightWeightCodeBlockStyles]
   }, jsx("div", {
     className: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
   }, jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER
   }, jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER
   }, textRows.map(function (_, index) {
     return jsx("span", {

package/dist/esm/react/nodes/codeBlock/windowedCodeBlock.js

@@ -47,7 +47,9 @@ var WindowedCodeBlock = function WindowedCodeBlock(_ref2) {
   var memoizedLightWeightCodeBlock = jsx(MemoizedLightWeightCodeBlock, {
     ref: trackingRef,
     text: text,
-    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: rootClassName
   });
   var _useState = useState(false),
@@ -58,7 +60,9 @@ var WindowedCodeBlock = function WindowedCodeBlock(_ref2) {
     fallback: memoizedLightWeightCodeBlock
   }, jsx(CodeBlockContainer, {
     allowCopyToClipboard: allowCopyToClipboard,
-    allowWrapCodeBlock: allowWrapCodeBlock,
+    allowWrapCodeBlock: allowWrapCodeBlock
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     setWrapLongLines: setWrapLongLines,
     text: text,

package/dist/esm/react/nodes/date.js

@@ -28,13 +28,18 @@ var Date = /*#__PURE__*/function (_PureComponent) {
         parentIsIncompleteTask = _this$props.parentIsIncompleteTask,
         intl = _this$props.intl;
       var className = !!parentIsIncompleteTask && isPastDate(timestamp) ? 'date-node date-node-highlighted' : 'date-node';
-      return /*#__PURE__*/React.createElement("span", {
-        className: DateSharedCssClassName.DATE_WRAPPER
-      }, /*#__PURE__*/React.createElement("span", {
-        className: className,
-        "data-node-type": "date",
-        "data-timestamp": timestamp
-      }, parentIsIncompleteTask ? timestampToTaskContext(timestamp, intl) : timestampToString(timestamp, intl)));
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        React.createElement("span", {
+          className: DateSharedCssClassName.DATE_WRAPPER
+        }, /*#__PURE__*/React.createElement("span", {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+          className: className,
+          "data-node-type": "date",
+          "data-timestamp": timestamp
+        }, parentIsIncompleteTask ? timestampToTaskContext(timestamp, intl) : timestampToString(timestamp, intl)))
+      );
     }
   }]);
   return Date;

package/dist/esm/react/nodes/doc.js

@@ -2,13 +2,16 @@ import React from 'react';
 import { RendererCssClassName } from '../../consts';
 import { useSelectAllTrap } from '../utils/use-select-all-trap';
 export default function Doc(props) {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   return /*#__PURE__*/React.createElement("div", {
     className: RendererCssClassName.DOCUMENT
   }, props.children);
 }
 export function DocWithSelectAllTrap(props) {
   return /*#__PURE__*/React.createElement("div", {
-    ref: useSelectAllTrap(),
+    ref: useSelectAllTrap()
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: RendererCssClassName.DOCUMENT
   }, props.children);
 }

package/dist/esm/react/nodes/embedCard.js

@@ -158,6 +158,7 @@ export default function EmbedCard(props) {
     }, jsx("div", {
       css: embedCardWrapperStyles
     }, jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: "embedCardView-content-wrap",
       "data-embed-card": true,
       "data-layout": layout,

package/dist/esm/react/nodes/extension.js

@@ -17,7 +17,9 @@ export var renderExtension = function renderExtension(content, layout) {
   return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref2) {
     var width = _ref2.width;
     return /*#__PURE__*/React.createElement("div", {
-      ref: options.handleRef,
+      ref: options.handleRef
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: "".concat(RendererCssClassName.EXTENSION, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
       style: {
         width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'

package/dist/esm/react/nodes/heading-anchor.js

@@ -25,10 +25,13 @@ export var HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
 var CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
     rest = _objectWithoutProperties(props, _excluded);
-  return jsx("span", _extends({}, rest, {
-    className: HeadingAnchorWrapperClassName,
-    ref: ref
-  }), children);
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    jsx("span", _extends({}, rest, {
+      className: HeadingAnchorWrapperClassName,
+      ref: ref
+    }), children)
+  );
 });
 var copyAnchorButtonStyles = css({
   display: 'inline',

package/dist/esm/react/nodes/mediaGroup.js

@@ -72,6 +72,7 @@ var MediaGroup = /*#__PURE__*/function (_PureComponent) {
       } else {
         content = this.renderStrip();
       }
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       return /*#__PURE__*/React.createElement("div", {
         className: "MediaGroup"
       }, content);

package/dist/esm/react/nodes/multiBodiedExtension.js

@@ -78,12 +78,14 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
   var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
   function renderMbeContent(width) {
     return jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass, " ").concat(overflowContainerClass),
       style: {
         width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
       },
       "data-layout": layout
     }, jsx("nav", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: "multiBodiedExtension-navigation",
       css: navigationCssExtended,
       "data-testid": "multiBodiedExtension-navigation"
@@ -109,11 +111,14 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
         isTopLevel: path.length < 1
       });
     })), jsx("article", {
-      "data-testid": "multiBodiedExtension--frames",
+      "data-testid": "multiBodiedExtension--frames"
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: "multiBodiedExtension--frames"
     }, children));
   }
   return jsx("section", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "multiBodiedExtension--container"
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,

package/dist/esm/react/nodes/orderedList.js

@@ -18,6 +18,7 @@ export default function OrderedList(props) {
     extraProps.start = resolveOrder(props.order);
   }
   return /*#__PURE__*/React.createElement("ol", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: orderedListSelector.substr(1),
     "data-indent-level": props.path ? getListIndentLevel(props.path) : 1,
     start: props.start

package/dist/esm/react/nodes/panel.js

@@ -69,12 +69,15 @@ var Panel = function Panel(props) {
   var icon = getIcon();
   var renderIcon = function renderIcon() {
     if (icon) {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       return jsx("div", {
         className: PanelSharedCssClassName.icon
       }, icon);
     }
   };
-  return jsx(PanelStyled, {
+  return jsx(PanelStyled
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  , {
     className: PanelSharedCssClassName.prefix,
     "data-panel-type": panelType,
     "data-panel-color": panelColor,

package/dist/esm/react/nodes/table/colgroup.js

@@ -146,14 +146,19 @@ export var Colgroup = function Colgroup(props) {
     return null;
   }
   return /*#__PURE__*/React.createElement("colgroup", null, isNumberColumnEnabled && /*#__PURE__*/React.createElement("col", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: {
       width: akEditorTableNumberColumnWidth
     },
     "data-test-id": 'num'
   }), colStyles.map(function (style, idx) {
-    return /*#__PURE__*/React.createElement("col", {
-      key: idx,
-      style: style
-    });
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      React.createElement("col", {
+        key: idx,
+        style: style
+      })
+    );
   }));
 };

package/dist/esm/react/nodes/table/sticky.js

@@ -61,7 +61,9 @@ export var FixedTableDiv = function FixedTableDiv(props) {
     mode: mode
   };
   return jsx("div", _extends({}, attrs, {
-    "data-testid": "sticky-table-fixed",
+    "data-testid": "sticky-table-fixed"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: isTableResizingEnabled(rendererAppearance) ? 'fixed-table-div-custom-table-resizing' : '',
     css: fixedTableCss
   }), props.children);
@@ -108,15 +110,19 @@ export var StickyTable = function StickyTable(_ref) {
     wrapperWidth: wrapperWidth,
     rendererAppearance: rendererAppearance
   }, jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " is-sticky ").concat(shadowClassNames || ''),
     "data-layout": layout,
     style: {
       width: tableWidth
     }
   }, jsx("div", {
-    ref: innerRef,
+    ref: innerRef
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: "".concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER),
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       overflow: 'hidden'
     }
   }, jsx(Table, {

package/dist/esm/react/nodes/table.js

@@ -24,7 +24,7 @@ import { TableHeader } from './tableCell';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
 import { Table } from './table/table';
-import { isFullWidthOrFullPageAppearance } from '../utils/appearance';
+import { isFullPageAppearance, isFullWidthAppearance, isFullWidthOrFullPageAppearance } from '../utils/appearance';
 export var isTableResizingEnabled = function isTableResizingEnabled(appearance) {
   return isFullWidthOrFullPageAppearance(appearance);
 };
@@ -291,7 +291,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         isInsideOfBlockNode = _this$props.isInsideOfBlockNode,
         isinsideMultiBodiedExtension = _this$props.isinsideMultiBodiedExtension;
       var stickyMode = this.state.stickyMode;
-      var lineLength = akEditorDefaultLayoutWidth;
+      var lineLengthFixedWidth = akEditorDefaultLayoutWidth;
       var left;
       var updatedLayout;
 
@@ -309,8 +309,17 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         }
       };
       var tableWidth = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
-      if (canUseLinelength(rendererAppearance) && tableWidth > lineLength) {
-        left = lineLength / 2 - tableWidth / 2;
+
+      // Logic for table alignment in renderer
+      var isTableAlignStart = getBooleanFF('platform.editor.table.allow-table-alignment') && isFullWidthOrFullPageAppearance(rendererAppearance) && tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start';
+      var fullWidthLineLength = isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
+      var lineLength = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLength : lineLengthFixedWidth;
+      var shouldCalculateLeftForAlignment = isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidth <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance));
+      if (shouldCalculateLeftForAlignment) {
+        left = (tableWidth - lineLength) / 2;
+      }
+      if (!shouldCalculateLeftForAlignment && canUseLinelength(rendererAppearance) && tableWidth > lineLengthFixedWidth) {
+        left = lineLengthFixedWidth / 2 - tableWidth / 2;
       }
       var children = React.Children.toArray(this.props.children);
 
@@ -326,13 +335,14 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         updatedLayout = layout;
       }
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
         "data-layout": updatedLayout,
         ref: this.props.handleRef,
         style: {
           width: isTableResizingEnabled(rendererAppearance) ? tableWidth : 'inherit',
-          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-          left: left
+          left: left,
+          marginLeft: shouldCalculateLeftForAlignment && left !== undefined ? -left : undefined
         }
       }, stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
         isNumberColumnEnabled: isNumberColumnEnabled,
@@ -350,6 +360,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         tableNode: tableNode,
         rendererAppearance: rendererAppearance
       }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
         ref: this.wrapperRef,
         onScroll: this.props.stickyHeaders && this.onWrapperScrolled

package/dist/esm/react/nodes/tableCell.js

@@ -135,6 +135,7 @@ var getWithCellProps = function getWithCellProps(WrapperComponent) {
       // the background color is not taken from the inline style.
       // Instead it is taken from the data-cell-background attribute
       // (added via getDataAttributes below).
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       ,
       style: getStyle({
         background: background,
@@ -143,7 +144,9 @@ var getWithCellProps = function getWithCellProps(WrapperComponent) {
         colorMode: colorMode
       }),
       colorname: colorName,
-      onClick: onClick,
+      onClick: onClick
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: className
     }, getDataAttributes(colwidth, background), {
       "aria-sort": ariaSort
@@ -164,11 +167,13 @@ export var withSortableColumn = function withSortableColumn(WrapperComponent) {
       return /*#__PURE__*/React.createElement(WrapperComponent, props);
     }
     return /*#__PURE__*/React.createElement(WrapperComponent, _extends({}, props, {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: RendererCssClassName.SORTABLE_COLUMN_WRAPPER,
       ariaSort: getSortOrderLabel(intl, sortOrdered)
     }), /*#__PURE__*/React.createElement("div", {
       className: RendererCssClassName.SORTABLE_COLUMN
     }, children, /*#__PURE__*/React.createElement("figure", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: "".concat(RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, " ").concat(sortOrderedClassName)
     }, /*#__PURE__*/React.createElement(SortingIcon, {
       isSortingAllowed: !!onSorting,