@commercetools-uikit/data-table 16.7.4 → 16.8.0

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

@@ -22,6 +22,7 @@ var _styled = require('@emotion/styled/base');
 var react = require('@emotion/react');
 var designSystem = require('@commercetools-uikit/design-system');
 var AccessibleButton = require('@commercetools-uikit/accessible-button');
+var _taggedTemplateLiteral = require('@babel/runtime-corejs3/helpers/taggedTemplateLiteral');
 var icons = require('@commercetools-uikit/icons');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _Number$isNaN = require('@babel/runtime-corejs3/core-js-stable/number/is-nan');
@@ -139,7 +140,7 @@ var _ref2 = {
 } ;
 const BaseCell = /*#__PURE__*/_styled__default["default"]("td", {
   target: "e10u1n7e2"
-} )("position:relative;display:flex;background-color:", designSystem.designTokens.colorSurface, ";border-bottom:", props => props.shouldRenderBottomBorder ? "1px solid ".concat(designSystem.designTokens.colorNeutral90, ";") : 'none', ";font-size:", designSystem.designTokens.fontSizeForTable, ";", props => props.shouldClipContent ? _ref2 : '', " ", props => props.shouldIgnoreRowClick ? _ref$1 : '', ";" + ("" ));
+} )("position:relative;display:flex;background-color:", designSystem.designTokens.colorSurface, ";border-bottom:", props => props.shouldRenderBottomBorder ? "1px solid ".concat(designSystem.designTokens.colorNeutral95, ";") : 'none', ";font-size:", designSystem.designTokens.fontSizeForTable, ";", props => props.shouldClipContent ? _ref2 : '', " ", props => props.shouldIgnoreRowClick ? _ref$1 : '', ";" + ("" ));
 /*#__PURE__*/_styled__default["default"]("td", {
   target: "e10u1n7e1"
 } )("position:", props => props.disableFooterStickiness ? 'relative' : 'sticky', ";left:0;bottom:0;grid-column:1/", props => props.numberOfColumns, ";background-color:", designSystem.designTokens.colorSurface, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";border-top:1px solid ", designSystem.designTokens.colorNeutral90, ";margin-top:-1px;" + ("" ));
@@ -147,6 +148,61 @@ const RowExpandCollapseButton = /*#__PURE__*/_styled__default["default"](Accessi
   target: "e10u1n7e0"
 } )("cursor:", props => props.isRowCollapsed ? /*#__PURE__*/react.css("" , "" ) : /*#__PURE__*/react.css("" , "" ), ";position:absolute;height:16px;width:16px;bottom:0;right:0;opacity:0;display:flex;justify-content:flex-end;align-items:flex-end;" + ("" ));
 
