@semcore/data-table 16.1.0 → 16.2.0-prerelease.1

package/lib/cjs/components/DataTable/DataTable.js

@@ -34,37 +34,37 @@ var _MergedCells = require("../Body/MergedCells");
 var _Head = require("../Head/Head");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 /*!__reshadow-styles__:"./dataTable.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDataTable_sw87i_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content}.___SDataTable_sw87i_gg_.__gridTemplateColumns_sw87i_gg_{grid-template-columns:var(--gridTemplateColumns_sw87i)}.___SDataTable_sw87i_gg_.__gridTemplateAreas_sw87i_gg_{grid-template-areas:var(--gridTemplateAreas_sw87i)}.___SDataTable_sw87i_gg_.__gridTemplateRows_sw87i_gg_{grid-template-rows:var(--gridTemplateRows_sw87i)}", /*__inner_css_end__*/"sw87i_gg_"),
+var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDataTable_crlgn_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content}.___SDataTable_crlgn_gg_.__gridTemplateColumns_crlgn_gg_{grid-template-columns:var(--gridTemplateColumns_crlgn)}.___SDataTable_crlgn_gg_.__gridTemplateAreas_crlgn_gg_{grid-template-areas:var(--gridTemplateAreas_crlgn)}.___SDataTable_crlgn_gg_.__gridTemplateRows_crlgn_gg_{grid-template-rows:var(--gridTemplateRows_crlgn)}", /*__inner_css_end__*/"crlgn_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SDataTable": "___SDataTable_sw87i_gg_",
-  "_gridTemplateColumns": "__gridTemplateColumns_sw87i_gg_",
-  "--gridTemplateColumns": "--gridTemplateColumns_sw87i",
-  "_gridTemplateAreas": "__gridTemplateAreas_sw87i_gg_",
-  "--gridTemplateAreas": "--gridTemplateAreas_sw87i",
-  "_gridTemplateRows": "__gridTemplateRows_sw87i_gg_",
-  "--gridTemplateRows": "--gridTemplateRows_sw87i"
+  "__SDataTable": "___SDataTable_crlgn_gg_",
+  "_gridTemplateColumns": "__gridTemplateColumns_crlgn_gg_",
+  "--gridTemplateColumns": "--gridTemplateColumns_crlgn",
+  "_gridTemplateAreas": "__gridTemplateAreas_crlgn_gg_",
+  "--gridTemplateAreas": "--gridTemplateAreas_crlgn",
+  "_gridTemplateRows": "__gridTemplateRows_crlgn_gg_",
+  "--gridTemplateRows": "--gridTemplateRows_crlgn"
 });
 /*!__reshadow-styles__:"../../style/scroll-shadows.shadow.css"*/
