@semcore/data-table 16.0.0 → 16.0.1-prerelease.2

package/lib/cjs/components/Head/Head.js

@@ -20,33 +20,33 @@ var React = _interopRequireWildcard(require("react"));
 var _baseComponents = require("@semcore/base-components");
 var _Column = require("./Column");
 var _Group = require("./Group");
-var _utils = require("../../utils");
 var _DataTable = require("../DataTable/DataTable");
 var _checkbox = _interopRequireDefault(require("@semcore/checkbox"));
 /*!__reshadow-styles__:"./style.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SGroupContainer_13xrb_gg_,.___SHead_13xrb_gg_{display:contents}.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SColumn_13xrb_gg_{position:sticky;top:0;z-index:2}.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SGroup_13xrb_gg_{top:0}.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SGroupContainer_13xrb_gg_>.___SColumn_13xrb_gg_{position:sticky;z-index:2}.___SHead_13xrb_gg_.__compact_13xrb_gg_ .___SColumn_13xrb_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_13xrb_gg_,.___SGroup_13xrb_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,min-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,max-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out;overflow:hidden}.___SGroup_13xrb_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_13xrb_gg_._use_primary_13xrb_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_13xrb_gg_._use_primary_13xrb_gg_:has(~.___SColumn_13xrb_gg_.__visibleSort_13xrb_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_13xrb_gg_._use_secondary_13xrb_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_13xrb_gg_._borders_both_13xrb_gg_,.___SColumn_13xrb_gg_._borders_left_13xrb_gg_,.___SGroup_13xrb_gg_._borders_both_13xrb_gg_,.___SGroup_13xrb_gg_._borders_left_13xrb_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_13xrb_gg_._borders_both_13xrb_gg_,.___SColumn_13xrb_gg_._borders_right_13xrb_gg_,.___SGroup_13xrb_gg_._borders_both_13xrb_gg_,.___SGroup_13xrb_gg_._borders_right_13xrb_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortButton_13xrb_gg_,.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before,.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before{display:flex;opacity:1}.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortButton_13xrb_gg_{display:flex;opacity:1}.___SColumn_13xrb_gg_.__gridArea_13xrb_gg_,.___SGroupTitle_13xrb_gg_.__gridArea_13xrb_gg_,.___SGroup_13xrb_gg_.__gridArea_13xrb_gg_{grid-area:var(--gridArea_13xrb)}.___SHead_13xrb_gg_ .___SColumn_13xrb_gg_.__fixed_13xrb_gg_,.___SHead_13xrb_gg_ .___SGroup_13xrb_gg_.__fixed_13xrb_gg_,.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SColumn_13xrb_gg_.__fixed_13xrb_gg_,.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SGroup_13xrb_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_13xrb_gg_.__sortable_13xrb_gg_:hover{cursor:pointer}}.___SSortWrapper_13xrb_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_13xrb_gg_,.___SSortWrapper_13xrb_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_13xrb_gg_:before{content:\"\";top:0;width:20px;height:100%}.___SSortButton_13xrb_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}.___SHead_13xrb_gg_._sideIndents_l_13xrb_gg_ .___SColumn_13xrb_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_13xrb_gg_._sideIndents_l_13xrb_gg_ .___SColumn_13xrb_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}", /*__inner_css_end__*/"13xrb_gg_"),