+var _templateObject, _templateObject2, _templateObject3;
+const getButtonStyle = () => /*#__PURE__*/react.css("cursor:pointer;border:none;background:none;text-decoration:none;color:inherit;font:inherit;font-size:", designSystem.designTokens.fontSize10, ";font-family:inherit;" + ("" ), "" );
+
+/* When a sortable header is deselected,
+ *  (i.e. when another sortable header is selected)
+ *  the AngleUpDown is animated with fadeIn
+ *
+ *  When the user hovers over a sortable header that
+ *  is not the active sorted column, the icon for
+ *  the current sort direction is animated with fadeIn
+ */
+const fadeIn = react.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"])));
+
+/* When a sortable header is activated/selected,
+ *  and the sort direction is 'desc', the ArrowDown
+ *  icon is animated with rotateClockwise
+ */
+const rotateClockwise = react.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(-180deg);\n  } to {\n    transform: rotate(0deg);\n  }\n"])));
+
+/* When a sortable header is activated/selected,
+ *  and the sort direction is 'asc', the ArrowUp
+ *  icon is animated with rotateCounterClockwise
+ */
+const rotateCounterClockwise = react.keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(180deg);\n  } to {\n    transform: rotate(0deg);\n  }\n"])));
+
+/* A sortable header has the two arrow svg icons
+ * GIVEN column is sortable and is not focused
+ * THEN AngleUpDown icon is shown (default behaviour)
+ * AND ArrowUp or ArrowDown icon is not shown
+ *
+ * GIVEN column is sortable and foucsed or hovered
+ * THEN AngleUpDown icon is hidden
+ * AND ArrowUp or ArrowDown icon is shown
+ */
+
+const getSortableHeaderStyles = props => /*#__PURE__*/react.css("width:100%;display:flex;align-items:center;svg[data-icon-state='inactive'],svg[data-icon-state='active']{margin-left:", designSystem.designTokens.spacing10, ";flex-shrink:0;}svg[data-icon-state='inactive']{display:", props.isActive ? 'none' : 'inline-block', ";animation:", fadeIn, " 150ms ease-in-out;}svg[data-icon-state='active']{display:", props.isActive ? 'inline-block' : 'none', ";animation:", props.isActive && /*#__PURE__*/react.css(props.label === 'asc' ? rotateCounterClockwise : rotateClockwise, " 150ms ease-in-out;" + ("" ), "" ), ";}>svg *{fill:", designSystem.designTokens.colorNeutral60, "!important;}:hover,:focus{svg[data-icon-state='inactive']{display:none;}svg[data-icon-state='active']{display:inline-block;animation:", !props.isActive && /*#__PURE__*/react.css(fadeIn, " 150ms ease-in-out;" + ("" ), "" ), ";}}" + ("" ), "" );
+const HeaderCellInner = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1ipt8n24"
+} )("box-sizing:border-box;display:flex;justify-content:flex-start;padding:0 ", props => props.isCondensed ? designSystem.designTokens.paddingForTableHeaderAsCondensed : designSystem.designTokens.paddingForTableHeader, ";", getCellInnerStyles, " ", props => props.isSortable ? getSortableHeaderStyles(props) : '', ";", props => props.as === 'button' ? getButtonStyle() : '', ";", props => props.shouldWrap ? '' : 'white-space: nowrap', ";" + ("" ));
+const BaseHeaderCell = /*#__PURE__*/_styled__default["default"]("th", {
+  target: "e1ipt8n23"
+} )("color:", designSystem.designTokens.colorNeutral40, ";background-color:", designSystem.designTokens.colorNeutral98, ";position:", props => props.disableHeaderStickiness ? 'relative' : 'sticky', ";top:0;z-index:1;line-height:", designSystem.designTokens.lineHeightForTableHeader, ";padding:0;font-weight:", designSystem.designTokens.fontWeight500, ";font-size:", designSystem.designTokens.fontSize10, ";:after{content:'';position:absolute;z-index:-1;width:100%;height:", designSystem.designTokens.borderWidth1, ";bottom:0;left:0;background-color:", designSystem.designTokens.colorNeutral95, ";}:hover,:active{z-index:2;}", HeaderCellInner, "{", props => props.shouldClipContent ? 'overflow: hidden;' : '', ";}" + ("" ));
+const HeaderLabelWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1ipt8n22"
+} )("display:inline-flex;min-height:1.4em;margin:", designSystem.designTokens.marginForTableHeader, " 0;flex:0 0 fit-content;" + ("" ));
+const HeaderLabelTextWrapper = /*#__PURE__*/_styled__default["default"]("span", {
+  target: "e1ipt8n21"
+} )({
+  name: "1onapuj",
+  styles: "display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere"
+} );
+const HeaderIconWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1ipt8n20"
+} )("display:inline-flex;align-items:center;justify-content:center;margin-left:", designSystem.designTokens.spacing20, ";vertical-align:middle;" + ("" ));
+
 const convertNumericDimensionToPixelValue = dimensionValue => typeof dimensionValue === 'number' ? "".concat(dimensionValue, "px") : dimensionValue;
 var convertNumericDimensionToPixelValue$1 = convertNumericDimensionToPixelValue;
 
@@ -168,7 +224,7 @@ const getDisabledSelfContainmentStyles = props => {
 };
 const TableContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "epk01s24"
