@atlaskit/dynamic-table 14.2.3 → 14.4.0

package/dist/cjs/styled/EmptyBody.js

@@ -1,44 +1,39 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EmptyViewContainer = exports.EmptyViewWithFixedHeight = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _core = require("@emotion/core");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _math = require("@atlaskit/theme/math");
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  margin: auto;\n  padding: 10px;\n  text-align: center;\n  width: 50%;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+/** @jsx jsx */
+var fixedHeightStyles = (0, _core.css)({
+  height: "".concat((0, _constants.gridSize)() * 18, "px")
+});
 
-var EmptyViewWithFixedHeight = _styledComponents.default.div(_templateObject(), (0, _math.multiply)(_constants.gridSize, 18));
+var EmptyViewWithFixedHeight = function EmptyViewWithFixedHeight(_ref) {
+  var children = _ref.children;
+  return (0, _core.jsx)("div", {
+    css: fixedHeightStyles
+  }, children);
+};
 
 exports.EmptyViewWithFixedHeight = EmptyViewWithFixedHeight;
+var emptyViewContainerStyles = (0, _core.css)({
+  margin: 'auto',
+  padding: '10px',
+  textAlign: 'center',
+  width: '50%'
+});
 
-var EmptyViewContainer = _styledComponents.default.div(_templateObject2());
+var EmptyViewContainer = function EmptyViewContainer(_ref2) {
+  var children = _ref2.children;
+  return (0, _core.jsx)("div", {
+    css: emptyViewContainerStyles
+  }, children);
+};
 
 exports.EmptyViewContainer = EmptyViewContainer;

package/dist/cjs/styled/LoadingContainer.js

@@ -7,50 +7,55 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SpinnerContainer = exports.ContentsContainer = exports.Container = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _core = require("@emotion/core");
 
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  pointer-events: none;\n  opacity: ", ";\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+/** @jsx jsx */
+var CSS_VAR_CONTENTS_OPACITY = '--contents-opacity';
+var containerStyles = (0, _core.css)({
+  position: 'relative'
+});
 
-var Container = _styledComponents.default.div(_templateObject());
+var Container = function Container(_ref) {
+  var children = _ref.children;
+  return (0, _core.jsx)("div", {
+    css: containerStyles
+  }, children);
+};
 
 exports.Container = Container;