+var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SGroupContainer_1311w_gg_,.___SHead_1311w_gg_{display:contents}.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SColumn_1311w_gg_{position:sticky;top:0;z-index:2}.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SGroup_1311w_gg_{top:0}.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SGroupContainer_1311w_gg_>.___SColumn_1311w_gg_{position:sticky;z-index:2}.___SHead_1311w_gg_.__compact_1311w_gg_ .___SColumn_1311w_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_1311w_gg_,.___SGroup_1311w_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,min-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,max-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out;overflow:hidden}.___SGroup_1311w_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_1311w_gg_._use_primary_1311w_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_1311w_gg_._use_primary_1311w_gg_:has(~.___SColumn_1311w_gg_.__visibleSort_1311w_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_1311w_gg_._use_secondary_1311w_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_1311w_gg_._borders_both_1311w_gg_,.___SColumn_1311w_gg_._borders_left_1311w_gg_,.___SGroup_1311w_gg_._borders_both_1311w_gg_,.___SGroup_1311w_gg_._borders_left_1311w_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1311w_gg_._borders_both_1311w_gg_,.___SColumn_1311w_gg_._borders_right_1311w_gg_,.___SGroup_1311w_gg_._borders_both_1311w_gg_,.___SGroup_1311w_gg_._borders_right_1311w_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1311w_gg_._use_primary_1311w_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_1311w_gg_._use_primary_1311w_gg_ .___SSortWrapper_1311w_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortButton_1311w_gg_,.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_::before,.___SColumn_1311w_gg_._use_secondary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_::before{display:flex;opacity:1}.___SColumn_1311w_gg_._use_secondary_1311w_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_1311w_gg_._use_secondary_1311w_gg_ .___SSortWrapper_1311w_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_1311w_gg_._use_secondary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1311w_gg_._use_secondary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortButton_1311w_gg_{display:flex;opacity:1}.___SColumn_1311w_gg_.__gridArea_1311w_gg_,.___SGroupTitle_1311w_gg_.__gridArea_1311w_gg_,.___SGroup_1311w_gg_.__gridArea_1311w_gg_{grid-area:var(--gridArea_1311w)}.___SHead_1311w_gg_ .___SColumn_1311w_gg_.__fixed_1311w_gg_,.___SHead_1311w_gg_ .___SGroup_1311w_gg_.__fixed_1311w_gg_,.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SColumn_1311w_gg_.__fixed_1311w_gg_,.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SGroup_1311w_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_1311w_gg_.__sortable_1311w_gg_:hover{cursor:pointer}}.___SSortWrapper_1311w_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_1311w_gg_,.___SSortWrapper_1311w_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_1311w_gg_:before{content:\"\";top:0;width:20px;height:100%}.___SSortButton_1311w_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}.___SHead_1311w_gg_._sideIndents_wide_1311w_gg_ .___SColumn_1311w_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_1311w_gg_._sideIndents_wide_1311w_gg_ .___SColumn_1311w_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_1311w_gg_{cursor:pointer}", /*__inner_css_end__*/"1311w_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SHead": "___SHead_13xrb_gg_",
-  "__SGroupContainer": "___SGroupContainer_13xrb_gg_",
-  "_sticky": "__sticky_13xrb_gg_",
-  "__SColumn": "___SColumn_13xrb_gg_",
-  "__SGroup": "___SGroup_13xrb_gg_",
-  "_compact": "__compact_13xrb_gg_",
-  "_use_secondary": "_use_secondary_13xrb_gg_",
-  "_borders_both": "_borders_both_13xrb_gg_",
-  "_borders_left": "_borders_left_13xrb_gg_",
-  "_borders_right": "_borders_right_13xrb_gg_",
-  "_gridArea": "__gridArea_13xrb_gg_",
-  "__SGroupTitle": "___SGroupTitle_13xrb_gg_",
-  "--gridArea": "--gridArea_13xrb",
-  "_fixed": "__fixed_13xrb_gg_",
-  "_sortable": "__sortable_13xrb_gg_",
-  "__SSortWrapper": "___SSortWrapper_13xrb_gg_",
-  "__SSortButton": "___SSortButton_13xrb_gg_",
-  "_use_primary": "_use_primary_13xrb_gg_",
-  "_visibleSort": "__visibleSort_13xrb_gg_",
-  "_sideIndents_l": "_sideIndents_l_13xrb_gg_"
+  "__SHead": "___SHead_1311w_gg_",
+  "__SGroupContainer": "___SGroupContainer_1311w_gg_",
+  "_sticky": "__sticky_1311w_gg_",
+  "__SColumn": "___SColumn_1311w_gg_",
+  "__SGroup": "___SGroup_1311w_gg_",
+  "_compact": "__compact_1311w_gg_",
+  "_use_secondary": "_use_secondary_1311w_gg_",
+  "_borders_both": "_borders_both_1311w_gg_",
+  "_borders_left": "_borders_left_1311w_gg_",
+  "_borders_right": "_borders_right_1311w_gg_",
+  "_gridArea": "__gridArea_1311w_gg_",
+  "__SGroupTitle": "___SGroupTitle_1311w_gg_",
+  "--gridArea": "--gridArea_1311w",
+  "_fixed": "__fixed_1311w_gg_",
+  "_sortable": "__sortable_1311w_gg_",
+  "__SSortWrapper": "___SSortWrapper_1311w_gg_",
+  "__SSortButton": "___SSortButton_1311w_gg_",
+  "__SHeadCheckboxCol": "___SHeadCheckboxCol_1311w_gg_",
+  "_use_primary": "_use_primary_1311w_gg_",
+  "_visibleSort": "__visibleSort_1311w_gg_",
+  "_sideIndents_wide": "_sideIndents_wide_1311w_gg_"
 });
 var HeadRoot = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(HeadRoot, _Component);
