@semcore/data-table 1.4.3 → 1.5.0

package/CHANGELOG.md

@@ -2,7 +2,26 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [1.4.3] - 2021-06-25
+## [1.5.0] - 2022-01-18
+
+### Changed
+
+- Up version icons and use new icon.
+
+## [1.4.6] - 2021-09-10
+
+### Changed
+
+- Fixed position table for fixed columns.
+- Added support property `onResize` for `DataTable.Body`.
+
+## [1.4.5] - 2021-08-26
+
+### Changed
+
+- Add 'sideEffect=false' for more optimal build via webpack
+
+## [1.4.4] - 2021-06-25
 
 ### Added
 

package/lib/cjs/Body.js

@@ -174,7 +174,8 @@ var Body = /*#__PURE__*/function (_Component) {
           styles = _this$asProps3.styles,
           rows = _this$asProps3.rows,
           columns = _this$asProps3.columns,
-          $scrollRef = _this$asProps3.$scrollRef;
+          $scrollRef = _this$asProps3.$scrollRef,
+          onResize = _this$asProps3.onResize;
       var initializeColumns = !!columns.reduce(function (acc, c) {
         return acc + c.width;
       }, 0);
@@ -188,8 +189,9 @@ var Body = /*#__PURE__*/function (_Component) {
       return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SBodyWrapper, _ref4.cn("SBodyWrapper", {}), /*#__PURE__*/_react["default"].createElement(_scrollArea["default"], _ref4.cn("ScrollArea", {
         "shadow": true,
         "styles": scrollStyles,
-        "left": "".concat(offsetLeftSum, "px"),
-        "right": "".concat(offsetRightSum, "px")
+        "use:left": "".concat(offsetLeftSum, "px"),
+        "use:right": "".concat(offsetRightSum, "px"),
+        "onResize": onResize
       }), /*#__PURE__*/_react["default"].createElement(_scrollArea["default"].Container, {
         ref: $scrollRef
       }, /*#__PURE__*/_react["default"].createElement(SBody, _ref4.cn("SBody", _objectSpread({}, (0, _core.assignProps)({}, _ref))), initializeColumns ? this.renderRows(rows) : null)), /*#__PURE__*/_react["default"].createElement(SScrollAreaBar, _ref4.cn("SScrollAreaBar", {

package/lib/cjs/Body.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Body.js"],"names":["getCellsByColumn","row","reduce","acc","cell","name","Array","isArray","concat","data","Body","rows","SRow","Box","asProps","styles","$propsRow","map","index","cellsByColumn","_row","props","getRowProps","p","other","propsRow","children","renderCells","theme","active","SCell","Flex","columns","use","renderRows","column","find","c","value","vars","cssVar","n","rendersCell","getCellProps","propsCell","justifyContent","style","length","join","push","fixed","SBody","SBodyWrapper","SScrollAreaBar","ScrollArea","Bar","Children","$scrollRef","initializeColumns","width","offsetLeftSum","offsetRightSum","offsetSum","scrollStyles","origin","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAASA,gBAAT,CAA0BC,GAA1B,EAA+B;AAC7B,SAAOA,GAAG,CAACC,MAAJ,CAAW,UAACC,GAAD,EAAMC,IAAN,EAAe;AAC/BD,IAAAA,GAAG,CAACC,IAAI,CAACC,IAAN,CAAH,GAAiBF,GAAG,CAACC,IAAI,CAACC,IAAN,CAAH,GACbC,KAAK,CAACC,OAAN,CAAcJ,GAAG,CAACC,IAAI,CAACC,IAAN,CAAjB,IACEF,GAAG,CAACC,IAAI,CAACC,IAAN,CAAH,CAAeG,MAAf,CAAsBJ,IAAI,CAACK,IAA3B,CADF,GAEE,CAACN,GAAG,CAACC,IAAI,CAACC,IAAN,CAAJ,EAAiBD,IAAI,CAACK,IAAtB,CAHW,GAIbL,IAAI,CAACK,IAJT;AAKA,WAAON,GAAP;AACD,GAPM,EAOJ,EAPI,CAAP;AAQD;;IAEKO,I;;;;;;;;;;;;WACJ,oBAAWC,IAAX,EAAiB;AAAA;;AACf,UAAMC,IAAI,GAAGC,YAAb;AADe,0BAEe,KAAKC,OAFpB;AAAA,UAEPC,MAFO,iBAEPA,MAFO;AAAA,UAECC,SAFD,iBAECA,SAFD;AAIf,aAAOL,IAAI,CAACM,GAAL,CAAS,UAAChB,GAAD,EAAMiB,KAAN,EAAgB;AAAA;;AAC9B,YAAMC,aAAa,GAAGlB,GAAG,CAACmB,IAAJ,IAAYpB,gBAAgB,CAACC,GAAD,CAAlD;AACA,YAAMoB,KAAK,GAAGL,SAAS,CAACd,MAAV,CACZ,UAACC,GAAD,SAA+C;AAAA,wCAAvCmB,WAAuC;AAAA,cAAvCA,WAAuC,kCAAzB,UAACC,CAAD;AAAA,mBAAOA,CAAP;AAAA,WAAyB;AAAA,cAAZC,KAAY;AAC7C,cAAMC,QAAQ,GAAG,8BAAYD,KAAZ,EAAmBrB,GAAnB,CAAjB;AACA,iBAAO,8BAAYmB,WAAW,CAACG,QAAD,EAAWN,aAAX,EAA0BD,KAA1B,CAAvB,EAAyDO,QAAzD,CAAP;AACD,SAJW,EAKZ;AACEC,UAAAA,QAAQ,EAAE,KAAI,CAACC,WAAL,CAAiB1B,GAAjB,EAAsBkB,aAAtB,EAAqCD,KAArC;AADZ,SALY,CAAd;AASA,uBAAO,mBAAQH,MAAR,CAAP,eACE,gCAAC,IAAD;AAAA,iBAAWG,KAAX;AAAA,mBAAyBG,KAAK,CAACO,KAA/B;AAAA,oBAA8CP,KAAK,CAACQ;AAApD,WAAgER,KAAhE,GADF;AAGD,OAdM,CAAP;AAeD;;;WAED,qBAAYpB,GAAZ,EAAiBkB,aAAjB,EAAgCD,KAAhC,EAAuC;AAAA;;AACrC,UAAMY,KAAK,GAAGC,aAAd;AADqC,2BAEJ,KAAKjB,OAFD;AAAA,UAE7BC,MAF6B,kBAE7BA,MAF6B;AAAA,UAErBiB,OAFqB,kBAErBA,OAFqB;AAAA,UAEZC,GAFY,kBAEZA,GAFY;AAGrC,aAAOhC,GAAG,CAACC,MAAJ,CAAW,UAACC,GAAD,EAAMC,IAAN,EAAe;AAC/B,YAAIE,KAAK,CAACC,OAAN,CAAcH,IAAd,CAAJ,EAAyB;AACvBD,UAAAA,GAAG,GAAGA,GAAG,CAACK,MAAJ,eAAW,6CAAM,MAAI,CAAC0B,UAAL,CAAgB9B,IAAhB,CAAN,CAAX,CAAN;AACD,SAFD,MAEO;AAAA;;AACL,cAAM+B,MAAM,GAAGH,OAAO,CAACI,IAAR,CAAa,UAACC,CAAD;AAAA,mBAAOA,CAAC,CAAChC,IAAF,KAAWD,IAAI,CAACC,IAAvB;AAAA,WAAb,CAAf;;AADK,+BAEiB,0BAAcD,IAAd,EAAoB4B,OAApB,CAFjB;AAAA;AAAA,cAEE3B,IAFF;AAAA,cAEQiC,KAFR;;AAGL,cAAMC,IAAI,GAAG,CAACjC,KAAK,CAACC,OAAN,CAAcH,IAAI,CAACoC,MAAnB,IAA6BpC,IAAI,CAACoC,MAAlC,GAA2C,CAACpC,IAAI,CAACoC,MAAN,CAA5C,EAA2DvB,GAA3D,CACX,UAACwB,CAAD;AAAA,iCAAcA,CAAd;AAAA,WADW,CAAb;AAGA,cAAMpB,KAAK,GAAG,CAACjB,IAAI,CAACsC,WAAL,IAAoB,EAArB,EAAyBxC,MAAzB,CACZ,UAACC,GAAD,SAAgD;AAAA,2CAAxCwC,YAAwC;AAAA,gBAAxCA,YAAwC,mCAAzB,UAACpB,CAAD;AAAA,qBAAOA,CAAP;AAAA,aAAyB;AAAA,gBAAZC,KAAY;AAC9C,gBAAMoB,SAAS,GAAG,8BAAYpB,KAAZ,EAAmBrB,GAAnB,CAAlB;AACA,mBAAO,8BAAYwC,YAAY,CAACC,SAAD,EAAYzB,aAAZ,EAA2BD,KAA3B,CAAxB,EAA2D0B,SAA3D,CAAP;AACD,WAJW,EAKZ;AACEvC,YAAAA,IAAI,EAAED,IAAI,CAACC,IADb;AAEEqB,YAAAA,QAAQ,EAAEtB,IAAI,CAACK,IAFjB;AAGEoC,YAAAA,cAAc,EAAEV,MAAF,aAAEA,MAAF,wCAAEA,MAAM,CAAEd,KAAV,kDAAE,cAAewB,cAHjC;AAIEC,YAAAA,KAAK,yDACFzC,IADE,EACKiC,KADL,qDAEIC,IAAI,CAACQ,MAAL,KAAgB,CAAhB,GAAoBR,IAAI,CAAC,CAAD,CAAxB,kBAAsCA,IAAI,CAACS,IAAL,CAAU,KAAV,CAAtC,MAFJ;AAJP,WALY,CAAd;AAgBA7C,UAAAA,GAAG,CAAC8C,IAAJ,UACE,mBAAQlC,MAAR,CADF,eAEI,gCAAC,KAAD;AAAA,mBAAYX,IAAI,CAACC;AAAjB,aAA2BgB,KAA3B;AAAA,qBAAyCjB,IAAI,CAAC8C,KAA9C;AAAA,qBAA4D7B,KAAK,CAACO,KAAlE;AAAA,mBAA8EK;AAA9E,cAFJ;AAKD;;AACD,eAAO9B,GAAP;AACD,OAhCM,EAgCJ,EAhCI,CAAP;AAiCD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMgD,KAAK,GAmBYtC,YAnBvB;AACA,UAAMuC,YAAY,GAAGvC,YAArB;AACA,UAAMwC,cAAc,GAAGC,uBAAWC,GAAlC;AAHO,2BAIiD,KAAKzC,OAJtD;AAAA,UAIC0C,QAJD,kBAICA,QAJD;AAAA,UAIWzC,MAJX,kBAIWA,MAJX;AAAA,UAImBJ,IAJnB,kBAImBA,IAJnB;AAAA,UAIyBqB,OAJzB,kBAIyBA,OAJzB;AAAA,UAIkCyB,UAJlC,kBAIkCA,UAJlC;AAMP,UAAMC,iBAAiB,GAAG,CAAC,CAAC1B,OAAO,CAAC9B,MAAR,CAAe,UAACC,GAAD,EAAMkC,CAAN;AAAA,eAAYlC,GAAG,GAAGkC,CAAC,CAACsB,KAApB;AAAA,OAAf,EAA0C,CAA1C,CAA5B;;AANO,kCAQiC,iCAAqB3B,OAArB,CARjC;AAAA;AAAA,UAQA4B,aARA;AAAA,UAQeC,cARf;;AASP,UAAMC,SAAS,GAAGF,aAAa,GAAGC,cAAlC;AAEA,qBAAO,mBAAQ9C,MAAR,CAAP,eACE,gCAAC,YAAD,6CACE,gCAAC,sBAAD;AAAA;AAAA,kBAEUgD,YAFV;AAAA,0BAGWH,aAHX;AAAA,2BAIYC,cAJZ;AAAA,uBAME,gCAAC,sBAAD,CAAY,SAAZ;AAAsB,QAAA,GAAG,EAAEJ;AAA3B,sBACE,gCAAC,KAAD,0EAAqBC,iBAAiB,GAAG,KAAKxB,UAAL,CAAgBvB,IAAhB,CAAH,GAA2B,IAAjE,CADF,CANF,eASE,gCAAC,cAAD;AAAA,uBACc,YADd;AAAA,0BAEWiD,aAFX;AAAA,2BAGYC,cAHZ;AAAA,+BAIgBC,SAJhB;AAAA,SATF,eAeE,gCAAC,cAAD;AAAA,uBAA4B;AAA5B,SAfF,CADF,EAkBGN,QAAQ,CAACQ,MAlBZ,CADF;AAsBD;;;EA7FgBC,e;;eAgGJvD,I","sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport { getFixedStyle, getScrollOffsetValue } from './utils';\nimport assignProps from '@semcore/utils/lib/assignProps';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nfunction getCellsByColumn(row) {\n  return row.reduce((acc, cell) => {\n    acc[cell.name] = acc[cell.name]\n      ? Array.isArray(acc[cell.name])\n        ? acc[cell.name].concat(cell.data)\n        : [acc[cell.name], cell.data]\n      : cell.data;\n    return acc;\n  }, {});\n}\n\nclass Body extends Component {\n  renderRows(rows) {\n    const SRow = Box;\n    const { styles, $propsRow } = this.asProps;\n\n    return rows.map((row, index) => {\n      const cellsByColumn = row._row || getCellsByColumn(row);\n      const props = $propsRow.reduce(\n        (acc, { getRowProps = (p) => p, ...other }) => {\n          const propsRow = assignProps(other, acc);\n          return assignProps(getRowProps(propsRow, cellsByColumn, index), propsRow);\n        },\n        {\n          children: this.renderCells(row, cellsByColumn, index),\n        },\n      );\n      return sstyled(styles)(\n        <SRow key={index} theme={props.theme} active={props.active} {...props} />,\n      );\n    });\n  }\n\n  renderCells(row, cellsByColumn, index) {\n    const SCell = Flex;\n    const { styles, columns, use } = this.asProps;\n    return row.reduce((acc, cell) => {\n      if (Array.isArray(cell)) {\n        acc = acc.concat(<div>{this.renderRows(cell)}</div>);\n      } else {\n        const column = columns.find((c) => c.name === cell.name);\n        const [name, value] = getFixedStyle(cell, columns);\n        const vars = (Array.isArray(cell.cssVar) ? cell.cssVar : [cell.cssVar]).map(\n          (n) => `var(${n})`,\n        );\n        const props = (cell.rendersCell || []).reduce(\n          (acc, { getCellProps = (p) => p, ...other }) => {\n            const propsCell = assignProps(other, acc);\n            return assignProps(getCellProps(propsCell, cellsByColumn, index), propsCell);\n          },\n          {\n            name: cell.name,\n            children: cell.data,\n            justifyContent: column?.props?.justifyContent,\n            style: {\n              [name]: value,\n              width: vars.length === 1 ? vars[0] : `calc(${vars.join(' + ')})`,\n            },\n          },\n        );\n\n        acc.push(\n          sstyled(styles)(\n            <SCell key={cell.name} {...props} fixed={cell.fixed} theme={props.theme} use={use} />,\n          ),\n        );\n      }\n      return acc;\n    }, []);\n  }\n\n  render() {\n    const SBody = Root;\n    const SBodyWrapper = Box;\n    const SScrollAreaBar = ScrollArea.Bar;\n    const { Children, styles, rows, columns, $scrollRef } = this.asProps;\n\n    const initializeColumns = !!columns.reduce((acc, c) => acc + c.width, 0);\n\n    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(columns);\n    const offsetSum = offsetLeftSum + offsetRightSum;\n\n    return sstyled(styles)(\n      <SBodyWrapper>\n        <ScrollArea\n          shadow\n          styles={scrollStyles}\n          left={`${offsetLeftSum}px`}\n          right={`${offsetRightSum}px`}\n        >\n          <ScrollArea.Container ref={$scrollRef}>\n            <SBody render={Box}>{initializeColumns ? this.renderRows(rows) : null}</SBody>\n          </ScrollArea.Container>\n          <SScrollAreaBar\n            orientation=\"horizontal\"\n            left={`${offsetLeftSum}px`}\n            right={`${offsetRightSum}px`}\n            offsetSum={`${offsetSum}px`}\n          />\n          <SScrollAreaBar orientation=\"vertical\" />\n        </ScrollArea>\n        {Children.origin}\n      </SBodyWrapper>,\n    );\n  }\n}\n\nexport default Body;\n"],"file":"Body.js"}
+{"version":3,"sources":["../../src/Body.js"],"names":["getCellsByColumn","row","reduce","acc","cell","name","Array","isArray","concat","data","Body","rows","SRow","Box","asProps","styles","$propsRow","map","index","cellsByColumn","_row","props","getRowProps","p","other","propsRow","children","renderCells","theme","active","SCell","Flex","columns","use","renderRows","column","find","c","value","vars","cssVar","n","rendersCell","getCellProps","propsCell","justifyContent","style","length","join","push","fixed","SBody","SBodyWrapper","SScrollAreaBar","ScrollArea","Bar","Children","$scrollRef","onResize","initializeColumns","width","offsetLeftSum","offsetRightSum","offsetSum","scrollStyles","origin","Component"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport { getFixedStyle, getScrollOffsetValue } from './utils';\nimport assignProps from '@semcore/utils/lib/assignProps';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nfunction getCellsByColumn(row) {\n  return row.reduce((acc, cell) => {\n    acc[cell.name] = acc[cell.name]\n      ? Array.isArray(acc[cell.name])\n        ? acc[cell.name].concat(cell.data)\n        : [acc[cell.name], cell.data]\n      : cell.data;\n    return acc;\n  }, {});\n}\n\nclass Body extends Component {\n  renderRows(rows) {\n    const SRow = Box;\n    const { styles, $propsRow } = this.asProps;\n\n    return rows.map((row, index) => {\n      const cellsByColumn = row._row || getCellsByColumn(row);\n      const props = $propsRow.reduce(\n        (acc, { getRowProps = (p) => p, ...other }) => {\n          const propsRow = assignProps(other, acc);\n          return assignProps(getRowProps(propsRow, cellsByColumn, index), propsRow);\n        },\n        {\n          children: this.renderCells(row, cellsByColumn, index),\n        },\n      );\n      return sstyled(styles)(\n        <SRow key={index} theme={props.theme} active={props.active} {...props} />,\n      );\n    });\n  }\n\n  renderCells(row, cellsByColumn, index) {\n    const SCell = Flex;\n    const { styles, columns, use } = this.asProps;\n    return row.reduce((acc, cell) => {\n      if (Array.isArray(cell)) {\n        acc = acc.concat(<div>{this.renderRows(cell)}</div>);\n      } else {\n        const column = columns.find((c) => c.name === cell.name);\n        const [name, value] = getFixedStyle(cell, columns);\n        const vars = (Array.isArray(cell.cssVar) ? cell.cssVar : [cell.cssVar]).map(\n          (n) => `var(${n})`,\n        );\n        const props = (cell.rendersCell || []).reduce(\n          (acc, { getCellProps = (p) => p, ...other }) => {\n            const propsCell = assignProps(other, acc);\n            return assignProps(getCellProps(propsCell, cellsByColumn, index), propsCell);\n          },\n          {\n            name: cell.name,\n            children: cell.data,\n            justifyContent: column?.props?.justifyContent,\n            style: {\n              [name]: value,\n              width: vars.length === 1 ? vars[0] : `calc(${vars.join(' + ')})`,\n            },\n          },\n        );\n\n        acc.push(\n          sstyled(styles)(\n            <SCell key={cell.name} {...props} fixed={cell.fixed} theme={props.theme} use={use} />,\n          ),\n        );\n      }\n      return acc;\n    }, []);\n  }\n\n  render() {\n    const SBody = Root;\n    const SBodyWrapper = Box;\n    const SScrollAreaBar = ScrollArea.Bar;\n    const { Children, styles, rows, columns, $scrollRef, onResize } = this.asProps;\n\n    const initializeColumns = !!columns.reduce((acc, c) => acc + c.width, 0);\n\n    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(columns);\n    const offsetSum = offsetLeftSum + offsetRightSum;\n\n    return sstyled(styles)(\n      <SBodyWrapper>\n        <ScrollArea\n          shadow\n          styles={scrollStyles}\n          use:left={`${offsetLeftSum}px`}\n          use:right={`${offsetRightSum}px`}\n          onResize={onResize}\n        >\n          <ScrollArea.Container ref={$scrollRef}>\n            <SBody render={Box}>{initializeColumns ? this.renderRows(rows) : null}</SBody>\n          </ScrollArea.Container>\n          <SScrollAreaBar\n            orientation=\"horizontal\"\n            left={`${offsetLeftSum}px`}\n            right={`${offsetRightSum}px`}\n            offsetSum={`${offsetSum}px`}\n          />\n          <SScrollAreaBar orientation=\"vertical\" />\n        </ScrollArea>\n        {Children.origin}\n      </SBodyWrapper>,\n    );\n  }\n}\n\nexport default Body;\n"],"file":"Body.js"}

package/lib/cjs/DataTable.js

@@ -60,7 +60,7 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SDataTable_1ji8l_gg_,.___SHeadWrapper_1ji8l_gg_{position:relative}.___SHeadWrapper_1ji8l_gg_.__sticky_1ji8l_gg_{position:sticky;top:0;z-index:2}.___SHead_1ji8l_gg_{flex-direction:row;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;z-index:0}.___SColumn_1ji8l_gg_,.___SHead_1ji8l_gg_{display:flex;position:relative}.___SColumn_1ji8l_gg_{flex-grow:1;font-size:12px;line-height:18px;color:#333;box-sizing:border-box}.___SColumn_1ji8l_gg_:focus{outline:none;box-shadow:inset 0 0 0 3px rgba(43,148,225,.3)}.___SColumn_1ji8l_gg_.__hidden_1ji8l_gg_{height:0!important;padding:0!important;overflow:hidden!important;border:none!important}.___SColumn_1ji8l_gg_._use_primary_1ji8l_gg_{padding:12px;border-right:1px solid #dee3e5;border-bottom:1px solid #dee3e5;background-color:#f2f3f4}.___SColumn_1ji8l_gg_._use_secondary_1ji8l_gg_{padding:8px;border-bottom:1px solid #a6b0b3;background-color:transparent}.___SColumn_1ji8l_gg_.__use_1ji8l_gg_:last-child{border-right:none}.___SColumn_1ji8l_gg_.__group_1ji8l_gg_.__use_1ji8l_gg_{display:flex;flex-wrap:wrap;flex-direction:column;border-bottom:none;padding:0}.___SColumn_1ji8l_gg_.__groupHead_1ji8l_gg_.__use_1ji8l_gg_{justify-content:center;border-right:none;z-index:1}.___SColumn_1ji8l_gg_.__groupHead_1ji8l_gg_._use_primary_1ji8l_gg_{border-bottom:1px solid #dee3e5}.___SColumn_1ji8l_gg_.__groupHead_1ji8l_gg_._use_secondary_1ji8l_gg_{border-bottom:1px solid #a6b0b3}.___SColumn_1ji8l_gg_.__sortable_1ji8l_gg_{cursor:pointer}.___SColumn_1ji8l_gg_.__active_1ji8l_gg_._use_primary_1ji8l_gg_,.___SColumn_1ji8l_gg_.__sortable_1ji8l_gg_._use_primary_1ji8l_gg_:hover{background-color:#e4e7e8}.___SColumn_1ji8l_gg_.__resizable_1ji8l_gg_:hover:after{background:#a6b0b3}.___SColumn_1ji8l_gg_.__resizable_1ji8l_gg_:after{content:\"\";position:absolute;bottom:0;right:-1px;height:100vh;width:1px;background:transparent;cursor:col-resize}.___SColumn_1ji8l_gg_.__fixed_1ji8l_gg_{position:sticky;z-index:2}.___SSortIcon_1ji8l_gg_{margin-top:2px;margin-left:4px;color:#bdc4c6}.___SSortIcon_1ji8l_gg_.__active_1ji8l_gg_{fill:#64787e}.___SBodyWrapper_1ji8l_gg_{position:relative}.___SBody_1ji8l_gg_{flex-direction:column;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.___SBody_1ji8l_gg_,.___SRow_1ji8l_gg_{display:flex;position:relative}.___SRow_1ji8l_gg_{flex-direction:row}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#f6f7f7}.___SRow_1ji8l_gg_._theme_muted_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#f2f3f4}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_muted_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_muted_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_muted_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#f6f7f7}.___SRow_1ji8l_gg_._theme_info_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#d5eaf9}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_info_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_info_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_info_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#cae4f8}.___SRow_1ji8l_gg_._theme_success_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#e5f3e0}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_success_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_success_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_success_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#dcefd6}.___SRow_1ji8l_gg_._theme_warning_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#fef3e6}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_warning_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_warning_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_warning_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#feefde}.___SRow_1ji8l_gg_._theme_danger_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#fdeaea}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_danger_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_danger_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_danger_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#fce0e0}.___SCell_1ji8l_gg_{display:flex;flex:0 0 auto;font-size:14px;color:#333;line-height:20px;box-sizing:border-box;border-bottom:1px solid #dee3e5;overflow:hidden;white-space:nowrap}.___SCell_1ji8l_gg_._use_primary_1ji8l_gg_{padding:12px;min-height:45px;background-color:#fff}.___SCell_1ji8l_gg_._use_secondary_1ji8l_gg_{padding:8px;min-height:37px;background-color:transparent}.___SCell_1ji8l_gg_.__fixed_1ji8l_gg_{position:sticky;z-index:1}.___SCell_1ji8l_gg_._theme_muted_1ji8l_gg_{background-color:#f2f3f4}.___SCell_1ji8l_gg_._theme_info_1ji8l_gg_{background-color:#d5eaf9}.___SCell_1ji8l_gg_._theme_success_1ji8l_gg_{background-color:#e5f3e0}.___SCell_1ji8l_gg_._theme_warning_1ji8l_gg_{background-color:#fef3e6}.___SCell_1ji8l_gg_._theme_danger_1ji8l_gg_{background-color:#fdeaea}.___SScrollAreaBar_1ji8l_gg_._orientation_horizontal_1ji8l_gg_{position:sticky;bottom:0;left:0;margin-top:-12px;z-index:2}.___SScrollAreaBar_1ji8l_gg_._orientation_vertical_1ji8l_gg_{width:12px}.___SScrollAreaBar_1ji8l_gg_._orientation_horizontal_1ji8l_gg_{margin-left:calc(var(--left_1b2nebp) + 4px);margin-right:calc(var(--right_1b2nebp) + 4px);width:calc(100% - var(--offsetSum_1b2nebp) - 8px)}"
+".___SDataTable_1ji8l_gg_,.___SHeadWrapper_1ji8l_gg_{position:relative}.___SHeadWrapper_1ji8l_gg_.__sticky_1ji8l_gg_{position:-webkit-sticky;position:sticky;top:0;z-index:2}.___SHead_1ji8l_gg_{flex-direction:row;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;z-index:0}.___SColumn_1ji8l_gg_,.___SHead_1ji8l_gg_{display:flex;position:relative}.___SColumn_1ji8l_gg_{flex-grow:1;font-size:12px;line-height:18px;color:#333;box-sizing:border-box}.___SColumn_1ji8l_gg_:focus{outline:none;box-shadow:inset 0 0 0 3px rgba(43,148,225,.3)}.___SColumn_1ji8l_gg_.__hidden_1ji8l_gg_{height:0!important;padding:0!important;overflow:hidden!important;border:none!important}.___SColumn_1ji8l_gg_._use_primary_1ji8l_gg_{padding:12px;border-right:1px solid #dee3e5;border-bottom:1px solid #dee3e5;background-color:#f2f3f4}.___SColumn_1ji8l_gg_._use_secondary_1ji8l_gg_{padding:8px;border-bottom:1px solid #a6b0b3;background-color:transparent}.___SColumn_1ji8l_gg_.__use_1ji8l_gg_:last-child{border-right:none}.___SColumn_1ji8l_gg_.__group_1ji8l_gg_.__use_1ji8l_gg_{display:flex;flex-wrap:wrap;flex-direction:column;border-bottom:none;padding:0}.___SColumn_1ji8l_gg_.__groupHead_1ji8l_gg_.__use_1ji8l_gg_{justify-content:center;border-right:none;z-index:1}.___SColumn_1ji8l_gg_.__groupHead_1ji8l_gg_._use_primary_1ji8l_gg_{border-bottom:1px solid #dee3e5}.___SColumn_1ji8l_gg_.__groupHead_1ji8l_gg_._use_secondary_1ji8l_gg_{border-bottom:1px solid #a6b0b3}.___SColumn_1ji8l_gg_.__sortable_1ji8l_gg_{cursor:pointer}.___SColumn_1ji8l_gg_.__active_1ji8l_gg_._use_primary_1ji8l_gg_,.___SColumn_1ji8l_gg_.__sortable_1ji8l_gg_._use_primary_1ji8l_gg_:hover{background-color:#e4e7e8}.___SColumn_1ji8l_gg_.__resizable_1ji8l_gg_:hover:after{background:#a6b0b3}.___SColumn_1ji8l_gg_.__resizable_1ji8l_gg_:after{content:\"\";position:absolute;bottom:0;right:-1px;height:100vh;width:1px;background:transparent;cursor:col-resize}.___SColumn_1ji8l_gg_.__fixed_1ji8l_gg_{position:-webkit-sticky;position:sticky;z-index:2}.___SSortIcon_1ji8l_gg_{margin-top:2px;margin-left:4px;color:#bdc4c6}.___SSortIcon_1ji8l_gg_.__active_1ji8l_gg_{fill:#64787e}.___SBodyWrapper_1ji8l_gg_{position:relative}.___SBody_1ji8l_gg_{flex-direction:column;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.___SBody_1ji8l_gg_,.___SRow_1ji8l_gg_{display:flex;position:relative}.___SRow_1ji8l_gg_{flex-direction:row}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#f6f7f7}.___SRow_1ji8l_gg_._theme_muted_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#f2f3f4}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_muted_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_muted_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_muted_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#f6f7f7}.___SRow_1ji8l_gg_._theme_info_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#d5eaf9}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_info_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_info_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_info_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#cae4f8}.___SRow_1ji8l_gg_._theme_success_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#e5f3e0}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_success_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_success_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_success_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#dcefd6}.___SRow_1ji8l_gg_._theme_warning_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#fef3e6}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_warning_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_warning_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_warning_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#feefde}.___SRow_1ji8l_gg_._theme_danger_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#fdeaea}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_danger_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_danger_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_danger_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#fce0e0}.___SCell_1ji8l_gg_{display:flex;flex:0 0 auto;font-size:14px;color:#333;line-height:20px;box-sizing:border-box;border-bottom:1px solid #dee3e5;overflow:hidden;white-space:nowrap}.___SCell_1ji8l_gg_._use_primary_1ji8l_gg_{padding:12px;min-height:45px;background-color:#fff}.___SCell_1ji8l_gg_._use_secondary_1ji8l_gg_{padding:8px;min-height:37px;background-color:transparent}.___SCell_1ji8l_gg_.__fixed_1ji8l_gg_{position:-webkit-sticky;position:sticky;z-index:1}.___SCell_1ji8l_gg_._theme_muted_1ji8l_gg_{background-color:#f2f3f4}.___SCell_1ji8l_gg_._theme_info_1ji8l_gg_{background-color:#d5eaf9}.___SCell_1ji8l_gg_._theme_success_1ji8l_gg_{background-color:#e5f3e0}.___SCell_1ji8l_gg_._theme_warning_1ji8l_gg_{background-color:#fef3e6}.___SCell_1ji8l_gg_._theme_danger_1ji8l_gg_{background-color:#fdeaea}.___SScrollAreaBar_1ji8l_gg_._orientation_horizontal_1ji8l_gg_{position:-webkit-sticky;position:sticky;bottom:0;left:0;margin-top:-12px;z-index:2}.___SScrollAreaBar_1ji8l_gg_._orientation_vertical_1ji8l_gg_{width:12px}.___SScrollAreaBar_1ji8l_gg_._orientation_horizontal_1ji8l_gg_{margin-left:calc(var(--left_1b2nebp) + 4px);margin-right:calc(var(--right_1b2nebp) + 4px);width:calc(100% - var(--offsetSum_1b2nebp) - 8px)}"
 /*__inner_css_end__*/
 , "1b2nebp_gg_")
 /*__reshadow_css_end__*/

package/lib/cjs/Head.js

@@ -31,9 +31,9 @@ var _flexBox = require("@semcore/flex-box");
 
 var _scrollArea = _interopRequireDefault(require("@semcore/scroll-area"));
 
-var _xs = _interopRequireDefault(require("@semcore/icon/lib/SortDesc/xs"));
+var _m = _interopRequireDefault(require("@semcore/icon/SortDesc/m"));
 
-var _xs2 = _interopRequireDefault(require("@semcore/icon/lib/SortAsc/xs"));
+var _m2 = _interopRequireDefault(require("@semcore/icon/SortAsc/m"));
 
 var _assignProps2 = require("@semcore/utils/lib/assignProps");
 
@@ -64,8 +64,8 @@ _core.sstyled.insert(
   "--right": "--right_1jfuf14"
 });
 var SORTING_ICON = {
-  desc: _xs["default"],
-  asc: _xs2["default"]
+  desc: _m["default"],
+  asc: _m2["default"]
 };
 
 var Head = /*#__PURE__*/function (_Component) {
@@ -89,6 +89,13 @@ var Head = /*#__PURE__*/function (_Component) {
         _this.asProps.$onSortClick(name, e);
       };
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerKeyDown", function (name) {
+      return function (e) {
+        if (e.keyCode === 13) {
+          _this.asProps.$onSortClick(name, e);
+        }
+      };
+    });
     return _this;
   }
 
@@ -134,6 +141,7 @@ var Head = /*#__PURE__*/function (_Component) {
         "tabIndex": column.sortable && 0
       }, column.props), {}, {
         "onClick": (0, _assignProps2.callAllEventHandlers)(column.props.onClick, column.sortable ? this.bindHandlerSortClick(column.name) : undefined),
+        "onKeyDown": (0, _assignProps2.callAllEventHandlers)(column.props.onKeyDown, column.sortable ? this.bindHandlerKeyDown(column.name) : undefined),
         "style": style,
         "hidden": hidden
       })), isGroup ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SColumn, _ref2.cn("SColumn", {
@@ -165,17 +173,14 @@ var Head = /*#__PURE__*/function (_Component) {
           offsetLeftSum = _getScrollOffsetValue2[0],
           offsetRightSum = _getScrollOffsetValue2[1];
 
-      var leftVar = offsetLeftSum + 'px';
-      var rightVar = offsetRightSum + 'px';
-
       _logger["default"].warn(sticky, "'sticky' property is deprecated, use '<Sticky/>' wrapper", this.asProps['data-ui-name'] || Head.displayName);
 
       return _ref3 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SHeadWrapper, _ref3.cn("SHeadWrapper", {
         "sticky": sticky
       }), /*#__PURE__*/_react["default"].createElement(_scrollArea["default"], _ref3.cn("ScrollArea", {
         "styles": scrollStyles,
-        "left": "".concat(offsetLeftSum, "px"),
-        "right": "".concat(offsetRightSum, "px"),
+        "use:left": "".concat(offsetLeftSum, "px"),
+        "use:right": "".concat(offsetRightSum, "px"),
         "shadow": true,
         "onResize": onResize
       }), /*#__PURE__*/_react["default"].createElement(_scrollArea["default"].Container, {

package/lib/cjs/Head.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Head.js"],"names":["SORTING_ICON","desc","SortDescXS","asc","SortAscXS","Head","name","e","asProps","$onSortClick","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","Flex","SHead","Box","SSortIcon","sortDirection","isGroup","cSize","length","value","style","props","flex","undefined","fixed","resizable","sortable","active","onClick","bindHandlerSortClick","children","renderColumns","Children","columnsChildren","onResize","$scrollRef","sticky","SHeadWrapper","offsetLeftSum","offsetRightSum","leftVar","rightVar","logger","warn","displayName","scrollStyles","origin","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAMA,YAAY,GAAG;AACnBC,EAAAA,IAAI,EAAEC,cADa;AAEnBC,EAAAA,GAAG,EAAEC;AAFc,CAArB;;IAKMC,I;;;;;;;;;;;;;;;gGACM,E;6GAEa,UAACC,IAAD;AAAA,aAAU,UAACC,CAAD,EAAO;AACtC,cAAKC,OAAL,CAAaC,YAAb,CAA0BH,IAA1B,EAAgCC,CAAhC;AACD,OAFsB;AAAA,K;;;;;;WAIvB,uBAAcG,OAAd,EAAuBC,KAAvB,EAA8B;AAAA;;AAC5B,aAAOD,OAAO,CAACE,GAAR,CAAY,UAACC,MAAD;AAAA,eAAY,MAAI,CAACC,YAAL,CAAkBD,MAAlB,EAA0BF,KAA1B,CAAZ;AAAA,OAAZ,CAAP;AACD;;;WAED,sBAAaE,MAAb,EAAqBF,KAArB,EAA4B;AAAA;;AAAA,0BACM,KAAKH,OADX;AAAA,UAClBO,MADkB,iBAClBA,MADkB;AAAA,UACVC,GADU,iBACVA,GADU;AAAA,UACLC,MADK,iBACLA,MADK;AAE1B,UAAMC,OAAO,GAAGC,aAAhB;AACA,UAAMC,KAAK,GAAGC,YAAd;AACA,UAAMC,SAAS,GAAGtB,YAAY,CAACa,MAAM,CAACU,aAAR,CAA9B;AACA,UAAMC,OAAO,GAAG,CAAC,CAACX,MAAM,CAACH,OAAzB;AACA,UAAMe,KAAK,GAAGD,OAAO,GAAG,2BAAeX,MAAM,CAACH,OAAtB,EAA+BgB,MAAlC,GAA2C,CAAhE;;AAN0B,2BAOJ,0BAAcb,MAAd,EAAsB,KAAKH,OAA3B,CAPI;AAAA;AAAA,UAOnBJ,IAPmB;AAAA,UAObqB,KAPa;;AAQ1B,UAAMC,KAAK,wFACRtB,IADQ,EACDqB,KADC,iEAEEd,MAAM,CAACgB,KAAP,CAAaC,IAAb,KAAsBC,SAAtB,cAAsCpB,KAAK,GAAGc,KAA9C,MAFF,oBAGNZ,MAAM,CAACgB,KAAP,CAAaD,KAHP,CAAX;;AAMA,qBAAO,mBAAQb,MAAR,CAAP,eACE,gCAAC,OAAD;AAAA,eACOF,MAAM,CAACP,IADd;AAAA,eAEOU,GAFP;AAAA,iBAGSH,MAAM,CAACmB,KAHhB;AAAA,qBAIanB,MAAM,CAACoB,SAJpB;AAAA,oBAKYpB,MAAM,CAACqB,QALnB;AAAA,kBAMUrB,MAAM,CAACsB,MANjB;AAAA,iBAOSX,OAPT;AAAA,oBAQYX,MAAM,CAACqB,QAAP,IAAmB;AAR/B,SASMrB,MAAM,CAACgB,KATb;AAAA,mBAUW,wCACPhB,MAAM,CAACgB,KAAP,CAAaO,OADN,EAEPvB,MAAM,CAACqB,QAAP,GAAkB,KAAKG,oBAAL,CAA0BxB,MAAM,CAACP,IAAjC,CAAlB,GAA2DyB,SAFpD,CAVX;AAAA,iBAcSH,KAdT;AAAA,kBAeUX;AAfV,WAiBGO,OAAO,gBACN,+EACE,gCAAC,OAAD;AAAA;AAAA,eAAwBR;AAAxB,uBACE,4DAAMH,MAAM,CAACgB,KAAP,CAAaS,QAAnB,CADF,CADF,eAIE,gCAAC,KAAD,yBAAQ,KAAKC,aAAL,CAAmB1B,MAAM,CAACH,OAA1B,EAAmC,MAAMe,KAAzC,CAAR,CAJF,CADM,gBAQN,+EACE,4DAAMZ,MAAM,CAACgB,KAAP,CAAaS,QAAnB,CADF,EAEGzB,MAAM,CAACqB,QAAP,gBAAkB,gCAAC,SAAD;AAAA,kBAAmBrB,MAAM,CAACsB;AAA1B,SAAlB,GAAyD,IAF5D,CAzBJ,CADF;AAiCD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMf,KAAK,GA2BYC,YA3BvB;AADO,2BAEqE,KAAKb,OAF1E;AAAA,UAECgC,QAFD,kBAECA,QAFD;AAAA,UAEWzB,MAFX,kBAEWA,MAFX;AAAA,UAEmB0B,eAFnB,kBAEmBA,eAFnB;AAAA,UAEoCC,QAFpC,kBAEoCA,QAFpC;AAAA,UAE8CC,UAF9C,kBAE8CA,UAF9C;AAAA,UAE0DC,MAF1D,kBAE0DA,MAF1D;AAGP,UAAMC,YAAY,GAAGxB,YAArB;AAEA,WAAKX,OAAL,GAAe,2BAAe+B,eAAf,CAAf;;AALO,kCAOiC,iCAAqB,KAAK/B,OAA1B,CAPjC;AAAA;AAAA,UAOAoC,aAPA;AAAA,UAOeC,cAPf;;AASP,UAAMC,OAAO,GAAGF,aAAa,GAAG,IAAhC;AACA,UAAMG,QAAQ,GAAGF,cAAc,GAAG,IAAlC;;AAEAG,yBAAOC,IAAP,CACEP,MADF,EAEE,0DAFF,EAGE,KAAKpC,OAAL,CAAa,cAAb,KAAgCH,IAAI,CAAC+C,WAHvC;;AAMA,qBAAO,mBAAQrC,MAAR,CAAP,eACE,gCAAC,YAAD;AAAA,kBAAsB6B;AAAtB,uBACE,gCAAC,sBAAD;AAAA,kBACUS,YADV;AAAA,0BAEWP,aAFX;AAAA,2BAGYC,cAHZ;AAAA;AAAA,oBAKYL;AALZ,uBAOE,gCAAC,sBAAD,CAAY,SAAZ;AAAsB,QAAA,GAAG,EAAEC;AAA3B,sBACE,gCAAC,KAAD,0EACG,KAAKJ,aAAL,CAAmBE,eAAnB,EAAoC,MAAM,KAAK/B,OAAL,CAAagB,MAAvD,CADH,CADF,CAPF,CADF,EAcGc,QAAQ,CAACc,MAdZ,CADF;AAkBD;;;EAhGgBC,e;;eAmGJlD,I","sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport SortDescXS from '@semcore/icon/lib/SortDesc/xs';\nimport SortAscXS from '@semcore/icon/lib/SortAsc/xs';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';\nimport logger from '@semcore/utils/lib/logger';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nconst SORTING_ICON = {\n  desc: SortDescXS,\n  asc: SortAscXS,\n};\n\nclass Head extends Component {\n  columns = [];\n\n  bindHandlerSortClick = (name) => (e) => {\n    this.asProps.$onSortClick(name, e);\n  };\n\n  renderColumns(columns, width) {\n    return columns.map((column) => this.renderColumn(column, width));\n  }\n\n  renderColumn(column, width) {\n    const { styles, use, hidden } = this.asProps;\n    const SColumn = Flex;\n    const SHead = Box;\n    const SSortIcon = SORTING_ICON[column.sortDirection];\n    const isGroup = !!column.columns;\n    const cSize = isGroup ? flattenColumns(column.columns).length : 1;\n    const [name, value] = getFixedStyle(column, this.columns);\n    const style = {\n      [name]: value,\n      flexBasis: column.props.flex === undefined && `${width * cSize}%`,\n      ...column.props.style,\n    };\n\n    return sstyled(styles)(\n      <SColumn\n        key={column.name}\n        use={use}\n        fixed={column.fixed}\n        resizable={column.resizable}\n        sortable={column.sortable}\n        active={column.active}\n        group={isGroup}\n        tabIndex={column.sortable && 0}\n        {...column.props}\n        onClick={callAllEventHandlers(\n          column.props.onClick,\n          column.sortable ? this.bindHandlerSortClick(column.name) : undefined,\n        )}\n        style={style}\n        hidden={hidden}\n      >\n        {isGroup ? (\n          <>\n            <SColumn groupHead use={use}>\n              <div>{column.props.children}</div>\n            </SColumn>\n            <SHead>{this.renderColumns(column.columns, 100 / cSize)}</SHead>\n          </>\n        ) : (\n          <>\n            <div>{column.props.children}</div>\n            {column.sortable ? <SSortIcon active={column.active} /> : null}\n          </>\n        )}\n      </SColumn>,\n    );\n  }\n\n  render() {\n    const SHead = Root;\n    const { Children, styles, columnsChildren, onResize, $scrollRef, sticky } = this.asProps;\n    const SHeadWrapper = Box;\n\n    this.columns = flattenColumns(columnsChildren);\n\n    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(this.columns);\n\n    const leftVar = offsetLeftSum + 'px';\n    const rightVar = offsetRightSum + 'px';\n\n    logger.warn(\n      sticky,\n      \"'sticky' property is deprecated, use '<Sticky/>' wrapper\",\n      this.asProps['data-ui-name'] || Head.displayName,\n    );\n\n    return sstyled(styles)(\n      <SHeadWrapper sticky={sticky}>\n        <ScrollArea\n          styles={scrollStyles}\n          left={`${offsetLeftSum}px`}\n          right={`${offsetRightSum}px`}\n          shadow\n          onResize={onResize}\n        >\n          <ScrollArea.Container ref={$scrollRef}>\n            <SHead render={Box}>\n              {this.renderColumns(columnsChildren, 100 / this.columns.length)}\n            </SHead>\n          </ScrollArea.Container>\n        </ScrollArea>\n        {Children.origin}\n      </SHeadWrapper>,\n    );\n  }\n}\n\nexport default Head;\n"],"file":"Head.js"}
+{"version":3,"sources":["../../src/Head.js"],"names":["SORTING_ICON","desc","SortDesc","asc","SortAsc","Head","name","e","asProps","$onSortClick","keyCode","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","Flex","SHead","Box","SSortIcon","sortDirection","isGroup","cSize","length","value","style","props","flex","undefined","fixed","resizable","sortable","active","onClick","bindHandlerSortClick","onKeyDown","bindHandlerKeyDown","children","renderColumns","Children","columnsChildren","onResize","$scrollRef","sticky","SHeadWrapper","offsetLeftSum","offsetRightSum","logger","warn","displayName","scrollStyles","origin","Component"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport SortDesc from '@semcore/icon/SortDesc/m';\nimport SortAsc from '@semcore/icon/SortAsc/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';\nimport logger from '@semcore/utils/lib/logger';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nconst SORTING_ICON = {\n  desc: SortDesc,\n  asc: SortAsc,\n};\n\nclass Head extends Component {\n  columns = [];\n\n  bindHandlerSortClick = (name) => (e) => {\n    this.asProps.$onSortClick(name, e);\n  };\n\n  bindHandlerKeyDown = (name) => (e) => {\n    if (e.keyCode === 13) {\n      this.asProps.$onSortClick(name, e);\n    }\n  };\n\n  renderColumns(columns, width) {\n    return columns.map((column) => this.renderColumn(column, width));\n  }\n\n  renderColumn(column, width) {\n    const { styles, use, hidden } = this.asProps;\n    const SColumn = Flex;\n    const SHead = Box;\n    const SSortIcon = SORTING_ICON[column.sortDirection];\n    const isGroup = !!column.columns;\n    const cSize = isGroup ? flattenColumns(column.columns).length : 1;\n    const [name, value] = getFixedStyle(column, this.columns);\n    const style = {\n      [name]: value,\n      flexBasis: column.props.flex === undefined && `${width * cSize}%`,\n      ...column.props.style,\n    };\n\n    return sstyled(styles)(\n      <SColumn\n        key={column.name}\n        use={use}\n        fixed={column.fixed}\n        resizable={column.resizable}\n        sortable={column.sortable}\n        active={column.active}\n        group={isGroup}\n        tabIndex={column.sortable && 0}\n        {...column.props}\n        onClick={callAllEventHandlers(\n          column.props.onClick,\n          column.sortable ? this.bindHandlerSortClick(column.name) : undefined,\n        )}\n        onKeyDown={callAllEventHandlers(\n          column.props.onKeyDown,\n          column.sortable ? this.bindHandlerKeyDown(column.name) : undefined,\n        )}\n        style={style}\n        hidden={hidden}\n      >\n        {isGroup ? (\n          <>\n            <SColumn groupHead use={use}>\n              <div>{column.props.children}</div>\n            </SColumn>\n            <SHead>{this.renderColumns(column.columns, 100 / cSize)}</SHead>\n          </>\n        ) : (\n          <>\n            <div>{column.props.children}</div>\n            {column.sortable ? <SSortIcon active={column.active} /> : null}\n          </>\n        )}\n      </SColumn>,\n    );\n  }\n\n  render() {\n    const SHead = Root;\n    const { Children, styles, columnsChildren, onResize, $scrollRef, sticky } = this.asProps;\n    const SHeadWrapper = Box;\n\n    this.columns = flattenColumns(columnsChildren);\n\n    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(this.columns);\n\n    logger.warn(\n      sticky,\n      \"'sticky' property is deprecated, use '<Sticky/>' wrapper\",\n      this.asProps['data-ui-name'] || Head.displayName,\n    );\n\n    return sstyled(styles)(\n      <SHeadWrapper sticky={sticky}>\n        <ScrollArea\n          styles={scrollStyles}\n          use:left={`${offsetLeftSum}px`}\n          use:right={`${offsetRightSum}px`}\n          shadow\n          onResize={onResize}\n        >\n          <ScrollArea.Container ref={$scrollRef}>\n            <SHead render={Box}>\n              {this.renderColumns(columnsChildren, 100 / this.columns.length)}\n            </SHead>\n          </ScrollArea.Container>\n        </ScrollArea>\n        {Children.origin}\n      </SHeadWrapper>,\n    );\n  }\n}\n\nexport default Head;\n"],"file":"Head.js"}

package/lib/es6/Body.js

@@ -158,7 +158,8 @@ var Body = /*#__PURE__*/function (_Component) {
           styles = _this$asProps3.styles,
           rows = _this$asProps3.rows,
           columns = _this$asProps3.columns,
-          $scrollRef = _this$asProps3.$scrollRef;
+          $scrollRef = _this$asProps3.$scrollRef,
+          onResize = _this$asProps3.onResize;
       var initializeColumns = !!columns.reduce(function (acc, c) {
         return acc + c.width;
       }, 0);
@@ -172,8 +173,9 @@ var Body = /*#__PURE__*/function (_Component) {
       return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SBodyWrapper, _ref4.cn("SBodyWrapper", {}), /*#__PURE__*/React.createElement(ScrollArea, _ref4.cn("ScrollArea", {
         "shadow": true,
         "styles": scrollStyles,
-        "left": "".concat(offsetLeftSum, "px"),
-        "right": "".concat(offsetRightSum, "px")
+        "use:left": "".concat(offsetLeftSum, "px"),
+        "use:right": "".concat(offsetRightSum, "px"),
+        "onResize": onResize
       }), /*#__PURE__*/React.createElement(ScrollArea.Container, {
         ref: $scrollRef
       }, /*#__PURE__*/React.createElement(SBody, _ref4.cn("SBody", _objectSpread({}, _assignProps({}, _ref))), initializeColumns ? this.renderRows(rows) : null)), /*#__PURE__*/React.createElement(SScrollAreaBar, _ref4.cn("SScrollAreaBar", {

package/lib/es6/Body.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Body.js"],"names":["React","Component","sstyled","Root","Box","Flex","ScrollArea","getFixedStyle","getScrollOffsetValue","assignProps","getCellsByColumn","row","reduce","acc","cell","name","Array","isArray","concat","data","Body","rows","SRow","asProps","styles","$propsRow","map","index","cellsByColumn","_row","props","getRowProps","p","other","propsRow","children","renderCells","theme","active","SCell","columns","use","renderRows","column","find","c","value","vars","cssVar","n","rendersCell","getCellProps","propsCell","justifyContent","style","length","join","push","fixed","SBody","SBodyWrapper","SScrollAreaBar","Bar","Children","$scrollRef","initializeColumns","width","offsetLeftSum","offsetRightSum","offsetSum","scrollStyles","origin"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport { getFixedStyle, getScrollOffsetValue } from './utils';\nimport assignProps from '@semcore/utils/lib/assignProps';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nfunction getCellsByColumn(row) {\n  return row.reduce((acc, cell) => {\n    acc[cell.name] = acc[cell.name]\n      ? Array.isArray(acc[cell.name])\n        ? acc[cell.name].concat(cell.data)\n        : [acc[cell.name], cell.data]\n      : cell.data;\n    return acc;\n  }, {});\n}\n\nclass Body extends Component {\n  renderRows(rows) {\n    const SRow = Box;\n    const { styles, $propsRow } = this.asProps;\n\n    return rows.map((row, index) => {\n      const cellsByColumn = row._row || getCellsByColumn(row);\n      const props = $propsRow.reduce(\n        (acc, { getRowProps = (p) => p, ...other }) => {\n          const propsRow = assignProps(other, acc);\n          return assignProps(getRowProps(propsRow, cellsByColumn, index), propsRow);\n        },\n        {\n          children: this.renderCells(row, cellsByColumn, index),\n        },\n      );\n      return sstyled(styles)(\n        <SRow key={index} theme={props.theme} active={props.active} {...props} />,\n      );\n    });\n  }\n\n  renderCells(row, cellsByColumn, index) {\n    const SCell = Flex;\n    const { styles, columns, use } = this.asProps;\n    return row.reduce((acc, cell) => {\n      if (Array.isArray(cell)) {\n        acc = acc.concat(<div>{this.renderRows(cell)}</div>);\n      } else {\n        const column = columns.find((c) => c.name === cell.name);\n        const [name, value] = getFixedStyle(cell, columns);\n        const vars = (Array.isArray(cell.cssVar) ? cell.cssVar : [cell.cssVar]).map(\n          (n) => `var(${n})`,\n        );\n        const props = (cell.rendersCell || []).reduce(\n          (acc, { getCellProps = (p) => p, ...other }) => {\n            const propsCell = assignProps(other, acc);\n            return assignProps(getCellProps(propsCell, cellsByColumn, index), propsCell);\n          },\n          {\n            name: cell.name,\n            children: cell.data,\n            justifyContent: column?.props?.justifyContent,\n            style: {\n              [name]: value,\n              width: vars.length === 1 ? vars[0] : `calc(${vars.join(' + ')})`,\n            },\n          },\n        );\n\n        acc.push(\n          sstyled(styles)(\n            <SCell key={cell.name} {...props} fixed={cell.fixed} theme={props.theme} use={use} />,\n          ),\n        );\n      }\n      return acc;\n    }, []);\n  }\n\n  render() {\n    const SBody = Root;\n    const SBodyWrapper = Box;\n    const SScrollAreaBar = ScrollArea.Bar;\n    const { Children, styles, rows, columns, $scrollRef } = this.asProps;\n\n    const initializeColumns = !!columns.reduce((acc, c) => acc + c.width, 0);\n\n    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(columns);\n    const offsetSum = offsetLeftSum + offsetRightSum;\n\n    return sstyled(styles)(\n      <SBodyWrapper>\n        <ScrollArea\n          shadow\n          styles={scrollStyles}\n          left={`${offsetLeftSum}px`}\n          right={`${offsetRightSum}px`}\n        >\n          <ScrollArea.Container ref={$scrollRef}>\n            <SBody render={Box}>{initializeColumns ? this.renderRows(rows) : null}</SBody>\n          </ScrollArea.Container>\n          <SScrollAreaBar\n            orientation=\"horizontal\"\n            left={`${offsetLeftSum}px`}\n            right={`${offsetRightSum}px`}\n            offsetSum={`${offsetSum}px`}\n          />\n          <SScrollAreaBar orientation=\"vertical\" />\n        </ScrollArea>\n        {Children.origin}\n      </SBodyWrapper>,\n    );\n  }\n}\n\nexport default Body;\n"],"file":"Body.js"}
+{"version":3,"sources":["../../src/Body.js"],"names":["React","Component","sstyled","Root","Box","Flex","ScrollArea","getFixedStyle","getScrollOffsetValue","assignProps","getCellsByColumn","row","reduce","acc","cell","name","Array","isArray","concat","data","Body","rows","SRow","asProps","styles","$propsRow","map","index","cellsByColumn","_row","props","getRowProps","p","other","propsRow","children","renderCells","theme","active","SCell","columns","use","renderRows","column","find","c","value","vars","cssVar","n","rendersCell","getCellProps","propsCell","justifyContent","style","length","join","push","fixed","SBody","SBodyWrapper","SScrollAreaBar","Bar","Children","$scrollRef","onResize","initializeColumns","width","offsetLeftSum","offsetRightSum","offsetSum","scrollStyles","origin"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport { getFixedStyle, getScrollOffsetValue } from './utils';\nimport assignProps from '@semcore/utils/lib/assignProps';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nfunction getCellsByColumn(row) {\n  return row.reduce((acc, cell) => {\n    acc[cell.name] = acc[cell.name]\n      ? Array.isArray(acc[cell.name])\n        ? acc[cell.name].concat(cell.data)\n        : [acc[cell.name], cell.data]\n      : cell.data;\n    return acc;\n  }, {});\n}\n\nclass Body extends Component {\n  renderRows(rows) {\n    const SRow = Box;\n    const { styles, $propsRow } = this.asProps;\n\n    return rows.map((row, index) => {\n      const cellsByColumn = row._row || getCellsByColumn(row);\n      const props = $propsRow.reduce(\n        (acc, { getRowProps = (p) => p, ...other }) => {\n          const propsRow = assignProps(other, acc);\n          return assignProps(getRowProps(propsRow, cellsByColumn, index), propsRow);\n        },\n        {\n          children: this.renderCells(row, cellsByColumn, index),\n        },\n      );\n      return sstyled(styles)(\n        <SRow key={index} theme={props.theme} active={props.active} {...props} />,\n      );\n    });\n  }\n\n  renderCells(row, cellsByColumn, index) {\n    const SCell = Flex;\n    const { styles, columns, use } = this.asProps;\n    return row.reduce((acc, cell) => {\n      if (Array.isArray(cell)) {\n        acc = acc.concat(<div>{this.renderRows(cell)}</div>);\n      } else {\n        const column = columns.find((c) => c.name === cell.name);\n        const [name, value] = getFixedStyle(cell, columns);\n        const vars = (Array.isArray(cell.cssVar) ? cell.cssVar : [cell.cssVar]).map(\n          (n) => `var(${n})`,\n        );\n        const props = (cell.rendersCell || []).reduce(\n          (acc, { getCellProps = (p) => p, ...other }) => {\n            const propsCell = assignProps(other, acc);\n            return assignProps(getCellProps(propsCell, cellsByColumn, index), propsCell);\n          },\n          {\n            name: cell.name,\n            children: cell.data,\n            justifyContent: column?.props?.justifyContent,\n            style: {\n              [name]: value,\n              width: vars.length === 1 ? vars[0] : `calc(${vars.join(' + ')})`,\n            },\n          },\n        );\n\n        acc.push(\n          sstyled(styles)(\n            <SCell key={cell.name} {...props} fixed={cell.fixed} theme={props.theme} use={use} />,\n          ),\n        );\n      }\n      return acc;\n    }, []);\n  }\n\n  render() {\n    const SBody = Root;\n    const SBodyWrapper = Box;\n    const SScrollAreaBar = ScrollArea.Bar;\n    const { Children, styles, rows, columns, $scrollRef, onResize } = this.asProps;\n\n    const initializeColumns = !!columns.reduce((acc, c) => acc + c.width, 0);\n\n    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(columns);\n    const offsetSum = offsetLeftSum + offsetRightSum;\n\n    return sstyled(styles)(\n      <SBodyWrapper>\n        <ScrollArea\n          shadow\n          styles={scrollStyles}\n          use:left={`${offsetLeftSum}px`}\n          use:right={`${offsetRightSum}px`}\n          onResize={onResize}\n        >\n          <ScrollArea.Container ref={$scrollRef}>\n            <SBody render={Box}>{initializeColumns ? this.renderRows(rows) : null}</SBody>\n          </ScrollArea.Container>\n          <SScrollAreaBar\n            orientation=\"horizontal\"\n            left={`${offsetLeftSum}px`}\n            right={`${offsetRightSum}px`}\n            offsetSum={`${offsetSum}px`}\n          />\n          <SScrollAreaBar orientation=\"vertical\" />\n        </ScrollArea>\n        {Children.origin}\n      </SBodyWrapper>,\n    );\n  }\n}\n\nexport default Body;\n"],"file":"Body.js"}

package/lib/es6/DataTable.js

@@ -34,7 +34,7 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SDataTable_1ji8l_gg_,.___SHeadWrapper_1ji8l_gg_{position:relative}.___SHeadWrapper_1ji8l_gg_.__sticky_1ji8l_gg_{position:sticky;top:0;z-index:2}.___SHead_1ji8l_gg_{flex-direction:row;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;z-index:0}.___SColumn_1ji8l_gg_,.___SHead_1ji8l_gg_{display:flex;position:relative}.___SColumn_1ji8l_gg_{flex-grow:1;font-size:12px;line-height:18px;color:#333;box-sizing:border-box}.___SColumn_1ji8l_gg_:focus{outline:none;box-shadow:inset 0 0 0 3px rgba(43,148,225,.3)}.___SColumn_1ji8l_gg_.__hidden_1ji8l_gg_{height:0!important;padding:0!important;overflow:hidden!important;border:none!important}.___SColumn_1ji8l_gg_._use_primary_1ji8l_gg_{padding:12px;border-right:1px solid #dee3e5;border-bottom:1px solid #dee3e5;background-color:#f2f3f4}.___SColumn_1ji8l_gg_._use_secondary_1ji8l_gg_{padding:8px;border-bottom:1px solid #a6b0b3;background-color:transparent}.___SColumn_1ji8l_gg_.__use_1ji8l_gg_:last-child{border-right:none}.___SColumn_1ji8l_gg_.__group_1ji8l_gg_.__use_1ji8l_gg_{display:flex;flex-wrap:wrap;flex-direction:column;border-bottom:none;padding:0}.___SColumn_1ji8l_gg_.__groupHead_1ji8l_gg_.__use_1ji8l_gg_{justify-content:center;border-right:none;z-index:1}.___SColumn_1ji8l_gg_.__groupHead_1ji8l_gg_._use_primary_1ji8l_gg_{border-bottom:1px solid #dee3e5}.___SColumn_1ji8l_gg_.__groupHead_1ji8l_gg_._use_secondary_1ji8l_gg_{border-bottom:1px solid #a6b0b3}.___SColumn_1ji8l_gg_.__sortable_1ji8l_gg_{cursor:pointer}.___SColumn_1ji8l_gg_.__active_1ji8l_gg_._use_primary_1ji8l_gg_,.___SColumn_1ji8l_gg_.__sortable_1ji8l_gg_._use_primary_1ji8l_gg_:hover{background-color:#e4e7e8}.___SColumn_1ji8l_gg_.__resizable_1ji8l_gg_:hover:after{background:#a6b0b3}.___SColumn_1ji8l_gg_.__resizable_1ji8l_gg_:after{content:\"\";position:absolute;bottom:0;right:-1px;height:100vh;width:1px;background:transparent;cursor:col-resize}.___SColumn_1ji8l_gg_.__fixed_1ji8l_gg_{position:sticky;z-index:2}.___SSortIcon_1ji8l_gg_{margin-top:2px;margin-left:4px;color:#bdc4c6}.___SSortIcon_1ji8l_gg_.__active_1ji8l_gg_{fill:#64787e}.___SBodyWrapper_1ji8l_gg_{position:relative}.___SBody_1ji8l_gg_{flex-direction:column;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.___SBody_1ji8l_gg_,.___SRow_1ji8l_gg_{display:flex;position:relative}.___SRow_1ji8l_gg_{flex-direction:row}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#f6f7f7}.___SRow_1ji8l_gg_._theme_muted_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#f2f3f4}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_muted_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_muted_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_muted_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#f6f7f7}.___SRow_1ji8l_gg_._theme_info_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#d5eaf9}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_info_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_info_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_info_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#cae4f8}.___SRow_1ji8l_gg_._theme_success_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#e5f3e0}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_success_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_success_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_success_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#dcefd6}.___SRow_1ji8l_gg_._theme_warning_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#fef3e6}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_warning_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_warning_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_warning_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#feefde}.___SRow_1ji8l_gg_._theme_danger_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#fdeaea}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_danger_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_danger_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_danger_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#fce0e0}.___SCell_1ji8l_gg_{display:flex;flex:0 0 auto;font-size:14px;color:#333;line-height:20px;box-sizing:border-box;border-bottom:1px solid #dee3e5;overflow:hidden;white-space:nowrap}.___SCell_1ji8l_gg_._use_primary_1ji8l_gg_{padding:12px;min-height:45px;background-color:#fff}.___SCell_1ji8l_gg_._use_secondary_1ji8l_gg_{padding:8px;min-height:37px;background-color:transparent}.___SCell_1ji8l_gg_.__fixed_1ji8l_gg_{position:sticky;z-index:1}.___SCell_1ji8l_gg_._theme_muted_1ji8l_gg_{background-color:#f2f3f4}.___SCell_1ji8l_gg_._theme_info_1ji8l_gg_{background-color:#d5eaf9}.___SCell_1ji8l_gg_._theme_success_1ji8l_gg_{background-color:#e5f3e0}.___SCell_1ji8l_gg_._theme_warning_1ji8l_gg_{background-color:#fef3e6}.___SCell_1ji8l_gg_._theme_danger_1ji8l_gg_{background-color:#fdeaea}.___SScrollAreaBar_1ji8l_gg_._orientation_horizontal_1ji8l_gg_{position:sticky;bottom:0;left:0;margin-top:-12px;z-index:2}.___SScrollAreaBar_1ji8l_gg_._orientation_vertical_1ji8l_gg_{width:12px}.___SScrollAreaBar_1ji8l_gg_._orientation_horizontal_1ji8l_gg_{margin-left:calc(var(--left_1b2nebp) + 4px);margin-right:calc(var(--right_1b2nebp) + 4px);width:calc(100% - var(--offsetSum_1b2nebp) - 8px)}"
+".___SDataTable_1ji8l_gg_,.___SHeadWrapper_1ji8l_gg_{position:relative}.___SHeadWrapper_1ji8l_gg_.__sticky_1ji8l_gg_{position:-webkit-sticky;position:sticky;top:0;z-index:2}.___SHead_1ji8l_gg_{flex-direction:row;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;z-index:0}.___SColumn_1ji8l_gg_,.___SHead_1ji8l_gg_{display:flex;position:relative}.___SColumn_1ji8l_gg_{flex-grow:1;font-size:12px;line-height:18px;color:#333;box-sizing:border-box}.___SColumn_1ji8l_gg_:focus{outline:none;box-shadow:inset 0 0 0 3px rgba(43,148,225,.3)}.___SColumn_1ji8l_gg_.__hidden_1ji8l_gg_{height:0!important;padding:0!important;overflow:hidden!important;border:none!important}.___SColumn_1ji8l_gg_._use_primary_1ji8l_gg_{padding:12px;border-right:1px solid #dee3e5;border-bottom:1px solid #dee3e5;background-color:#f2f3f4}.___SColumn_1ji8l_gg_._use_secondary_1ji8l_gg_{padding:8px;border-bottom:1px solid #a6b0b3;background-color:transparent}.___SColumn_1ji8l_gg_.__use_1ji8l_gg_:last-child{border-right:none}.___SColumn_1ji8l_gg_.__group_1ji8l_gg_.__use_1ji8l_gg_{display:flex;flex-wrap:wrap;flex-direction:column;border-bottom:none;padding:0}.___SColumn_1ji8l_gg_.__groupHead_1ji8l_gg_.__use_1ji8l_gg_{justify-content:center;border-right:none;z-index:1}.___SColumn_1ji8l_gg_.__groupHead_1ji8l_gg_._use_primary_1ji8l_gg_{border-bottom:1px solid #dee3e5}.___SColumn_1ji8l_gg_.__groupHead_1ji8l_gg_._use_secondary_1ji8l_gg_{border-bottom:1px solid #a6b0b3}.___SColumn_1ji8l_gg_.__sortable_1ji8l_gg_{cursor:pointer}.___SColumn_1ji8l_gg_.__active_1ji8l_gg_._use_primary_1ji8l_gg_,.___SColumn_1ji8l_gg_.__sortable_1ji8l_gg_._use_primary_1ji8l_gg_:hover{background-color:#e4e7e8}.___SColumn_1ji8l_gg_.__resizable_1ji8l_gg_:hover:after{background:#a6b0b3}.___SColumn_1ji8l_gg_.__resizable_1ji8l_gg_:after{content:\"\";position:absolute;bottom:0;right:-1px;height:100vh;width:1px;background:transparent;cursor:col-resize}.___SColumn_1ji8l_gg_.__fixed_1ji8l_gg_{position:-webkit-sticky;position:sticky;z-index:2}.___SSortIcon_1ji8l_gg_{margin-top:2px;margin-left:4px;color:#bdc4c6}.___SSortIcon_1ji8l_gg_.__active_1ji8l_gg_{fill:#64787e}.___SBodyWrapper_1ji8l_gg_{position:relative}.___SBody_1ji8l_gg_{flex-direction:column;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.___SBody_1ji8l_gg_,.___SRow_1ji8l_gg_{display:flex;position:relative}.___SRow_1ji8l_gg_{flex-direction:row}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#f6f7f7}.___SRow_1ji8l_gg_._theme_muted_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#f2f3f4}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_muted_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_muted_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_muted_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#f6f7f7}.___SRow_1ji8l_gg_._theme_info_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#d5eaf9}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_info_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_info_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_info_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#cae4f8}.___SRow_1ji8l_gg_._theme_success_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#e5f3e0}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_success_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_success_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_success_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#dcefd6}.___SRow_1ji8l_gg_._theme_warning_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#fef3e6}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_warning_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_warning_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_warning_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#feefde}.___SRow_1ji8l_gg_._theme_danger_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#fdeaea}.___SRow_1ji8l_gg_:hover .___SCell_1ji8l_gg_._theme_danger_1ji8l_gg_,.___SRow_1ji8l_gg_._theme_danger_1ji8l_gg_:hover .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_),.___SRow_1ji8l_gg_._theme_danger_1ji8l_gg_.__active_1ji8l_gg_ .___SCell_1ji8l_gg_:not(.__theme_1ji8l_gg_){background-color:#fce0e0}.___SCell_1ji8l_gg_{display:flex;flex:0 0 auto;font-size:14px;color:#333;line-height:20px;box-sizing:border-box;border-bottom:1px solid #dee3e5;overflow:hidden;white-space:nowrap}.___SCell_1ji8l_gg_._use_primary_1ji8l_gg_{padding:12px;min-height:45px;background-color:#fff}.___SCell_1ji8l_gg_._use_secondary_1ji8l_gg_{padding:8px;min-height:37px;background-color:transparent}.___SCell_1ji8l_gg_.__fixed_1ji8l_gg_{position:-webkit-sticky;position:sticky;z-index:1}.___SCell_1ji8l_gg_._theme_muted_1ji8l_gg_{background-color:#f2f3f4}.___SCell_1ji8l_gg_._theme_info_1ji8l_gg_{background-color:#d5eaf9}.___SCell_1ji8l_gg_._theme_success_1ji8l_gg_{background-color:#e5f3e0}.___SCell_1ji8l_gg_._theme_warning_1ji8l_gg_{background-color:#fef3e6}.___SCell_1ji8l_gg_._theme_danger_1ji8l_gg_{background-color:#fdeaea}.___SScrollAreaBar_1ji8l_gg_._orientation_horizontal_1ji8l_gg_{position:-webkit-sticky;position:sticky;bottom:0;left:0;margin-top:-12px;z-index:2}.___SScrollAreaBar_1ji8l_gg_._orientation_vertical_1ji8l_gg_{width:12px}.___SScrollAreaBar_1ji8l_gg_._orientation_horizontal_1ji8l_gg_{margin-left:calc(var(--left_1b2nebp) + 4px);margin-right:calc(var(--right_1b2nebp) + 4px);width:calc(100% - var(--offsetSum_1b2nebp) - 8px)}"
 /*__inner_css_end__*/
 , "1b2nebp_gg_")
 /*__reshadow_css_end__*/

package/lib/es6/Head.js

@@ -21,8 +21,8 @@ import React from 'react';
 import { Component, sstyled, Root } from '@semcore/core';
 import { Box, Flex } from '@semcore/flex-box';
 import ScrollArea from '@semcore/scroll-area';
-import SortDescXS from '@semcore/icon/lib/SortDesc/xs';
-import SortAscXS from '@semcore/icon/lib/SortAsc/xs';
+import SortDesc from '@semcore/icon/SortDesc/m';
+import SortAsc from '@semcore/icon/SortAsc/m';
 import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
 import { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';
 import logger from '@semcore/utils/lib/logger';
@@ -42,8 +42,8 @@ _sstyled.insert(
   "--right": "--right_1jfuf14"
 });
 var SORTING_ICON = {
-  desc: SortDescXS,
-  asc: SortAscXS
+  desc: SortDesc,
+  asc: SortAsc
 };
 
 var Head = /*#__PURE__*/function (_Component) {
@@ -70,6 +70,14 @@ var Head = /*#__PURE__*/function (_Component) {
       };
     });
 
+    _defineProperty(_assertThisInitialized(_this), "bindHandlerKeyDown", function (name) {
+      return function (e) {
+        if (e.keyCode === 13) {
+          _this.asProps.$onSortClick(name, e);
+        }
+      };
+    });
+
     return _this;
   }
 
@@ -115,6 +123,7 @@ var Head = /*#__PURE__*/function (_Component) {
         "tabIndex": column.sortable && 0
       }, column.props), {}, {
         "onClick": callAllEventHandlers(column.props.onClick, column.sortable ? this.bindHandlerSortClick(column.name) : undefined),
+        "onKeyDown": callAllEventHandlers(column.props.onKeyDown, column.sortable ? this.bindHandlerKeyDown(column.name) : undefined),
         "style": style,
         "hidden": hidden
       })), isGroup ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SColumn, _ref2.cn("SColumn", {
@@ -146,15 +155,13 @@ var Head = /*#__PURE__*/function (_Component) {
           offsetLeftSum = _getScrollOffsetValue2[0],
           offsetRightSum = _getScrollOffsetValue2[1];
 
-      var leftVar = offsetLeftSum + 'px';
-      var rightVar = offsetRightSum + 'px';
       logger.warn(sticky, "'sticky' property is deprecated, use '<Sticky/>' wrapper", this.asProps['data-ui-name'] || Head.displayName);
       return _ref3 = sstyled(styles), /*#__PURE__*/React.createElement(SHeadWrapper, _ref3.cn("SHeadWrapper", {
         "sticky": sticky
       }), /*#__PURE__*/React.createElement(ScrollArea, _ref3.cn("ScrollArea", {
         "styles": scrollStyles,
-        "left": "".concat(offsetLeftSum, "px"),
-        "right": "".concat(offsetRightSum, "px"),
+        "use:left": "".concat(offsetLeftSum, "px"),
+        "use:right": "".concat(offsetRightSum, "px"),
         "shadow": true,
         "onResize": onResize
       }), /*#__PURE__*/React.createElement(ScrollArea.Container, {

package/lib/es6/Head.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Head.js"],"names":["React","Component","sstyled","Root","Box","Flex","ScrollArea","SortDescXS","SortAscXS","callAllEventHandlers","flattenColumns","getFixedStyle","getScrollOffsetValue","logger","SORTING_ICON","desc","asc","Head","name","e","asProps","$onSortClick","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","SHead","SSortIcon","sortDirection","isGroup","cSize","length","value","style","props","flex","undefined","fixed","resizable","sortable","active","onClick","bindHandlerSortClick","children","renderColumns","Children","columnsChildren","onResize","$scrollRef","sticky","SHeadWrapper","offsetLeftSum","offsetRightSum","leftVar","rightVar","warn","displayName","scrollStyles","origin"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport SortDescXS from '@semcore/icon/lib/SortDesc/xs';\nimport SortAscXS from '@semcore/icon/lib/SortAsc/xs';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';\nimport logger from '@semcore/utils/lib/logger';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nconst SORTING_ICON = {\n  desc: SortDescXS,\n  asc: SortAscXS,\n};\n\nclass Head extends Component {\n  columns = [];\n\n  bindHandlerSortClick = (name) => (e) => {\n    this.asProps.$onSortClick(name, e);\n  };\n\n  renderColumns(columns, width) {\n    return columns.map((column) => this.renderColumn(column, width));\n  }\n\n  renderColumn(column, width) {\n    const { styles, use, hidden } = this.asProps;\n    const SColumn = Flex;\n    const SHead = Box;\n    const SSortIcon = SORTING_ICON[column.sortDirection];\n    const isGroup = !!column.columns;\n    const cSize = isGroup ? flattenColumns(column.columns).length : 1;\n    const [name, value] = getFixedStyle(column, this.columns);\n    const style = {\n      [name]: value,\n      flexBasis: column.props.flex === undefined && `${width * cSize}%`,\n      ...column.props.style,\n    };\n\n    return sstyled(styles)(\n      <SColumn\n        key={column.name}\n        use={use}\n        fixed={column.fixed}\n        resizable={column.resizable}\n        sortable={column.sortable}\n        active={column.active}\n        group={isGroup}\n        tabIndex={column.sortable && 0}\n        {...column.props}\n        onClick={callAllEventHandlers(\n          column.props.onClick,\n          column.sortable ? this.bindHandlerSortClick(column.name) : undefined,\n        )}\n        style={style}\n        hidden={hidden}\n      >\n        {isGroup ? (\n          <>\n            <SColumn groupHead use={use}>\n              <div>{column.props.children}</div>\n            </SColumn>\n            <SHead>{this.renderColumns(column.columns, 100 / cSize)}</SHead>\n          </>\n        ) : (\n          <>\n            <div>{column.props.children}</div>\n            {column.sortable ? <SSortIcon active={column.active} /> : null}\n          </>\n        )}\n      </SColumn>,\n    );\n  }\n\n  render() {\n    const SHead = Root;\n    const { Children, styles, columnsChildren, onResize, $scrollRef, sticky } = this.asProps;\n    const SHeadWrapper = Box;\n\n    this.columns = flattenColumns(columnsChildren);\n\n    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(this.columns);\n\n    const leftVar = offsetLeftSum + 'px';\n    const rightVar = offsetRightSum + 'px';\n\n    logger.warn(\n      sticky,\n      \"'sticky' property is deprecated, use '<Sticky/>' wrapper\",\n      this.asProps['data-ui-name'] || Head.displayName,\n    );\n\n    return sstyled(styles)(\n      <SHeadWrapper sticky={sticky}>\n        <ScrollArea\n          styles={scrollStyles}\n          left={`${offsetLeftSum}px`}\n          right={`${offsetRightSum}px`}\n          shadow\n          onResize={onResize}\n        >\n          <ScrollArea.Container ref={$scrollRef}>\n            <SHead render={Box}>\n              {this.renderColumns(columnsChildren, 100 / this.columns.length)}\n            </SHead>\n          </ScrollArea.Container>\n        </ScrollArea>\n        {Children.origin}\n      </SHeadWrapper>,\n    );\n  }\n}\n\nexport default Head;\n"],"file":"Head.js"}
+{"version":3,"sources":["../../src/Head.js"],"names":["React","Component","sstyled","Root","Box","Flex","ScrollArea","SortDesc","SortAsc","callAllEventHandlers","flattenColumns","getFixedStyle","getScrollOffsetValue","logger","SORTING_ICON","desc","asc","Head","name","e","asProps","$onSortClick","keyCode","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","SHead","SSortIcon","sortDirection","isGroup","cSize","length","value","style","props","flex","undefined","fixed","resizable","sortable","active","onClick","bindHandlerSortClick","onKeyDown","bindHandlerKeyDown","children","renderColumns","Children","columnsChildren","onResize","$scrollRef","sticky","SHeadWrapper","offsetLeftSum","offsetRightSum","warn","displayName","scrollStyles","origin"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport SortDesc from '@semcore/icon/SortDesc/m';\nimport SortAsc from '@semcore/icon/SortAsc/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';\nimport logger from '@semcore/utils/lib/logger';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nconst SORTING_ICON = {\n  desc: SortDesc,\n  asc: SortAsc,\n};\n\nclass Head extends Component {\n  columns = [];\n\n  bindHandlerSortClick = (name) => (e) => {\n    this.asProps.$onSortClick(name, e);\n  };\n\n  bindHandlerKeyDown = (name) => (e) => {\n    if (e.keyCode === 13) {\n      this.asProps.$onSortClick(name, e);\n    }\n  };\n\n  renderColumns(columns, width) {\n    return columns.map((column) => this.renderColumn(column, width));\n  }\n\n  renderColumn(column, width) {\n    const { styles, use, hidden } = this.asProps;\n    const SColumn = Flex;\n    const SHead = Box;\n    const SSortIcon = SORTING_ICON[column.sortDirection];\n    const isGroup = !!column.columns;\n    const cSize = isGroup ? flattenColumns(column.columns).length : 1;\n    const [name, value] = getFixedStyle(column, this.columns);\n    const style = {\n      [name]: value,\n      flexBasis: column.props.flex === undefined && `${width * cSize}%`,\n      ...column.props.style,\n    };\n\n    return sstyled(styles)(\n      <SColumn\n        key={column.name}\n        use={use}\n        fixed={column.fixed}\n        resizable={column.resizable}\n        sortable={column.sortable}\n        active={column.active}\n        group={isGroup}\n        tabIndex={column.sortable && 0}\n        {...column.props}\n        onClick={callAllEventHandlers(\n          column.props.onClick,\n          column.sortable ? this.bindHandlerSortClick(column.name) : undefined,\n        )}\n        onKeyDown={callAllEventHandlers(\n          column.props.onKeyDown,\n          column.sortable ? this.bindHandlerKeyDown(column.name) : undefined,\n        )}\n        style={style}\n        hidden={hidden}\n      >\n        {isGroup ? (\n          <>\n            <SColumn groupHead use={use}>\n              <div>{column.props.children}</div>\n            </SColumn>\n            <SHead>{this.renderColumns(column.columns, 100 / cSize)}</SHead>\n          </>\n        ) : (\n          <>\n            <div>{column.props.children}</div>\n            {column.sortable ? <SSortIcon active={column.active} /> : null}\n          </>\n        )}\n      </SColumn>,\n    );\n  }\n\n  render() {\n    const SHead = Root;\n    const { Children, styles, columnsChildren, onResize, $scrollRef, sticky } = this.asProps;\n    const SHeadWrapper = Box;\n\n    this.columns = flattenColumns(columnsChildren);\n\n    const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(this.columns);\n\n    logger.warn(\n      sticky,\n      \"'sticky' property is deprecated, use '<Sticky/>' wrapper\",\n      this.asProps['data-ui-name'] || Head.displayName,\n    );\n\n    return sstyled(styles)(\n      <SHeadWrapper sticky={sticky}>\n        <ScrollArea\n          styles={scrollStyles}\n          use:left={`${offsetLeftSum}px`}\n          use:right={`${offsetRightSum}px`}\n          shadow\n          onResize={onResize}\n        >\n          <ScrollArea.Container ref={$scrollRef}>\n            <SHead render={Box}>\n              {this.renderColumns(columnsChildren, 100 / this.columns.length)}\n            </SHead>\n          </ScrollArea.Container>\n        </ScrollArea>\n        {Children.origin}\n      </SHeadWrapper>,\n    );\n  }\n}\n\nexport default Head;\n"],"file":"Head.js"}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@semcore/data-table",
   "description": "SEMRush DataTable Component",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
+  "sideEffects": false,
   "author": "Roman Lysov <r.lysov@semrush.com>",
   "license": "MIT",
   "scripts": {
@@ -14,7 +15,7 @@
   "dependencies": {
     "@semcore/utils": "^3.22",
     "@semcore/flex-box": "^4",
-    "@semcore/icon": "^2",
+    "@semcore/icon": "^2.16",
     "@semcore/scroll-area": "^3.2"
   },
   "peerDependencies": {

package/src/Body.js

@@ -82,7 +82,7 @@ class Body extends Component {
     const SBody = Root;
     const SBodyWrapper = Box;
     const SScrollAreaBar = ScrollArea.Bar;
-    const { Children, styles, rows, columns, $scrollRef } = this.asProps;
+    const { Children, styles, rows, columns, $scrollRef, onResize } = this.asProps;
 
     const initializeColumns = !!columns.reduce((acc, c) => acc + c.width, 0);
 
@@ -94,8 +94,9 @@ class Body extends Component {
         <ScrollArea
           shadow
           styles={scrollStyles}
-          left={`${offsetLeftSum}px`}
-          right={`${offsetRightSum}px`}
+          use:left={`${offsetLeftSum}px`}
+          use:right={`${offsetRightSum}px`}
+          onResize={onResize}
         >
           <ScrollArea.Container ref={$scrollRef}>
             <SBody render={Box}>{initializeColumns ? this.renderRows(rows) : null}</SBody>

package/src/Head.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { Component, sstyled, Root } from '@semcore/core';
 import { Box, Flex } from '@semcore/flex-box';
 import ScrollArea from '@semcore/scroll-area';
-import SortDescXS from '@semcore/icon/lib/SortDesc/xs';
-import SortAscXS from '@semcore/icon/lib/SortAsc/xs';
+import SortDesc from '@semcore/icon/SortDesc/m';
+import SortAsc from '@semcore/icon/SortAsc/m';
 import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
 import { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';
 import logger from '@semcore/utils/lib/logger';
@@ -11,8 +11,8 @@ import logger from '@semcore/utils/lib/logger';
 import scrollStyles from './style/scroll-area.shadow.css';
 
 const SORTING_ICON = {
-  desc: SortDescXS,
-  asc: SortAscXS,
+  desc: SortDesc,
+  asc: SortAsc,
 };
 
 class Head extends Component {
@@ -22,6 +22,12 @@ class Head extends Component {
     this.asProps.$onSortClick(name, e);
   };
 
+  bindHandlerKeyDown = (name) => (e) => {
+    if (e.keyCode === 13) {
+      this.asProps.$onSortClick(name, e);
+    }
+  };
+
   renderColumns(columns, width) {
     return columns.map((column) => this.renderColumn(column, width));
   }
@@ -55,6 +61,10 @@ class Head extends Component {
           column.props.onClick,
           column.sortable ? this.bindHandlerSortClick(column.name) : undefined,
         )}
+        onKeyDown={callAllEventHandlers(
+          column.props.onKeyDown,
+          column.sortable ? this.bindHandlerKeyDown(column.name) : undefined,
+        )}
         style={style}
         hidden={hidden}
       >
@@ -84,9 +94,6 @@ class Head extends Component {
 
     const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(this.columns);
 
-    const leftVar = offsetLeftSum + 'px';
-    const rightVar = offsetRightSum + 'px';
-
     logger.warn(
       sticky,
       "'sticky' property is deprecated, use '<Sticky/>' wrapper",
@@ -97,8 +104,8 @@ class Head extends Component {
       <SHeadWrapper sticky={sticky}>
         <ScrollArea
           styles={scrollStyles}
-          left={`${offsetLeftSum}px`}
-          right={`${offsetRightSum}px`}
+          use:left={`${offsetLeftSum}px`}
+          use:right={`${offsetRightSum}px`}
           shadow
           onResize={onResize}
         >