-
-var ContentsContainer = _styledComponents.default.div(_templateObject2(), function (p) {
-  return p.contentsOpacity;
+var contentsContainerStyles = (0, _core.css)({
+  pointerEvents: 'none',
+  opacity: "var(".concat(CSS_VAR_CONTENTS_OPACITY, ")")
 });
 
+var ContentsContainer = function ContentsContainer(_ref2) {
+  var contentsOpacity = _ref2.contentsOpacity,
+      children = _ref2.children;
+  return (0, _core.jsx)("div", {
+    style: (0, _defineProperty2.default)({}, CSS_VAR_CONTENTS_OPACITY, contentsOpacity),
+    css: [contentsContainerStyles]
+  }, children);
+};
+
 exports.ContentsContainer = ContentsContainer;
+var spinnerContainerStyles = (0, _core.css)({
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
 
-var SpinnerContainer = _styledComponents.default.div(_templateObject3());
+var SpinnerContainer = function SpinnerContainer(_ref4) {
+  var children = _ref4.children;
+  return (0, _core.jsx)("div", {
+    css: spinnerContainerStyles
+  }, children);
+};
 
 exports.SpinnerContainer = SpinnerContainer;

package/dist/cjs/styled/LoadingContainerAdvanced.js

@@ -7,50 +7,56 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SpinnerContainer = exports.SpinnerBackdrop = exports.Container = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("react");
 
-var _constants = require("@atlaskit/theme/constants");
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  top: 0;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", "px;\n  position: relative;\n"]);
+var _core = require("@emotion/core");
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+var _constants = require("@atlaskit/theme/constants");
 
-  return data;
-}
+/** @jsx jsx */
+var containerStyles = (0, _core.css)({
+  marginBottom: "".concat((0, _constants.gridSize)() * 3, "px"),
+  position: 'relative'
+});
 
-var Container = _styledComponents.default.div(_templateObject(), (0, _constants.gridSize)() * 3);
+var Container = function Container(props) {
+  return (0, _core.jsx)("div", (0, _extends2.default)({
+    css: containerStyles
+  }, props));
+};
 
 exports.Container = Container;
+var spinnerBackdropStyles = (0, _core.css)({
+  pointerEvents: 'none',
+  position: 'absolute',
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center'
+});
 
-var SpinnerBackdrop = _styledComponents.default.div(_templateObject2());
+var SpinnerBackdrop = function SpinnerBackdrop(_ref) {
+  var children = _ref.children;
+  return (0, _core.jsx)("div", {
+    css: spinnerBackdropStyles
+  }, children);
+};
 
 exports.SpinnerBackdrop = SpinnerBackdrop;
-
-var SpinnerContainer = _styledComponents.default.div(_templateObject3());
-
+var spinnerContainerStyles = (0, _core.css)({
+  position: 'relative',
+  top: 0
+});
+var SpinnerContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var children = _ref2.children;
+  return (0, _core.jsx)("div", {
+    css: spinnerContainerStyles,
+    ref: ref
+  }, children);
+});
 exports.SpinnerContainer = SpinnerContainer;

package/dist/cjs/styled/TableCell.js

@@ -7,24 +7,30 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TableBodyCell = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _constants = require("./constants");
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  ", " ", ";\n"]);
+var _core = require("@emotion/core");
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _constants = require("./constants");
 
-var TableBodyCell = _styledComponents.default.td(_templateObject(), function (props) {
-  return (0, _constants.truncateStyle)(props);
-}, _constants.cellStyle);
+/** @jsx jsx */
+var TableBodyCell = function TableBodyCell(_ref) {
+  var width = _ref.width,
+      isFixedSize = _ref.isFixedSize,
+      shouldTruncate = _ref.shouldTruncate,
+      innerRef = _ref.innerRef,
+      props = (0, _objectWithoutProperties2.default)(_ref, ["width", "isFixedSize", "shouldTruncate", "innerRef"]);
+  return (0, _core.jsx)("td", (0, _extends2.default)({
+    style: (0, _constants.getTruncationStyleVars)({
+      width: width
+    }),
+    css: [_constants.truncationWidthStyles, isFixedSize && shouldTruncate && _constants.fixedSizeTruncateStyles, isFixedSize && _constants.overflowTruncateStyles, _constants.cellStyles] // HOC withDimensions complains about the types but it is working fine
+    // @ts-ignore
+    ,
+    ref: innerRef
+  }, props));
+};
 
 exports.TableBodyCell = TableBodyCell;

package/dist/cjs/styled/TableHead.js

@@ -1,72 +1,184 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.HeadCell = exports.Head = void 0;
+exports.HeadCell = exports.getArrowStyles = exports.Head = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _colors = require("@atlaskit/theme/colors");
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _theme = require("../theme");
+var _react = require("react");
 
-var _constants = require("./constants");
+var _core = require("@emotion/core");
 
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", " \n  ", " \n  ", " \n  border: none;\n  color: ", ";\n  box-sizing: border-box;\n  font-size: 12px;\n  font-weight: 600;\n  position: relative;\n  text-align: left;\n  vertical-align: top;\n  &:focus {\n    outline: solid 2px ", ";\n  }\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
+var _colors = require("@atlaskit/theme/colors");
 
-  return data;
-}
+var _components = require("@atlaskit/theme/components");
 
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  border-bottom: 2px solid ", ";\n  ", ";\n"]);
+var _constants = require("@atlaskit/theme/constants");
 
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
+var _tokens = require("@atlaskit/tokens");
 
-  return data;
-}
+var _constants2 = require("../internal/constants");
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  display: block;\n"]);
+var _theme = require("../theme");
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+var _constants3 = require("./constants");
 