-var scrollStyles = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SScrollArea_lhh9n_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_{overflow:visible;overflow:initial}.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_._scrollDirection_both_lhh9n_gg_{overflow:auto}.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_._scrollDirection_both_lhh9n_gg_.__loading_lhh9n_gg_,.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_._scrollDirection_horizontal_lhh9n_gg_.__loading_lhh9n_gg_,.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_._scrollDirection_vertical_lhh9n_gg_.__loading_lhh9n_gg_{overflow:hidden}.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_._scrollDirection_horizontal_lhh9n_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_._scrollDirection_vertical_lhh9n_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_.__headerHeight_lhh9n_gg_{scroll-padding-top:var(--headerHeight_lhh9n)}.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_.__leftScrollPadding_lhh9n_gg_{scroll-padding-left:var(--leftScrollPadding_lhh9n)}.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_.__rightScrollPadding_lhh9n_gg_{scroll-padding-right:var(--rightScrollPadding_lhh9n)}.___SScrollArea_lhh9n_gg_ .___SShadowHorizontal_lhh9n_gg_::before,.___SScrollArea_lhh9n_gg_ .___SShadowHorizontal_lhh9n_gg_:after,.___SScrollArea_lhh9n_gg_ .___SShadowVertical_lhh9n_gg_::after{z-index:20}.___SScrollArea_lhh9n_gg_ .___SShadowHorizontal_lhh9n_gg_.__leftOffset_lhh9n_gg_::before,.___SScrollArea_lhh9n_gg_ .___SShadowHorizontal_lhh9n_gg_.__rightOffset_lhh9n_gg_::after,.___SScrollArea_lhh9n_gg_ .___SShadowVertical_lhh9n_gg_::before{display:none}", /*__inner_css_end__*/"lhh9n_gg_"),
+var scrollStyles = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SScrollArea_1994j_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_1994j_gg_ .___SContainer_1994j_gg_{overflow:visible;overflow:initial}.___SScrollArea_1994j_gg_ .___SContainer_1994j_gg_._scrollDirection_both_1994j_gg_{overflow:auto}.___SScrollArea_1994j_gg_ .___SContainer_1994j_gg_._scrollDirection_both_1994j_gg_.__loading_1994j_gg_,.___SScrollArea_1994j_gg_ .___SContainer_1994j_gg_._scrollDirection_horizontal_1994j_gg_.__loading_1994j_gg_,.___SScrollArea_1994j_gg_ .___SContainer_1994j_gg_._scrollDirection_vertical_1994j_gg_.__loading_1994j_gg_{overflow:hidden}.___SScrollArea_1994j_gg_ .___SContainer_1994j_gg_._scrollDirection_horizontal_1994j_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_1994j_gg_ .___SContainer_1994j_gg_._scrollDirection_vertical_1994j_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_1994j_gg_ .___SContainer_1994j_gg_.__headerHeight_1994j_gg_{scroll-padding-top:var(--headerHeight_1994j)}.___SScrollArea_1994j_gg_ .___SContainer_1994j_gg_.__leftScrollPadding_1994j_gg_{scroll-padding-left:var(--leftScrollPadding_1994j)}.___SScrollArea_1994j_gg_ .___SContainer_1994j_gg_.__rightScrollPadding_1994j_gg_{scroll-padding-right:var(--rightScrollPadding_1994j)}.___SScrollArea_1994j_gg_ .___SShadowHorizontal_1994j_gg_::before,.___SScrollArea_1994j_gg_ .___SShadowHorizontal_1994j_gg_:after,.___SScrollArea_1994j_gg_ .___SShadowVertical_1994j_gg_::after{z-index:20}.___SScrollArea_1994j_gg_ .___SShadowHorizontal_1994j_gg_.__leftOffset_1994j_gg_::before,.___SScrollArea_1994j_gg_ .___SShadowHorizontal_1994j_gg_.__rightOffset_1994j_gg_::after,.___SScrollArea_1994j_gg_ .___SShadowVertical_1994j_gg_::before{display:none}", /*__inner_css_end__*/"1994j_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SScrollArea": "___SScrollArea_lhh9n_gg_",
-  "__SContainer": "___SContainer_lhh9n_gg_",
-  "_scrollDirection_both": "_scrollDirection_both_lhh9n_gg_",
-  "_loading": "__loading_lhh9n_gg_",
-  "_scrollDirection_horizontal": "_scrollDirection_horizontal_lhh9n_gg_",
-  "_scrollDirection_vertical": "_scrollDirection_vertical_lhh9n_gg_",
-  "_headerHeight": "__headerHeight_lhh9n_gg_",
-  "--headerHeight": "--headerHeight_lhh9n",
-  "_leftScrollPadding": "__leftScrollPadding_lhh9n_gg_",
-  "--leftScrollPadding": "--leftScrollPadding_lhh9n",
-  "_rightScrollPadding": "__rightScrollPadding_lhh9n_gg_",
-  "--rightScrollPadding": "--rightScrollPadding_lhh9n",
-  "__SShadowVertical": "___SShadowVertical_lhh9n_gg_",
-  "__SShadowHorizontal": "___SShadowHorizontal_lhh9n_gg_",
-  "_leftOffset": "__leftOffset_lhh9n_gg_",
-  "_rightOffset": "__rightOffset_lhh9n_gg_"
+  "__SScrollArea": "___SScrollArea_1994j_gg_",
+  "__SContainer": "___SContainer_1994j_gg_",
+  "_scrollDirection_both": "_scrollDirection_both_1994j_gg_",
+  "_loading": "__loading_1994j_gg_",
+  "_scrollDirection_horizontal": "_scrollDirection_horizontal_1994j_gg_",
+  "_scrollDirection_vertical": "_scrollDirection_vertical_1994j_gg_",
+  "_headerHeight": "__headerHeight_1994j_gg_",
+  "--headerHeight": "--headerHeight_1994j",
+  "_leftScrollPadding": "__leftScrollPadding_1994j_gg_",
+  "--leftScrollPadding": "--leftScrollPadding_1994j",
+  "_rightScrollPadding": "__rightScrollPadding_1994j_gg_",
+  "--rightScrollPadding": "--rightScrollPadding_1994j",
+  "__SShadowVertical": "___SShadowVertical_1994j_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_1994j_gg_",
+  "_leftOffset": "__leftOffset_1994j_gg_",
+  "_rightOffset": "__rightOffset_1994j_gg_"
 });
 var ACCORDION = exports.ACCORDION = Symbol('accordion');
 var ROW_GROUP = exports.ROW_GROUP = Symbol('ROW_GROUP');