-} )("position:relative;z-index:0;", props =>
+} )("position:relative;z-index:0;box-shadow:", designSystem.designTokens.boxShadowForTable, ";border:1px solid ", designSystem.designTokens.colorNeutral95, ";border-radius:", designSystem.designTokens.borderRadius4, ";", props =>
 // this is needed in order to have a sticky header
 props.maxHeight ? "overflow-x: auto;" : '', " ", props => props.maxWidth && !props.disableSelfContainment ? "max-width: ".concat(convertNumericDimensionToPixelValue$1(props.maxWidth), ";") : '', " ", props => props.isBeingResized && "\n    * {\n      user-select: none;\n    }", " ", getDisabledSelfContainmentStyles, ";" + ("" ));
 const TableGrid = /*#__PURE__*/_styled__default["default"]("table", {
@@ -181,10 +237,7 @@ const TableGrid = /*#__PURE__*/_styled__default["default"]("table", {
 props.maxHeight ? "overflow-y: auto;" : '', " ", props => props.maxHeight && !props.disableSelfContainment ? "max-height: ".concat(convertNumericDimensionToPixelValue$1(props.maxHeight), ";") : '', " ", props => props.resizedTotalWidth ? "max-width: ".concat(props.resizedTotalWidth, "px;") : '', " ", getDisabledSelfContainmentStyles, ";" + ("" ));
 const TableHeader = /*#__PURE__*/_styled__default["default"]("thead", {
   target: "epk01s22"
-} )({
-  name: "49aokf",
-  styles: "display:contents"
-} );
+} )("display:contents;:hover{", BaseHeaderCell, ":before{content:'';position:absolute;border-right:1px solid ", designSystem.designTokens.colorNeutral, ";top:", designSystem.designTokens.spacing20, ";right:0;bottom:", designSystem.designTokens.spacing20, ";}", BaseHeaderCell, ":last-child:before{display:none;}}" + ("" ));
 const TableBody = /*#__PURE__*/_styled__default["default"]("tbody", {
   target: "epk01s21"
 } )({
@@ -205,32 +258,6 @@ Footer.displayName = 'Footer';
 Footer.defaultProps = defaultProps$4;
 var Footer$1 = Footer;
 
-const getButtonStyle = () => /*#__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
- * THEN AngleUpDown icon is shown (default behaviour)
- * AND AngleUp or AngleDown icon is not shown
- *
- * GIVEN column is sortable and foucsed
- * THEN AngleUpDown icon is hidden
- * AND AngleUp or AngleDown icon is shown
- */
-
-const getSortableHeaderStyles = props => /*#__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;}}" + ("" ), "" );
-const HeaderCellInner = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1ipt8n23"
-} )("box-sizing:border-box;display:flex;justify-content:space-between;padding:0 ", props => props.isCondensed ? designSystem.designTokens.paddingForTableHeaderAsCondensed : designSystem.designTokens.paddingForTableHeader, ";", getCellInnerStyles, " ", props => props.isSortable ? getSortableHeaderStyles(props) : '', ";", props => props.as === 'button' ? getButtonStyle() : '', ";", props => props.shouldWrap ? '' : 'white-space: nowrap', ";" + ("" ));
-const BaseHeaderCell = /*#__PURE__*/_styled__default["default"]("th", {
-  target: "e1ipt8n22"
-} )("color:", designSystem.designTokens.fontColorForTableHeader, ";background-color:", designSystem.designTokens.backgroundColorForTableHeader, ";position:", props => props.disableHeaderStickiness ? 'relative' : 'sticky', ";top:0;z-index:1;line-height:", designSystem.designTokens.lineHeightForTableHeader, ";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;}", HeaderCellInner, "{", props => props.shouldClipContent ? 'overflow: hidden;' : '', ";}" + ("" ));
-const HeaderLabelWrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1ipt8n21"
-} )("min-height:1.4em;margin:", designSystem.designTokens.marginForTableHeader, " 0;flex:1;" + ("" ));
-const HeaderIconWrapper = /*#__PURE__*/_styled__default["default"]("div", {
-  target: "e1ipt8n20"
-} )("display:inline-flex;align-items:center;justify-content:center;margin-left:", designSystem.designTokens.spacing20, ";vertical-align:middle;" + ("" ));
-
 const ResizerIndicator = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1ccic7f1"
 } )("height:100%;width:3px;background:", designSystem.designTokens.colorInfo, ";visibility:hidden;cursor:col-resize;", (props // extra 1px of height to appear above the bottom horizontal row border
@@ -310,7 +337,7 @@ const HeaderCell = props => {
   if (props.isSortable) {
     const isActive = props.sortedBy === props.columnKey;
     const nextSortDirection = !isActive || props.sortDirection === 'desc' ? 'asc' : 'desc';
-    SortingIcon = props.sortDirection === 'desc' ? icons.AngleDownIcon : icons.AngleUpIcon;
+    SortingIcon = props.sortDirection === 'desc' ? icons.ArrowDownIcon : icons.ArrowUpIcon;
     sortableHeaderProps = {
       as: 'button',
       label: props.sortDirection,
@@ -331,7 +358,9 @@ const HeaderCell = props => {
       horizontalCellAlignment: props.horizontalCellAlignment
     }, sortableHeaderProps), {}, {
       children: [jsxRuntime.jsxs(HeaderLabelWrapper, {
-        children: [props.children, props.iconComponent && jsxRuntime.jsx(HeaderIconWrapper, {
+        children: [jsxRuntime.jsx(HeaderLabelTextWrapper, {
+          children: props.children
+        }), props.iconComponent && jsxRuntime.jsx(HeaderIconWrapper, {
           children: props.iconComponent
         })]
       }), props.isSortable && jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -721,7 +750,7 @@ DataTable.displayName = 'DataTable';
 var DataTable$1 = DataTable;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.7.4";
+var version = "16.8.0";
 
 Object.defineProperty(exports, 'useRowSelection', {
   enumerable: true,