-  return data;
-}
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-var rankingStyles = (0, _styledComponents.css)(_templateObject());
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var Head = _styledComponents.default.thead(_templateObject2(), _theme.head.borderColor, function (_ref) {
-  var isRanking = _ref.isRanking;
-  return isRanking && rankingStyles;
+var gridSize = (0, _constants.gridSize)();
+var CSS_VAR_TEXT_COLOR = '--local-dynamic-table-text-color';
+var rankingStyles = (0, _core.css)({
+  display: 'block'
 });
 
-exports.Head = Head;
-
-var HeadCell = _styledComponents.default.th(_templateObject3(), function (_ref2) {
-  var onClick = _ref2.onClick;
-  return (0, _constants.onClickStyle)({
-    onClick: Boolean(onClick)
+var getHeadStyles = function getHeadStyles(theme) {
+  return (0, _core.css)({
+    borderBottom: "2px solid ".concat((0, _tokens.token)('color.border.neutral', _theme.head.borderColor({
+      theme: theme
+    })))
   });
-}, function (p) {
-  return (0, _constants.truncateStyle)(p);
-}, function (p) {
-  return (0, _constants.arrowsStyle)(p);
-}, _constants.cellStyle, _theme.head.textColor, _colors.B100);
+};
 
+var Head = function Head(_ref) {
+  var isRanking = _ref.isRanking,
+      props = (0, _objectWithoutProperties2.default)(_ref, ["isRanking"]);
+  var theme = (0, _components.useGlobalTheme)();
+  return (0, _core.jsx)("thead", (0, _extends2.default)({
+    css: [getHeadStyles(theme), isRanking && rankingStyles]
+  }, props));
+};
+
+exports.Head = Head;
+var headCellStyles = (0, _core.css)([_constants3.cellStyles, {
+  border: 'none',
+  boxSizing: 'border-box',
+  fontSize: '12px',
+  fontWeight: 600,
+  position: 'relative',
+  textAlign: 'left',
+  verticalAlign: 'top',
+  color: (0, _tokens.token)('color.text.lowEmphasis', "var(".concat(CSS_VAR_TEXT_COLOR, ")")),
+  '&:focus': {
+    outline: "solid 2px ".concat((0, _tokens.token)('color.border.focus', _colors.B100))
+  }
+}]); // this needs to be made static: https://product-fabric.atlassian.net/browse/DSP-2011
+
+var getArrowStyles = function getArrowStyles(isSortable, sortOrder, theme) {
+  if (!isSortable) {
+    return '';
+  }
+
+  var pseudoBaseStyles = {
+    border: '3px solid transparent',
+    display: 'block',
+    height: 0,
+    right: "-".concat(gridSize, "px"),
+    width: 0,
+    '@media (forced-colors: active)': {
+      border: "3px solid ".concat(_theme.MSThemeColors.Background)
+    }
+  };
+  return (0, _core.css)({
+    '& > span': {
+      position: 'relative',
+      '&::before': _objectSpread(_objectSpread({}, pseudoBaseStyles), {}, {
+        position: 'absolute',
+        borderBottom: "3px solid ".concat(sortOrder === _constants2.ASC ? _theme.arrow.selectedColor({
+          theme: theme
+        }) : _theme.arrow.defaultColor({
+          theme: theme
+        })),
+        bottom: '8px',
+        content: '""'
+      }),
+      '&::after': _objectSpread(_objectSpread({}, pseudoBaseStyles), {}, {
+        position: 'absolute',
+        borderTop: "3px solid ".concat(sortOrder === _constants2.DESC ? _theme.arrow.selectedColor({
+          theme: theme
+        }) : _theme.arrow.defaultColor({
+          theme: theme
+        })),
+        bottom: 0,
+        content: '""'
+      })
+    },
+    '&:hover > span': {
+      '&::before': {
+        borderBottom: "3px solid\n          ".concat(sortOrder === _constants2.ASC ? _theme.arrow.selectedColor({
+          theme: theme
+        }) : _theme.arrow.hoverColor({
+          theme: theme
+        }))
+      },
+      '&::after': {
+        borderTop: "3px solid\n          ".concat(sortOrder === _constants2.DESC ? _theme.arrow.selectedColor({
+          theme: theme
+        }) : _theme.arrow.hoverColor({
+          theme: theme
+        }))
+      }
+    },
+    '@media (forced-colors: active)': {
+      '& > span': {
+        '&::before': {
+          borderBottom: "3px solid\n            ".concat(sortOrder === _constants2.ASC ? _theme.MSThemeColors.SelectedBackground : _theme.MSThemeColors.Text)
+        },
+        '&::after': {
+          borderTop: "3px solid\n            ".concat(sortOrder === _constants2.DESC ? _theme.MSThemeColors.SelectedBackground : _theme.MSThemeColors.Text)
+        }
+      },
+      '&:hover > span': {
+        '&::before': {
+          borderBottom: "3px solid\n            ".concat(sortOrder === _constants2.ASC ? _theme.MSThemeColors.SelectedBackground : _theme.MSThemeColors.Text)
+        },
+        '&::after': {
+          borderTop: "3px solid\n            ".concat(sortOrder === _constants2.DESC ? _theme.MSThemeColors.SelectedBackground : _theme.MSThemeColors.Text)
+        }
+      }
+    }
+  });
+};
+
+exports.getArrowStyles = getArrowStyles;
+var onClickStyles = (0, _core.css)({
+  '&:hover': {
+    cursor: 'pointer',
+    backgroundColor: (0, _tokens.token)('color.background.subtleNeutral.hover', _colors.N30A)
+  }
+});
+var HeadCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var width = _ref2.width,
+      children = _ref2.children,
+      isSortable = _ref2.isSortable,
+      sortOrder = _ref2.sortOrder,
+      isFixedSize = _ref2.isFixedSize,
+      shouldTruncate = _ref2.shouldTruncate,
+      onClick = _ref2.onClick,
+      style = _ref2.style,
+      rest = (0, _objectWithoutProperties2.default)(_ref2, ["width", "children", "isSortable", "sortOrder", "isFixedSize", "shouldTruncate", "onClick", "style"]);
+  var theme = (0, _components.useGlobalTheme)();
+
+  var mergedStyles = _objectSpread(_objectSpread(_objectSpread({}, style), width && (0, _constants3.getTruncationStyleVars)({
+    width: width
+  })), {}, (0, _defineProperty2.default)({}, CSS_VAR_TEXT_COLOR, _theme.head.textColor({
+    theme: theme
+  })));
+
+  return (0, _core.jsx)("th", (0, _extends2.default)({
+    style: mergedStyles,
+    css: [headCellStyles, onClick && onClickStyles, _constants3.truncationWidthStyles, isFixedSize && shouldTruncate && _constants3.fixedSizeTruncateStyles, isFixedSize && _constants3.overflowTruncateStyles, getArrowStyles(isSortable, sortOrder, theme)],
+    onClick: onClick,
+    ref: ref
+  }, rest), children);
+});
 exports.HeadCell = HeadCell;

package/dist/cjs/styled/TableRow.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -9,50 +7,46 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TableBodyRow = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _theme = require("../theme");
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n        background-color: ", ";\n      "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n      background-color: ", ";\n    "]);
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-  return data;
-}
+var _react = require("react");
 
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  &:hover {\n    ", "\n  }\n\n  &:focus {\n    outline: ", " solid ", ";\n    outline-offset: -", ";\n  }\n"]);
+var _core = require("@emotion/core");
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+var _tokens = require("@atlaskit/tokens");
 
