@atlaskit/renderer 93.0.3 → 95.0.0

package/dist/es2019/ui/Expand.js

@@ -31,7 +31,9 @@ const Container = props => {
   const sharedContainerStyles = sharedExpandStyles.containerStyles(props);
 
   const styles = themeProps => css`
-    ${sharedContainerStyles(themeProps)}
+    ${sharedContainerStyles({
+    theme: themeProps
+  })}
     padding: 0;
     padding-bottom: ${paddingBottom};
   `;
@@ -45,7 +47,9 @@ const TitleContainer = props => {
   const paddingBottom = `${!props.expanded ? gridSize() : 0}px`;
 
   const styles = themeProps => css`
-    ${sharedExpandStyles.titleContainerStyles(themeProps)}
+    ${sharedExpandStyles.titleContainerStyles({
+    theme: themeProps
+  })}
     padding: ${gridSize()}px;
     padding-bottom: ${paddingBottom};
   `;
@@ -62,7 +66,9 @@ const ContentContainer = props => {
   const visibility = props.expanded ? 'visible' : 'hidden';
 
   const styles = themeProps => css`
-    ${sharedContentStyles(themeProps)};
+    ${sharedContentStyles({
+    theme: themeProps
+  })};
     padding-right: ${gridSize() * 2}px;
     padding-left: ${gridSize() * 5 - gridSize() / 2}px;
     visibility: ${visibility};

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

@@ -61,18 +61,13 @@ export class Renderer extends PureComponent {
       }
     });
 
-    _defineProperty(this, "getSchema", () => {
-      const {
-        schema,
-        adfStage
-      } = this.props;
-
+    _defineProperty(this, "getSchema", memoizeOne((schema, adfStage) => {
       if (schema) {
         return schema;
       }
 
       return getSchemaBasedOnStage(adfStage);
-    });
+    }));
 
     _defineProperty(this, "onMouseDownEditView", () => {
       // When the user is deselecting text on the screen by clicking, if they are clicking outside
@@ -283,7 +278,7 @@ export class Renderer extends PureComponent {
     try {
       var _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
 
-      const schema = this.getSchema();
+      const schema = this.getSchema(this.props.schema, this.props.adfStage);
       const {
         result,
         stat,

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

@@ -3,6 +3,7 @@ import { themed } from '@atlaskit/theme/components';
 import { gridSize, fontFamily, fontSize, borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
+import { token } from '@atlaskit/tokens';
 import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles } from '@atlaskit/editor-common/styles';
 import { shadowClassNames } from '@atlaskit/editor-common/ui';
 import { editorFontSize, blockNodesVerticalMargin, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, gridMediumMaxWidth, akEditorFullWidthLayoutWidth, akEditorStickyHeaderZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
@@ -213,7 +214,7 @@ const tableSortableColumnStyle = ({
             outline: unset;
           }
           &:focus-visible {
-            border-color: ${colors.B300};
+            border-color: ${token('color.border.focused', colors.B300)};
           }
         }
 
@@ -288,8 +289,8 @@ export const rendererStyles = wrapperProps => theme => {
     font-size: ${editorFontSize(themeProps)}px;
     line-height: 1.5rem;
     color: ${themed({
-    light: colors.N800,
-    dark: '#B8C7E0'
+    light: token('color.text', colors.N800),
+    dark: token('color.text', '#B8C7E0')
   })(themeProps)};
 
     .${RendererCssClassName.DOCUMENT}::after {
@@ -331,13 +332,17 @@ export const rendererStyles = wrapperProps => theme => {
     }
 
     & span.akActionMark {
-      color: ${colors.B400};
+      color: ${token('color.link', colors.B400)};
       text-decoration: none;
 
       &:hover {
-        color: ${colors.B300};
+        color: ${token('color.link', colors.B300)};
         text-decoration: underline;
       }
+
+      &:active {
+        color: ${token('color.link.pressed', colors.B500)};
+      }
     }
 
     & span.akActionMark {
@@ -373,13 +378,13 @@ export const rendererStyles = wrapperProps => theme => {
 
     & span.date-node {
       background: ${themed({
-    light: colors.N30A,
-    dark: colors.DN70
+    light: token('color.background.neutral', colors.N30A),
+    dark: token('color.background.neutral', colors.DN70)
   })(themeProps)};
       border-radius: ${borderRadius()}px;
       color: ${themed({
-    light: colors.N800,
-    dark: colors.DN600
+    light: token('color.text', colors.N800),
+    dark: token('color.text', colors.DN600)
   })(themeProps)};
       padding: 2px 4px;
       margin: 0 1px;
@@ -387,8 +392,8 @@ export const rendererStyles = wrapperProps => theme => {
     }
 
     & span.date-node-highlighted {
-      background: ${colors.R50};
-      color: ${colors.R500};
+      background: ${token('color.background.danger', colors.R50)};
+      color: ${token('color.text.danger', colors.R500)};
     }
 
     & .renderer-image {
@@ -506,19 +511,19 @@ export const rendererStyles = wrapperProps => theme => {
       table[data-number-column='true'] {
         .${RendererCssClassName.NUMBER_COLUMN} {
           background-color: ${themed({
-    light: akEditorTableToolbar,
-    dark: akEditorTableToolbarDark
+    light: token('color.background.neutral', akEditorTableToolbar),
+    dark: token('color.background.neutral', akEditorTableToolbarDark)
   })(themeProps)};
           border-right: 1px solid
             ${themed({
-    light: akEditorTableBorder,
-    dark: akEditorTableBorderDark
+    light: token('color.border', akEditorTableBorder),
+    dark: token('color.border', akEditorTableBorderDark)
   })(themeProps)};
           width: ${akEditorTableNumberColumnWidth}px;
           text-align: center;
           color: ${themed({
-    light: colors.N200,
-    dark: colors.DN400
+    light: token('color.text.subtlest', colors.N200),
+    dark: token('color.text.subtlest', colors.DN400)
   })(themeProps)};
           font-size: ${relativeFontSizeToBase16(fontSize())};
         }
@@ -537,13 +542,13 @@ export const rendererStyles = wrapperProps => theme => {
 
       border-right: 1px solid
         ${themed({
-    light: akEditorTableBorder,
-    dark: akEditorTableBorderDark
+    light: token('color.border', akEditorTableBorder),
+    dark: token('color.border', akEditorTableBorderDark)
   })(themeProps)};
       border-bottom: 1px solid
         ${themed({
-    light: akEditorTableBorder,
-    dark: akEditorTableBorderDark
+    light: token('color.border', akEditorTableBorder),
+    dark: token('color.border', akEditorTableBorderDark)
   })(themeProps)};
 
       /* this is to compensate for the table border */
@@ -569,20 +574,20 @@ export const rendererStyles = wrapperProps => theme => {
     .sticky td {
       box-shadow: 0px 1px
           ${themed({
-    light: akEditorTableBorder,
-    dark: akEditorTableBorderDark
+    light: token('color.border', akEditorTableBorder),
+    dark: token('color.border', akEditorTableBorderDark)
   })(themeProps)},
         0px -0.5px ${themed({
-    light: akEditorTableBorder,
-    dark: akEditorTableBorderDark
+    light: token('color.border', akEditorTableBorder),
+    dark: token('color.border', akEditorTableBorderDark)
   })(themeProps)},
         inset -1px 0px ${themed({
-    light: akEditorTableToolbar,
-    dark: akEditorTableToolbarDark
+    light: token('color.border', akEditorTableToolbar),
+    dark: token('color.border', akEditorTableToolbarDark)
   })(themeProps)},
         0px -1px ${themed({
-    light: akEditorTableToolbar,
-    dark: akEditorTableToolbarDark
+    light: token('color.border', akEditorTableToolbar),
+    dark: token('color.border', akEditorTableToolbarDark)
   })(themeProps)};
     }
 

package/dist/es2019/ui/Renderer/truncated-wrapper.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
+import { token } from '@atlaskit/tokens';
 
 const fadeOutStyles = (maxHeight, top, backgroundColor) => css`
   position: relative;
@@ -14,7 +15,7 @@ const fadeOutStyles = (maxHeight, top, backgroundColor) => css`
     left: 0;
     right: 0;
     background-image: linear-gradient(
-      rgba(255, 255, 255, 0),
+      ${token('color.background.neutral.subtle', 'rgba(255, 255, 255, 0)')},
       ${backgroundColor}
     );
   }
@@ -37,13 +38,14 @@ const FadeOut = props => {
 export class TruncatedWrapper extends Component {
   constructor(props) {
     super(props);
-  }
+  } // TODO: Quality ticket as elevation.surface will be issue when sits top of modal. https://product-fabric.atlassian.net/browse/DSP-4123
+
 
   render() {
     const {
       height = 95,
       fadeHeight = 24,
-      backgroundColor = 'white',
+      backgroundColor = token('elevation.surface', 'white'),
       children
     } = this.props;
     return jsx(FadeOut, {

package/dist/es2019/ui/SortingIcon.js

@@ -5,13 +5,15 @@ import { gridSize } from '@atlaskit/theme/constants';
 import { N20, N30 } from '@atlaskit/theme/colors';
 import { SortOrder } from '@atlaskit/editor-common/types';
 import { sortingIconMessages } from '../messages';
-import { injectIntl } from 'react-intl-next'; // We use data url here because of this issue:
+import { injectIntl } from 'react-intl-next';
+import { token } from '@atlaskit/tokens'; // We use data url here because of this issue:
 // https://product-fabric.atlassian.net/browse/ED-8001
 // Remove this workaround if Firefox has fixed: https://bugzilla.mozilla.org/show_bug.cgi?id=1664350
+// TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4136
 
 export const TableSortIconDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-8-6h24v24H-8z"></path><path d="M3 8.509V1c0-.552.449-1 1-1 .552 0 1 .448 1 1V8.51l1.217-1.206a1.05 1.05 0 011.477 0 1.03 1.03 0 01.004 1.463l-.003.002-2.956 2.93a1.053 1.053 0 01-1.478 0L.305 8.767a1.03 1.03 0 01.001-1.464 1.05 1.05 0 011.477 0L3 8.508z" fill="#42526E"></path></g></svg>`)}`;
 const TABLE_SORTING_ICON_CLASS = 'table-sorting-icon';
-export let StatusClassNames;
+export let StatusClassNames; // TODO: get design to check border
 
 (function (StatusClassNames) {
   StatusClassNames["ASC"] = "sorting-icon-svg__asc";
@@ -28,14 +30,14 @@ const wrapperStyles = css`
   margin: 6px;
   right: 0;
   top: 0;
-  border: 2px solid #fff;
+  border: 2px solid ${token('color.border.inverse', '#fff')};
   border-radius: ${gridSize() / 2}px;
-  background-color: ${N20};
+  background-color: ${token('color.background.neutral.subtle', N20)};
   justify-content: center;
   align-items: center;
 
   &:hover {
-    background-color: ${N30};
+    background-color: ${token('color.background.neutral.subtle.hovered', N30)};
   }
 
   &.${StatusClassNames.SORTING_NOT_ALLOWED} {

package/dist/es2019/ui/annotations/draft/component.js

@@ -13,7 +13,7 @@ import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 const markStyles = props => css`
   color: inherit;
   background-color: unset;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
 
   ${AnnotationSharedCSSByState(props).focus};
 `;

package/dist/es2019/ui/annotations/element/mark.js

@@ -9,7 +9,7 @@ import { AnnotationMarkStates } from '@atlaskit/adf-schema';
 const markStyles = props => css`
   color: inherit;
   background-color: unset;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-tap-highlight-color: transparent;
 
   &[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}'] {
     ${AnnotationSharedCSSByState({

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "93.0.3",
+	"version": "95.0.0",
 	"sideEffects": false
 }

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

@@ -6,11 +6,12 @@ var _templateObject;
 /** @jsx jsx */
 import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
-import { B400, B300 } from '@atlaskit/theme/colors';
+import { B400, B300, B500 } from '@atlaskit/theme/colors';
 import { getEventHandler } from '../../utils';
 import { PLATFORM, MODE } from '../../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics/enums';
-var anchorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), B400, B300);
+import { token } from '@atlaskit/tokens';
+var anchorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n\n  &:active {\n    color: ", ";\n  }\n"])), token('color.link', B400), token('color.link', B300), token('color.link.pressed', B500));
 export default function Link(props) {
   var href = props.href,
       target = props.target,

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

@@ -14,6 +14,9 @@ import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { useFeatureFlags } from '../../use-feature-flags';
 import CopyButton from './codeBlockCopyButton';
 
+// TODO: Quality ticket https://product-fabric.atlassian.net/browse/DSP-4118
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var codeBlockStyle = function codeBlockStyle(props) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    tab-size: 4;\n    [data-ds--code--code-block] {\n      font-size: ", ";\n      line-height: 1.5rem;\n      background-image: ", ";\n      background-attachment: local, scroll, scroll;\n      background-position: 100% 0, 100% 0, 0 0;\n    }\n  "])), relativeFontSizeToBase16(fontSize()), overflowShadow({
     background: themed({
@@ -23,6 +26,8 @@ var codeBlockStyle = function codeBlockStyle(props) {
     width: "".concat(gridSize(), "px")
   }));
 };
+/* eslint-enable */
+
 
 function CodeBlock(props) {
   var text = props.text,

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

@@ -13,7 +13,8 @@ import CopyIcon from '@atlaskit/icon/glyph/copy';
 import { N20, N30, N700 } from '@atlaskit/theme/colors';
 import { CopyTextConsumer } from './copy-text-provider';
 import { codeBlockCopyButtonMessages } from '../../messages';
-var copyButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid #fff;\n    border-radius: 4px;\n    background-color: ", ";\n    color: rgb(66, 82, 110);\n  }\n\n  button:hover {\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: #fff !important;\n  }\n"])), N20, N30, N700);
+import { token } from '@atlaskit/tokens';
+var copyButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid ", ";\n    border-radius: 4px;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  button:hover {\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: ", " !important;\n  }\n"])), token('color.border.inverse', '#fff'), token('color.background.neutral.subtle', N20), token('color.icon', 'rgb(66, 82, 110)'), token('color.background.neutral.hovered', N30), token('color.background.neutral.bold.pressed', N700), token('color.icon.inverse', '#fff'));
 
 var CopyButton = function CopyButton(_ref) {
   var content = _ref.content,

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

@@ -27,6 +27,7 @@ import LinkIcon from '@atlaskit/icon/glyph/link';
 import Tooltip from '@atlaskit/tooltip';
 import { injectIntl } from 'react-intl-next';
 import { headingAnchorLinkMessages } from '../../messages';
+import { token } from '@atlaskit/tokens';
 export var HeadingAnchorWrapperClassName = 'heading-anchor-wrapper';
 var CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
@@ -37,7 +38,7 @@ var CopyAnchorWrapperWithRef = /*#__PURE__*/React.forwardRef(function (props, re
     ref: ref
   }), children);
 });
-var copyAnchorButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), N500);
+var copyAnchorButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), token('color.icon', N500));
 
 var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(HeadingAnchor, _React$PureComponent);
@@ -126,7 +127,7 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
       }, jsx(LinkIcon, {
         label: _this.getCopyAriaLabel(),
         size: _this.props.level > 3 ? 'small' : 'medium',
-        primaryColor: _this.state.isClicked ? B400 : N200
+        primaryColor: _this.state.isClicked ? token('color.icon.selected', B400) : token('color.icon.subtle', N200)
       }));
     });
 

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

@@ -1,45 +1,45 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
-import * as colors from '@atlaskit/theme/colors';
+import * as colors from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+
 var N40A = colors.N40A;
+import { token } from '@atlaskit/tokens';
 import { findHorizontalOverflowScrollParent } from '../../../utils';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export var tableStickyPadding = 8;
-var fixedTableDivModeToPosition = {
-  stick: 'fixed',
-  'pin-bottom': 'absolute'
-};
-
-var getModeSpecificStyles = function getModeSpecificStyles(mode) {
-  if (mode === 'none') {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: none;\n    "])));
-  } else {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: ", ";\n    "])), fixedTableDivModeToPosition[mode]);
-  }
-};
+var modeSpecficStyles = {
+  none: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: none;\n  "]))),
+  stick: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: fixed;\n  "]))),
+  'pin-bottom': css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: absolute;\n  "])))
+}; // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
 
 var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  top: ", "px;\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid white;\n  background: white;\n  box-shadow: 0 6px 4px -4px ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".right-shadow::after,\n    &\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), top, width, akEditorStickyHeaderZIndex, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, N40A, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid\n    ", ";\n  background: ", ";\n  box-shadow: ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".right-shadow::after,\n    &\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), typeof top === 'number' && "top: ".concat(top, "px;"), width, akEditorStickyHeaderZIndex, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, token('elevation.surface', 'white'), token('elevation.surface.overlay', 'white'), token('elevation.shadow.overflow', "0 6px 4px -4px ".concat(N40A)), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
 };
 
 export var FixedTableDiv = function FixedTableDiv(props) {
   var top = props.top,
       wrapperWidth = props.wrapperWidth,
       mode = props.mode;
-  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), getModeSpecificStyles(mode)];
-  return jsx("div", {
+  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), modeSpecficStyles === null || modeSpecficStyles === void 0 ? void 0 : modeSpecficStyles[mode]];
+  var attrs = {
+    mode: mode
+  };
+  return jsx("div", _extends({}, attrs, {
+    "data-testid": "sticky-table-fixed",
     css: fixedTableCss
-  }, props.children);
+  }), props.children);
 };
 export var StickyTable = function StickyTable(_ref) {
   var top = _ref.top,