@@ -59,11 +59,16 @@ var HeadRoot = /*#__PURE__*/function (_Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "fixedColumnsMap", new Map());
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSelectAll", function (value) {
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSelectAll", function (value, event) {
+      var _this$asProps$onChang, _this$asProps;
+      (_this$asProps$onChang = (_this$asProps = _this.asProps).onChangeSelectAll) === null || _this$asProps$onChang === void 0 ? void 0 : _this$asProps$onChang.call(_this$asProps, value, event);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClickSelectAll", function (value) {
       return function (event) {
-        var _this$asProps$onChang, _this$asProps;
+        var _this$asProps$onChang2, _this$asProps2;
         event === null || event === void 0 ? void 0 : event.preventDefault();
-        (_this$asProps$onChang = (_this$asProps = _this.asProps).onChangeSelectAll) === null || _this$asProps$onChang === void 0 ? void 0 : _this$asProps$onChang.call(_this$asProps, value, event);
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        (_this$asProps$onChang2 = (_this$asProps2 = _this.asProps).onChangeSelectAll) === null || _this$asProps$onChang2 === void 0 ? void 0 : _this$asProps$onChang2.call(_this$asProps2, value, event);
       };
     });
     return _this;
@@ -77,10 +82,10 @@ var HeadRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "getGroupProps",
     value: function getGroupProps(_, index) {
-      var _this$asProps2 = this.asProps,
-        use = _this$asProps2.use,
-        gridAreaGroupMap = _this$asProps2.gridAreaGroupMap,
-        children = _this$asProps2.children;
+      var _this$asProps3 = this.asProps,
+        use = _this$asProps3.use,
+        gridAreaGroupMap = _this$asProps3.gridAreaGroupMap,
+        children = _this$asProps3.children;
       return {
         use: use,
         gridArea: gridAreaGroupMap.get(index),
@@ -91,22 +96,24 @@ var HeadRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "getColumnProps",
     value: function getColumnProps(_, index) {
-      var _this$asProps3 = this.asProps,
-        use = _this$asProps3.use,
-        columns = _this$asProps3.columns,
-        sort = _this$asProps3.sort,
-        onSortChange = _this$asProps3.onSortChange,
-        tableRef = _this$asProps3.tableRef,
-        gridTemplateColumns = _this$asProps3.gridTemplateColumns,
-        gridTemplateAreas = _this$asProps3.gridTemplateAreas,
-        sticky = _this$asProps3.sticky,
-        top = _this$asProps3.top,
-        selectedRows = _this$asProps3.selectedRows;
+      var _this$asProps4 = this.asProps,
+        use = _this$asProps4.use,
+        columns = _this$asProps4.columns,
+        sort = _this$asProps4.sort,
+        onSortChange = _this$asProps4.onSortChange,
+        tableRef = _this$asProps4.tableRef,
+        gridTemplateColumns = _this$asProps4.gridTemplateColumns,
+        gridTemplateAreas = _this$asProps4.gridTemplateAreas,
+        sticky = _this$asProps4.sticky,
+        top = _this$asProps4.top,
+        selectedRows = _this$asProps4.selectedRows,
+        h = _this$asProps4.h,
+        getFixedStyle = _this$asProps4.getFixedStyle;
       var column = columns[index];
       if (index === 0 && selectedRows && columns[index + 1].fixed) {
         column.fixed = 'left';
       }
-      var _getFixedStyle = (0, _utils.getFixedStyle)(column, columns),
+      var _getFixedStyle = getFixedStyle(column),
         _getFixedStyle2 = (0, _slicedToArray2["default"])(_getFixedStyle, 2),
         name = _getFixedStyle2[0],
         value = _getFixedStyle2[1];
@@ -121,10 +128,6 @@ var HeadRoot = /*#__PURE__*/function (_Component) {
       return {
         use: use,
         'aria-colindex': index + 1,
-        ref: function ref(node) {
-          var _column$ref;
-          return (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : _column$ref.call(column, node);
-        },
         style: style,
         gridArea: column.gridArea,
         fixed: column.fixed,
@@ -137,45 +140,44 @@ var HeadRoot = /*#__PURE__*/function (_Component) {
         columnIndex: index,
         tableRef: tableRef,
         gridTemplateColumns: gridTemplateColumns,
-        gridTemplateAreas: gridTemplateAreas
+        gridTemplateAreas: gridTemplateAreas,
+        h: h
       };
     }
   }, {
     key: "render",
     value: function render() {
       var _ref = this.asProps,
-        _ref2,
-        _this2 = this;
+        _ref2;
       var SHead = _baseComponents.Box;
-      var _this$asProps4 = this.asProps,
-        Children = _this$asProps4.Children,
-        styles = _this$asProps4.styles,
-        getI18nText = _this$asProps4.getI18nText,
-        children = _this$asProps4.children,
-        treeColumns = _this$asProps4.treeColumns,
-        selectedRows = _this$asProps4.selectedRows,
-        totalRows = _this$asProps4.totalRows;
+      var SHeadCheckboxCol = Head.Column;
+      var _this$asProps5 = this.asProps,
+        Children = _this$asProps5.Children,
+        styles = _this$asProps5.styles,
+        getI18nText = _this$asProps5.getI18nText,
+        children = _this$asProps5.children,
+        treeColumns = _this$asProps5.treeColumns,
+        selectedRows = _this$asProps5.selectedRows,
+        totalRows = _this$asProps5.totalRows;
       var checked = selectedRows && selectedRows.length === totalRows && totalRows > 0;
       var indeterminate = selectedRows && selectedRows.length > 0 && !checked;
       return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SHead, _ref2.cn("SHead", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
         "role": 'row',
         "aria-rowindex": 1
-      }, _ref))), selectedRows && /*#__PURE__*/React.createElement(Head.Column, {
-        name: _DataTable.SELECT_ALL.toString(),
-        onClick: this.handleSelectAll(!checked)
-      }, /*#__PURE__*/React.createElement(_checkbox["default"], _ref2.cn("Checkbox", {
+      }, _ref))), selectedRows && /*#__PURE__*/React.createElement(SHeadCheckboxCol, _ref2.cn("SHeadCheckboxCol", {
+        "name": _DataTable.SELECT_ALL.toString(),
+        "onClick": this.handleClickSelectAll(!checked)
+      }), /*#__PURE__*/React.createElement(_checkbox["default"], _ref2.cn("Checkbox", {
         "checked": checked,
         "indeterminate": indeterminate,
         "aria-label": getI18nText('DataTable.Header.selectAllCheckbox:aria-label'),
-        "onChange": function onChange(value, e) {
-          return _this2.handleSelectAll(value)(e);
-        }
+        "onChange": this.handleSelectAll
       }), /*#__PURE__*/React.createElement(_checkbox["default"].Value, null, /*#__PURE__*/React.createElement(_checkbox["default"].Value.Control, null), /*#__PURE__*/React.createElement(_checkbox["default"].Value.CheckMark, {
         mt: 0
       })))), children ? /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})) : /*#__PURE__*/React.createElement(React.Fragment, null, treeColumns.map(function (column, i) {
         if ('columns' in column) {
           var _column$columns;
-          return /*#__PURE__*/React.createElement(_DataTable.DataTable.Head.Group, (0, _extends2["default"])({
+          return /*#__PURE__*/React.createElement(_DataTable.DataTableInternal.Head.Group, (0, _extends2["default"])({
             key: column.name
           }, column, {
             name: (_column$columns = column.columns) === null || _column$columns === void 0 ? void 0 : _column$columns.map(function (c) {
@@ -184,7 +186,7 @@ var HeadRoot = /*#__PURE__*/function (_Component) {
             title: ''
           }));
         }
-        return /*#__PURE__*/React.createElement(_DataTable.DataTable.Head.Column, (0, _extends2["default"])({
+        return /*#__PURE__*/React.createElement(_DataTable.DataTableInternal.Head.Column, (0, _extends2["default"])({
           key: column.name
         }, column));
       }))), /*#__PURE__*/React.createElement(_baseComponents.ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {

package/lib/cjs/components/Head/Head.js.map

@@ -1 +1 @@
-{"version":3,"file":"Head.js","names":["_core","require","React","_interopRequireWildcard","_baseComponents","_Column","_Group","_utils","_DataTable","_checkbox","_interopRequireDefault","style","sstyled","insert","HeadRoot","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","Map","value","event","_this$asProps$onChang","_this$asProps","preventDefault","asProps","onChangeSelectAll","_createClass2","key","sortableColumnDescribeId","uid","getGroupProps","_","index","_this$asProps2","use","gridAreaGroupMap","children","gridArea","get","fixedColumnsMap","withConfig","undefined","getColumnProps","_this$asProps3","columns","sort","onSortChange","tableRef","gridTemplateColumns","gridTemplateAreas","sticky","top","selectedRows","column","fixed","_getFixedStyle","getFixedStyle","_getFixedStyle2","_slicedToArray2","name","set","ref","node","_column$ref","borders","parent","columnIndex","render","_ref","_ref2","_this2","SHead","Box","_this$asProps4","Children","styles","getI18nText","treeColumns","totalRows","checked","indeterminate","createElement","Fragment","cn","_objectSpread2","assignProps","Head","Column","SELECT_ALL","toString","onClick","handleSelectAll","onChange","e","Value","Control","CheckMark","mt","map","i","_column$columns","DataTable","Group","_extends2","c","join","title","ScreenReaderOnly","Component","createComponent","exports"],"sources":["../../../../src/components/Head/Head.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Component, createComponent, Intergalactic, Root, sstyled } from '@semcore/core';\nimport { DataTableHeadProps, HeadPropsInner } from './Head.types';\nimport { Box, ScreenReaderOnly } from '@semcore/base-components';\nimport Tooltip from '@semcore/tooltip';\n\nimport style from './style.shadow.css';\nimport { Column } from './Column';\nimport { Group } from './Group';\nimport { DataTableColumnProps } from './Column.types';\nimport { getFixedStyle } from '../../utils';\nimport { DataTableGroupProps } from './Group.type';\nimport { DataTableData } from '../DataTable/DataTable.types';\nimport { DataTable } from '../DataTable/DataTable';\nimport { SELECT_ALL } from '../DataTable/DataTable';\nimport Checkbox from '@semcore/checkbox';\n\nclass HeadRoot<D extends DataTableData> extends Component<\n  DataTableHeadProps,\n  {},\n  {},\n  [],\n  HeadPropsInner<D>\n> {\n  static displayName = 'Head';\n  static style = style;\n\n  fixedColumnsMap = new Map<string, any>();\n\n  sortableColumnDescribeId() {\n    const { uid } = this.asProps;\n    return `${uid}-column-sortable-describer`;\n  }\n\n  getGroupProps(_: any, index: number) {\n    const { use, gridAreaGroupMap, children } = this.asProps;\n\n    return {\n      use,\n      gridArea: gridAreaGroupMap.get(index),\n      fixedColumnsMap: this.fixedColumnsMap,\n      withConfig: children === undefined,\n    };\n  }\n\n  getColumnProps(_: any, index: number) {\n    const {\n      use,\n      columns,\n      sort,\n      onSortChange,\n      tableRef,\n      gridTemplateColumns,\n      gridTemplateAreas,\n      sticky,\n      top,\n      selectedRows,\n    } = this.asProps;\n    const column = columns[index];\n\n    if (index === 0 && selectedRows && columns[index + 1].fixed) {\n      column.fixed = 'left';\n    }\n\n    const [name, value] = getFixedStyle(column, columns);\n    const style: any = {};\n\n    if (top) {\n      style.top = `${top}px`;\n    }\n\n    if (name !== undefined && value !== undefined) {\n      style[name] = value;\n\n      this.fixedColumnsMap.set(column.name, value);\n    }\n\n    return {\n      use,\n      'aria-colindex': index + 1,\n      ref: (node: HTMLElement | null) => column.ref?.(node),\n      style,\n      gridArea: column.gridArea,\n      fixed: column.fixed,\n      sticky,\n      borders: column.borders,\n      sort,\n      onSortChange,\n      parent: column.parent,\n      sortableColumnDescribeId: this.sortableColumnDescribeId(),\n      columnIndex: index,\n      tableRef,\n      gridTemplateColumns,\n      gridTemplateAreas,\n    };\n  }\n\n  handleSelectAll = (value: boolean) => (event?: React.SyntheticEvent<HTMLElement>) => {\n    event?.preventDefault();\n    this.asProps.onChangeSelectAll?.(value, event);\n  };\n\n  render() {\n    const SHead = Root;\n    const { Children, styles, getI18nText, children, treeColumns, selectedRows, totalRows } =\n      this.asProps;\n\n    const checked = selectedRows && selectedRows.length === totalRows && totalRows > 0;\n    const indeterminate = selectedRows && selectedRows.length > 0 && !checked;\n\n    return sstyled(styles)(\n      <>\n        <SHead render={Box} role='row' aria-rowindex={1}>\n          {selectedRows && (\n            <Head.Column name={SELECT_ALL.toString()} onClick={this.handleSelectAll(!checked)}>\n              <Checkbox\n                checked={checked}\n                indeterminate={indeterminate}\n                aria-label={getI18nText('DataTable.Header.selectAllCheckbox:aria-label')}\n                onChange={(value, e) => this.handleSelectAll(value)(e)}\n              >\n                <Checkbox.Value>\n                  <Checkbox.Value.Control />\n                  <Checkbox.Value.CheckMark mt={0} />\n                </Checkbox.Value>\n              </Checkbox>\n            </Head.Column>\n          )}\n\n          {children ? (\n            <Children />\n          ) : (\n            <>\n              {treeColumns.map((column, i) => {\n                if ('columns' in column) {\n                  return (\n                    <DataTable.Head.Group\n                      key={column.name}\n                      {...column}\n                      name={column.columns?.map((c) => c.name).join('/')}\n                      title={''}\n                    />\n                  );\n                }\n\n                return <DataTable.Head.Column key={column.name} {...column} />;\n              })}\n            </>\n          )}\n        </SHead>\n\n        <ScreenReaderOnly aria-hidden={true} id={this.sortableColumnDescribeId()}>\n          {getI18nText('sortableColumn')}\n        </ScreenReaderOnly>\n      </>,\n    );\n  }\n}\n\nexport const Head = createComponent(HeadRoot, { Column, Group }) as Intergalactic.Component<\n  'div',\n  DataTableHeadProps\n> & {\n  Column: <Tag extends 'div' | typeof Tooltip = 'div'>(\n    props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', DataTableColumnProps, {}, []>,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults;\n  Group: <Tag extends 'div' | typeof Tooltip = 'div'>(\n    props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', DataTableGroupProps, {}, []>,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults;\n};\n"],"mappings":"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"}
+{"version":3,"file":"Head.js","names":["_core","require","React","_interopRequireWildcard","_baseComponents","_Column","_Group","_DataTable","_checkbox","_interopRequireDefault","style","sstyled","insert","HeadRoot","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","Map","value","event","_this$asProps$onChang","_this$asProps","asProps","onChangeSelectAll","_this$asProps$onChang2","_this$asProps2","preventDefault","stopPropagation","_createClass2","key","sortableColumnDescribeId","uid","getGroupProps","_","index","_this$asProps3","use","gridAreaGroupMap","children","gridArea","get","fixedColumnsMap","withConfig","undefined","getColumnProps","_this$asProps4","columns","sort","onSortChange","tableRef","gridTemplateColumns","gridTemplateAreas","sticky","top","selectedRows","h","getFixedStyle","column","fixed","_getFixedStyle","_getFixedStyle2","_slicedToArray2","name","set","borders","parent","columnIndex","render","_ref","_ref2","SHead","Box","SHeadCheckboxCol","Head","Column","_this$asProps5","Children","styles","getI18nText","treeColumns","totalRows","checked","indeterminate","createElement","Fragment","cn","_objectSpread2","assignProps","SELECT_ALL","toString","handleClickSelectAll","handleSelectAll","Value","Control","CheckMark","mt","map","i","_column$columns","DataTableInternal","Group","_extends2","c","join","title","ScreenReaderOnly","Component","createComponent","exports"],"sources":["../../../../src/components/Head/Head.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Component, createComponent, Intergalactic, Root, sstyled } from '@semcore/core';\nimport { DataTableHeadProps, HeadPropsInner } from './Head.types';\nimport { Box, ScreenReaderOnly } from '@semcore/base-components';\nimport type Tooltip from '@semcore/tooltip';\n\nimport style from './style.shadow.css';\nimport { Column } from './Column';\nimport { Group } from './Group';\nimport { DataTableColumnProps } from './Column.types';\nimport { DataTableGroupProps } from './Group.type';\nimport { DataTableData } from '../DataTable/DataTable.types';\nimport { DataTableInternal } from '../DataTable/DataTable';\nimport { SELECT_ALL } from '../DataTable/DataTable';\nimport Checkbox from '@semcore/checkbox';\n\nclass HeadRoot<D extends DataTableData> extends Component<\n  DataTableHeadProps,\n  {},\n  {},\n  [],\n  HeadPropsInner<D>\n> {\n  static displayName = 'Head';\n  static style = style;\n\n  fixedColumnsMap = new Map<string, any>();\n\n  sortableColumnDescribeId() {\n    const { uid } = this.asProps;\n    return `${uid}-column-sortable-describer`;\n  }\n\n  getGroupProps(_: any, index: number) {\n    const { use, gridAreaGroupMap, children } = this.asProps;\n\n    return {\n      use,\n      gridArea: gridAreaGroupMap.get(index),\n      fixedColumnsMap: this.fixedColumnsMap,\n      withConfig: children === undefined,\n    };\n  }\n\n  getColumnProps(_: any, index: number) {\n    const {\n      use,\n      columns,\n      sort,\n      onSortChange,\n      tableRef,\n      gridTemplateColumns,\n      gridTemplateAreas,\n      sticky,\n      top,\n      selectedRows,\n      h,\n      getFixedStyle,\n    } = this.asProps;\n    const column = columns[index];\n\n    if (index === 0 && selectedRows && columns[index + 1].fixed) {\n      column.fixed = 'left';\n    }\n\n    const [name, value] = getFixedStyle(column);\n    const style: any = {};\n\n    if (top) {\n      style.top = `${top}px`;\n    }\n\n    if (name !== undefined && value !== undefined) {\n      style[name] = value;\n\n      this.fixedColumnsMap.set(column.name, value);\n    }\n\n    return {\n      use,\n      'aria-colindex': index + 1,\n      style,\n      gridArea: column.gridArea,\n      fixed: column.fixed,\n      sticky,\n      borders: column.borders,\n      sort,\n      onSortChange,\n      parent: column.parent,\n      sortableColumnDescribeId: this.sortableColumnDescribeId(),\n      columnIndex: index,\n      tableRef,\n      gridTemplateColumns,\n      gridTemplateAreas,\n      h,\n    };\n  }\n\n  handleSelectAll = (value: boolean, event?: React.SyntheticEvent<HTMLElement>) => {\n    this.asProps.onChangeSelectAll?.(value, event);\n  };\n\n  handleClickSelectAll = (value: boolean) => (event?: React.SyntheticEvent<HTMLElement>) => {\n    event?.preventDefault();\n    event?.stopPropagation();\n    this.asProps.onChangeSelectAll?.(value, event);\n  };\n\n  render() {\n    const SHead = Root;\n    const SHeadCheckboxCol = Head.Column;\n    const { Children, styles, getI18nText, children, treeColumns, selectedRows, totalRows } =\n      this.asProps;\n\n    const checked = selectedRows && selectedRows.length === totalRows && totalRows > 0;\n    const indeterminate = selectedRows && selectedRows.length > 0 && !checked;\n\n    return sstyled(styles)(\n      <>\n        <SHead render={Box} role='row' aria-rowindex={1}>\n          {selectedRows && (\n            <SHeadCheckboxCol\n              name={SELECT_ALL.toString()}\n              onClick={this.handleClickSelectAll(!checked)}\n            >\n              <Checkbox\n                checked={checked}\n                indeterminate={indeterminate}\n                aria-label={getI18nText('DataTable.Header.selectAllCheckbox:aria-label')}\n                onChange={this.handleSelectAll}\n              >\n                <Checkbox.Value>\n                  <Checkbox.Value.Control />\n                  <Checkbox.Value.CheckMark mt={0} />\n                </Checkbox.Value>\n              </Checkbox>\n            </SHeadCheckboxCol>\n          )}\n\n          {children ? (\n            <Children />\n          ) : (\n            <>\n              {treeColumns.map((column, i) => {\n                if ('columns' in column) {\n                  return (\n                    <DataTableInternal.Head.Group\n                      key={column.name}\n                      {...column}\n                      name={column.columns?.map((c) => c.name).join('/')}\n                      title={''}\n                    />\n                  );\n                }\n\n                return <DataTableInternal.Head.Column key={column.name} {...column} />;\n              })}\n            </>\n          )}\n        </SHead>\n\n        <ScreenReaderOnly aria-hidden={true} id={this.sortableColumnDescribeId()}>\n          {getI18nText('sortableColumn')}\n        </ScreenReaderOnly>\n      </>,\n    );\n  }\n}\n\nexport const Head = createComponent(HeadRoot, { Column, Group }) as Intergalactic.Component<\n  'div',\n  DataTableHeadProps\n> & {\n  Column: <Tag extends 'div' | typeof Tooltip = 'div'>(\n    props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', DataTableColumnProps, {}, []>,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults;\n  Group: <Tag extends 'div' | typeof Tooltip = 'div'>(\n    props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', DataTableGroupProps, {}, []>,\n  ) => Intergalactic.InternalTypings.ComponentRenderingResults;\n};\n"],"mappings":"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"}

package/lib/cjs/components/Head/Head.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Head.types.js","names":[],"sources":["../../../../src/components/Head/Head.types.ts"],"sourcesContent":["import { DataTableData, DataTableProps, DTUse } from '../DataTable/DataTable.types';\nimport { DTColumn } from './Column.types';\n\nexport type DataTableHeadProps = {\n  /**\n   * Sticky header\n   * @default false\n   */\n  sticky?: boolean;\n\n  /**\n   * offset for sticky header\n   */\n  top?: number;\n\n  /** Enable scroll bar element in header */\n  withScrollBar?: boolean;\n};\n\nexport type HeadPropsInner<D extends DataTableData> = {\n  use: DTUse;\n  tableRef: React.RefObject<HTMLElement>;\n  columns: DTColumn[];\n  treeColumns: DTColumn[];\n  compact: boolean;\n  sort?: DataTableProps<D>['sort'];\n  onSortChange?: DataTableProps<D>['onSortChange'];\n  getI18nText: (key: string) => string;\n  uid: string;\n  ref: React.RefObject<HTMLDivElement>;\n\n  gridAreaGroupMap: Map<number, string>;\n  gridTemplateColumns: string[];\n  gridTemplateAreas: string[];\n  sideIndents?: 'l';\n\n  totalRows: number;\n  selectedRows?: number[];\n  onChangeSelectAll?: (value: boolean, event?: React.SyntheticEvent<HTMLElement>) => void;\n};\n"],"mappings":""}
+{"version":3,"file":"Head.types.js","names":[],"sources":["../../../../src/components/Head/Head.types.ts"],"sourcesContent":["import { DataTableData, DataTableProps, DTUse } from '../DataTable/DataTable.types';\nimport { DTColumn } from './Column.types';\n\nexport type DataTableHeadProps = {\n  /**\n   * Sticky header\n   * @default false\n   */\n  sticky?: boolean;\n\n  /**\n   * offset for sticky header\n   */\n  top?: number;\n\n  /**\n   * Height of header in px\n   */\n  h?: number;\n\n  /** Enable scroll bar element in header */\n  withScrollBar?: boolean;\n};\n\nexport type HeadPropsInner<D extends DataTableData> = {\n  use: DTUse;\n  tableRef: React.RefObject<HTMLElement>;\n  columns: DTColumn[];\n  treeColumns: DTColumn[];\n  compact: boolean;\n  sort?: DataTableProps<D>['sort'];\n  onSortChange?: DataTableProps<D>['onSortChange'];\n  getI18nText: (key: string) => string;\n  uid: string;\n  ref: React.RefObject<HTMLDivElement>;\n\n  gridAreaGroupMap: Map<number, string>;\n  gridTemplateColumns: string[];\n  gridTemplateAreas: string[];\n  sideIndents?: 'wide';\n\n  totalRows: number;\n  selectedRows?: number[];\n  onChangeSelectAll?: (value: boolean, event?: React.SyntheticEvent<HTMLElement>) => void;\n\n  getFixedStyle: (\n    cell: Pick<DTColumn, 'name' | 'fixed'>,\n  ) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];\n};\n"],"mappings":""}

package/lib/cjs/components/Head/style.shadow.css

@@ -166,7 +166,7 @@ SSortButton {
   transition: opacity 0.3s ease;
 }
 
-SHead[sideIndents='l'] {
+SHead[sideIndents='wide'] {
   SColumn:first-child {
     padding-left: var(--intergalactic-spacing-5x, 20px);
   }
@@ -174,3 +174,7 @@ SHead[sideIndents='l'] {
     padding-right: var(--intergalactic-spacing-5x, 20px);
   }
 }
+
+SHeadCheckboxCol {
+  cursor: pointer;
+}

package/lib/cjs/style/scroll-shadows.shadow.css

@@ -22,6 +22,12 @@ SScrollArea {
     &[headerHeight] {
       scroll-padding-top: var(--headerHeight);
     }
+    &[leftScrollPadding] {
+      scroll-padding-left: var(--leftScrollPadding);
+    }
+    &[rightScrollPadding] {
+      scroll-padding-right: var(--rightScrollPadding);
+    }
   }
 
   SShadowVertical {