-  return data;
-}
-
-var outlineWidth = '2px';
-
-var TableBodyRow = _styledComponents.default.tr(_templateObject(), function (_ref) {
-  var isHighlighted = _ref.isHighlighted;
-  return isHighlighted && (0, _styledComponents.css)(_templateObject2(), _theme.row.highlightedBackground);
-}, function (_ref2) {
-  var isHighlighted = _ref2.isHighlighted;
-  return (0, _styledComponents.css)(_templateObject3(), isHighlighted ? _theme.row.hoverHighlightedBackground : _theme.row.hoverBackground);
-}, outlineWidth, _theme.row.focusOutline, outlineWidth);
+var _DynamicTable = require("./DynamicTable");
 
+/** @jsx jsx */
+var rowStyles = (0, _core.css)({
+  '&:focus': {
+    outline: "2px solid ".concat((0, _tokens.token)('color.border.focus', "var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, ")"))),
+    outlineOffset: "-2px"
+  }
+});
+var rowBackgroundStyles = (0, _core.css)({
+  '&:hover': {
+    backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.hover', "var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, ")"))
+  }
+});
+var rowHighlightedBackgroundStyles = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.selected.resting', "var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, ")")),
+  '&:hover': {
+    backgroundColor: (0, _tokens.token)('color.background.selected.hover', "var(".concat(_DynamicTable.tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, ")"))
+  }
+});
+var TableBodyRow = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var isHighlighted = _ref.isHighlighted,
+      children = _ref.children,
+      style = _ref.style,
+      rest = (0, _objectWithoutProperties2.default)(_ref, ["isHighlighted", "children", "style"]);
+  return (0, _core.jsx)("tr", (0, _extends2.default)({
+    style: style,
+    css: [rowStyles, isHighlighted ? rowHighlightedBackgroundStyles : rowBackgroundStyles]
+  }, rest, {
+    ref: ref
+  }), children);
+});
 exports.TableBodyRow = TableBodyRow;