@commercetools-uikit/data-table 15.5.1 → 15.7.0

package/dist/commercetools-uikit-data-table.cjs.prod.js

@@ -52,8 +52,8 @@ var _parseInt__default = /*#__PURE__*/_interopDefault(_parseInt);
 var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
 
 var getPaddingStyle = function getPaddingStyle(props) {
-  if (props.isCondensed) return /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacingS, ";" + ("" ), "" );
-  return /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacingM, ";" + ("" ), "" );
+  if (props.isCondensed) return /*#__PURE__*/react.css("padding:", designSystem.designTokens.paddingForTableCellAsCondensed, ";" + ("" ), "" );
+  return /*#__PURE__*/react.css("padding:", designSystem.designTokens.paddingForTableCell, ";" + ("" ), "" );
 };
 
 var _ref8 = {
@@ -166,7 +166,7 @@ var BaseCell = /*#__PURE__*/_styled__default["default"]("td", {
   target: "e10u1n7e2"
 } )("position:relative;display:flex;background-color:", designSystem.designTokens.colorSurface, ";border-bottom:", function (props) {
   return props.shouldRenderBottomBorder ? "1px solid ".concat(designSystem.designTokens.colorNeutral90, ";") : 'none';
-}, ";", function (props) {
+}, ";font-size:", designSystem.designTokens.fontSizeForTable, ";", function (props) {
   return props.shouldClipContent ? _ref2 : '';
 }, " ", function (props) {
   return props.shouldIgnoreRowClick ? _ref$1 : '';
@@ -194,7 +194,7 @@ var convertNumericDimensionToPixelValue$1 = convertNumericDimensionToPixelValue;
 
 var getClickableRowStyle = function getClickableRowStyle(props) {
   if (props.isRowClickable) {
-    return /*#__PURE__*/react.css("cursor:pointer;&:hover td{background:", designSystem.designTokens.backgroundColorForInputWhenHovered, ";}" + ("" ), "" );
+    return /*#__PURE__*/react.css("cursor:pointer;&:hover td{background:", designSystem.designTokens.backgroundColorForTableCellWhenHovered, ";}" + ("" ), "" );
   }
 
   return '';
@@ -251,7 +251,7 @@ var TableBody = /*#__PURE__*/_styled__default["default"]("tbody", {
 
 var TableRow = /*#__PURE__*/_styled__default["default"]("tr", {
   target: "epk01s20"
-} )("display:contents;", getClickableRowStyle, " :hover,:focus-within{", RowExpandCollapseButton, "{opacity:1;}}" + ("" ));
+} )("display:contents;", getClickableRowStyle, " :hover,:focus-within{", RowExpandCollapseButton, "{opacity:1;}th:not(:first-of-type):after{content:'';position:absolute;height:calc(100% - 2 * ", designSystem.designTokens.marginForTableHeader, ");width:1px;background-color:", designSystem.designTokens.colorNeutral, ";top:", designSystem.designTokens.marginForTableHeader, ";right:0;z-index:-1;}}" + ("" ));
 
 var defaultProps$4 = {
   horizontalCellAlignment: 'left'
@@ -268,7 +268,7 @@ Footer.defaultProps = defaultProps$4;
 var Footer$1 = Footer;
 
 var getButtonStyle = function getButtonStyle() {
-  return /*#__PURE__*/react.css("cursor:pointer;border:none;background:none;text-decoration:none;color:inherit;font:inherit;font-size:", designSystem.designTokens.fontSizeDefault, ";font-family:inherit;" + ("" ), "" );
+  return /*#__PURE__*/react.css("cursor:pointer;border:none;background:none;text-decoration:none;color:inherit;font:inherit;font-size:", designSystem.designTokens.fontSizeForTable, ";font-family:inherit;" + ("" ), "" );
 };
 /* A sortable header has the two arrow svg icons
  * GIVEN column is sortable and is not focused
@@ -282,13 +282,13 @@ var getButtonStyle = function getButtonStyle() {
 
 
 var getSortableHeaderStyles = function getSortableHeaderStyles(props) {
-  return /*#__PURE__*/react.css("width:100%;display:flex;align-items:center;svg[data-icon-state='inactive'],svg[data-icon-state='active']{margin-left:", designSystem.designTokens.spacingS, ";flex-shrink:0;}svg[data-icon-state='inactive']{display:", props.isActive ? 'none' : 'inline-block', ";}svg[data-icon-state='active']{display:", props.isActive ? 'inline-block' : 'none', ";}:hover,:focus{svg[data-icon-state='inactive']{display:none;}svg[data-icon-state='active']{display:inline-block;*{fill:", designSystem.designTokens.colorNeutral, ";}}}" + ("" ), "" );
+  return /*#__PURE__*/react.css("width:100%;display:flex;align-items:center;svg[data-icon-state='inactive'],svg[data-icon-state='active']{margin-left:", designSystem.designTokens.spacing20, ";flex-shrink:0;}svg[data-icon-state='inactive']{display:", props.isActive ? 'none' : 'inline-block', ";}svg[data-icon-state='active']{display:", props.isActive ? 'inline-block' : 'none', ";}>svg *{fill:", designSystem.designTokens.fontColorForTableHeader, "!important;}:hover,:focus{svg[data-icon-state='inactive']{display:none;}svg[data-icon-state='active']{display:inline-block;}}" + ("" ), "" );
 };
 
 var HeaderCellInner = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1ipt8n23"
 } )("box-sizing:border-box;display:flex;justify-content:space-between;padding:0 ", function (props) {
-  return props.isCondensed ? designSystem.designTokens.spacingS : designSystem.designTokens.spacingM;
+  return props.isCondensed ? designSystem.designTokens.paddingForTableHeaderAsCondensed : designSystem.designTokens.paddingForTableHeader;
 }, ";", getCellInnerStyles, " ", function (props) {
   return props.isSortable ? getSortableHeaderStyles(props) : '';
 }, ";", function (props) {
@@ -299,19 +299,19 @@ var HeaderCellInner = /*#__PURE__*/_styled__default["default"]("div", {
 
 var BaseHeaderCell = /*#__PURE__*/_styled__default["default"]("th", {
   target: "e1ipt8n22"
-} )("color:", designSystem.designTokens.colorSurface, ";background-color:", designSystem.designTokens.colorAccent, ";position:", function (props) {
+} )("color:", designSystem.designTokens.fontColorForTableHeader, ";background-color:", designSystem.designTokens.backgroundColorForTableHeader, ";position:", function (props) {
   return props.disableHeaderStickiness ? 'relative' : 'sticky';
-}, ";top:0;z-index:1;padding:0;font-weight:normal;box-shadow:inset -1px 0 ", designSystem.designTokens.colorNeutral90, ";:hover,:active{z-index:2;}", HeaderCellInner, "{", function (props) {
+}, ";top:0;z-index:1;padding:0;font-weight:", designSystem.designTokens.fontWeightForTableHeader, ";font-size:", designSystem.designTokens.fontSizeForTable, ";box-shadow:inset -1px 0 ", designSystem.designTokens.borderColorForTableHeader, ";:hover,:active{z-index:2;}:before{content:'';position:absolute;z-index:-1;width:100%;height:1px;bottom:0;left:0;background-color:", designSystem.designTokens.borderColorForTableHeaderAsBottom, ";}", HeaderCellInner, "{", function (props) {
   return props.shouldClipContent ? 'overflow: hidden;' : '';
 }, ";}" + ("" ));
 
 var HeaderLabelWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1ipt8n21"
-} )("min-height:1.4em;margin:", designSystem.designTokens.spacingS, " 0;flex:1;" + ("" ));
+} )("min-height:1.4em;margin:", designSystem.designTokens.marginForTableHeader, " 0;flex:1;" + ("" ));
 
 var HeaderIconWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1ipt8n20"
-} )("display:inline-flex;align-items:center;justify-content:center;margin-left:", designSystem.designTokens.spacingS, ";vertical-align:middle;" + ("" ));
+} )("display:inline-flex;align-items:center;justify-content:center;margin-left:", designSystem.designTokens.spacing20, ";vertical-align:middle;" + ("" ));
 
 var ResizerIndicator = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1ccic7f1"
@@ -912,7 +912,7 @@ DataTable.displayName = 'DataTable';
 var DataTable$1 = DataTable;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.5.1";
+var version = "15.7.0";
 
 Object.defineProperty(exports, 'useRowSelection', {
   enumerable: true,