@@ -88,10 +88,12 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2["default"])(_this, "tableRef", /*#__PURE__*/React.createRef());
     (0, _defineProperty2["default"])(_this, "headerRef", /*#__PURE__*/React.createRef());
     (0, _defineProperty2["default"])(_this, "spinnerRef", /*#__PURE__*/React.createRef());
+    (0, _defineProperty2["default"])(_this, "containerResizeEndTimeoutId", null);
     (0, _defineProperty2["default"])(_this, "gridAreaGroupMap", new Map());
     (0, _defineProperty2["default"])(_this, "columnsSplitter", '/');
-    (0, _defineProperty2["default"])(_this, "rows", []);
-    (0, _defineProperty2["default"])(_this, "flatRows", []);
+    (0, _defineProperty2["default"])(_this, "tmpData", void 0);
+    (0, _defineProperty2["default"])(_this, "calculatedRows", void 0);
+    (0, _defineProperty2["default"])(_this, "flatRows", void 0);
     (0, _defineProperty2["default"])(_this, "selectAllMessageTimer", 0);
     (0, _defineProperty2["default"])(_this, "headerNodesMap", new Map());
     (0, _defineProperty2["default"])(_this, "state", {
@@ -395,6 +397,12 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2["default"])(_this, "handleBackFromAccordion", function (cellIndex) {
       _this.changeFocusCell(-1, cellIndex === -1 ? 0 : cellIndex, 'up');
     });
+    (0, _defineProperty2["default"])(_this, "handleContainerResizeEnd", function () {
+      if (_this.containerResizeEndTimeoutId) {
+        clearTimeout(_this.containerResizeEndTimeoutId);
+      }
+      _this.containerResizeEndTimeoutId = setTimeout(_this.calculateVerticalShadow, 0);
+    });
     (0, _defineProperty2["default"])(_this, "getScrollOffsetValue", function () {
       if (!_this.headerRef.current) {
         return [0, 0];
@@ -468,8 +476,9 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       _this.columns = cols[0];
       _this.treeColumns = cols[1];
     }
-    _this.rows = _this.calculateRows();
-    _this.flatRows = _this.rows.flat();
+    _this.calculatedRows = _this.getRows();
+    _this.flatRows = _this.calculatedRows.flat();
+    _this.tmpData = props.data;
     return _this;
   }
   (0, _inherits2["default"])(DataTableRoot, _Component);
@@ -508,11 +517,9 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         var cols = this.calculateColumnsFromConfig();
         this.columns = cols[0];
         this.treeColumns = cols[1];
+        this.forceUpdate();
       }
       if (prevProps.data !== data || prevProps.columns !== columns) {
-        this.rows = this.calculateRows();
-        this.flatRows = this.rows.flat();
-        this.forceUpdate();
         if (this.hasFixedColumn) {
           this.calculateVerticalShadow();
         }
@@ -538,7 +545,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       var _this$asProps5 = this.asProps,
         totalRows = _this$asProps5.totalRows,
         expandedRows = _this$asProps5.expandedRows;
-      var flatRows = this.rows.flat();
+      var flatRows = this.getFlatRows();
       var expandedRowsCount = Array.from(expandedRows !== null && expandedRows !== void 0 ? expandedRows : []).reduce(function (acc, rowKey) {
         var dtRow = flatRows.find(function (el) {
           return el[UNIQ_ROW_KEY] === rowKey;
@@ -556,7 +563,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       if (totalRows !== undefined) {
         return totalRows + expandedRowsCount;
       }
-      var rows = this.rows.reduce(function (acc, item) {
+      var rows = this.getRows().reduce(function (acc, item) {
         acc = acc + 1;
         if (Array.isArray(item)) {
           acc = acc + item.length;
@@ -636,9 +643,9 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         sideIndents: sideIndents,
         totalRows: this.totalRows,
         selectedRows: selectedRows,
-        flatRows: this.flatRows,
+        flatRows: this.getFlatRows(),
         onChangeSelectAll: function onChangeSelectAll(value, e) {
-          var mappedFlatRows = _this3.flatRows.map(function (r) {
+          var mappedFlatRows = _this3.getFlatRows().map(function (r) {
             return r[UNIQ_ROW_KEY];
           });
           var selectedRowsSet = new Set(selectedRows);
@@ -684,8 +691,8 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         accordionDuration: accordionDuration,
         accordionMode: accordionMode,
         columns: this.columns,
-        rows: this.rows,
-        flatRows: this.flatRows,
+        rows: this.getRows(),
+        flatRows: this.getFlatRows(),
         use: use,
         compact: Boolean(compact),
         gridTemplateColumns: gridTemplateColumns,
@@ -706,8 +713,8 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         virtualScroll: virtualScroll,
         hasGroups: this.hasGroups,
         uid: uid,
-        rowProps: this.rows.length > 0 ? rowProps : undefined,
-        renderCell: this.rows.length > 0 ? renderCell : undefined,
+        rowProps: this.getRows().length > 0 ? rowProps : undefined,
+        renderCell: this.getRows().length > 0 ? renderCell : undefined,
         renderEmptyData: renderEmptyData,
         sideIndents: sideIndents,
         selectedRows: selectedRows,
@@ -798,7 +805,8 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         "container": this.tableContainerRef,
         "styles": scrollStyles,
         "onScroll": this.handleScroll,
-        "disableAutofocusToContent": true
+        "disableAutofocusToContent": true,
+        "onResize": this.handleContainerResizeEnd
       }), /*#__PURE__*/React.createElement(_baseComponents.ScrollArea.Container, {
         tabIndex: -1
         // @ts-ignore
@@ -1032,12 +1040,21 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
           groupIndex++;
         }
       });
-      console.log(calculatedColumns, treeColumns);
       return [calculatedColumns, treeColumns];
     }
   }, {
-    key: "calculateRows",
-    value: function calculateRows() {
+    key: "getFlatRows",
+    value: function getFlatRows() {
+      var data = this.props.data;
+      if (this.tmpData === data && this.flatRows) {
+        return this.flatRows;
+      }
+      this.flatRows = this.getRows().flat();
+      return this.flatRows;
+    }
+  }, {
+    key: "getRows",
+    value: function getRows() {
       var _this6 = this;
       var columns = this.columns;
       // @ts-ignore
@@ -1045,6 +1062,10 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         data = _this$props3.data,
         uid = _this$props3.uid,
         uniqueRowKey = _this$props3.uniqueRowKey;
+      if (this.tmpData === data) {
+        return this.calculatedRows;
+      }
+      this.tmpData = data;
       var rows = [];
       var columnNames = columns.map(function (column) {
         return column.name;
@@ -1123,6 +1144,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
           rowIndex++;
         }
       });
+      this.calculatedRows = rows;
       return rows;
     }
   }, {