@semcore/data-table 16.2.0-prerelease.0 → 16.2.0-prerelease.2

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

@@ -34,16 +34,17 @@ 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_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_"),
+var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDataTable_oz5ss_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content}.___SDataTable_oz5ss_gg_.__isDataEmpty_oz5ss_gg_{display:block;align-items:initial;min-width:initial}.___SDataTable_oz5ss_gg_.__gridTemplateColumns_oz5ss_gg_{grid-template-columns:var(--gridTemplateColumns_oz5ss)}.___SDataTable_oz5ss_gg_.__gridTemplateAreas_oz5ss_gg_{grid-template-areas:var(--gridTemplateAreas_oz5ss)}.___SDataTable_oz5ss_gg_.__gridTemplateRows_oz5ss_gg_{grid-template-rows:var(--gridTemplateRows_oz5ss)}", /*__inner_css_end__*/"oz5ss_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__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"
+  "__SDataTable": "___SDataTable_oz5ss_gg_",
+  "_isDataEmpty": "__isDataEmpty_oz5ss_gg_",
+  "_gridTemplateColumns": "__gridTemplateColumns_oz5ss_gg_",
+  "--gridTemplateColumns": "--gridTemplateColumns_oz5ss",
+  "_gridTemplateAreas": "__gridTemplateAreas_oz5ss_gg_",
+  "--gridTemplateAreas": "--gridTemplateAreas_oz5ss",
+  "_gridTemplateRows": "__gridTemplateRows_oz5ss_gg_",
+  "--gridTemplateRows": "--gridTemplateRows_oz5ss"
 });
 /*!__reshadow-styles__:"../../style/scroll-shadows.shadow.css"*/
 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_"),
@@ -88,10 +89,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", {
@@ -345,6 +348,10 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         var _this$spinnerRef$curr;
         (_this$spinnerRef$curr = _this.spinnerRef.current) === null || _this$spinnerRef$curr === void 0 || _this$spinnerRef$curr.focus();
         e.currentTarget.setAttribute('tabIndex', '-1');
+        if (_this.isDataEmpty) {
+          var _this$headerRef$curre;
+          (_this$headerRef$curre = _this.headerRef.current) === null || _this$headerRef$curre === void 0 || _this$headerRef$curre.setAttribute('tabIndex', '-1');
+        }
       } else if ((!e.relatedTarget || !(0, _useFocusLock.isFocusInside)(e.currentTarget, e.relatedTarget)) && _core.lastInteraction.isKeyboard()) {
         var _row;
         if (_this.focusedCell[0] === -1 && _this.focusedCell[1] === -1) {
@@ -378,6 +385,10 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
             cell.focus();
           }
         }
+        if (_this.isDataEmpty) {
+          var _this$headerRef$curre2;
+          (_this$headerRef$curre2 = _this.headerRef.current) === null || _this$headerRef$curre2 === void 0 || _this$headerRef$curre2.setAttribute('tabIndex', '-1');
+        }
         e.currentTarget.setAttribute('tabIndex', '-1');
       }
     });
@@ -387,6 +398,10 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       if (tableElement && (!relatedTarget || !(0, _useFocusLock.isFocusInside)(tableElement, relatedTarget) || !_core.lastInteraction.isKeyboard())) {
         _this.setInert(false);
         tableElement.setAttribute('tabIndex', '0');
+        if (_this.isDataEmpty) {
+          var _this$headerRef$curre3;
+          (_this$headerRef$curre3 = _this.headerRef.current) === null || _this$headerRef$curre3 === void 0 || _this$headerRef$curre3.setAttribute('tabIndex', '0');
+        }
       }
     });
     (0, _defineProperty2["default"])(_this, "handleMouseMove", function () {
@@ -395,6 +410,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 +489,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 +530,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 +558,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 +576,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;
@@ -600,6 +620,11 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       }
       return scrollDirection;
     }
+  }, {
+    key: "isDataEmpty",
+    get: function get() {
+      return this.asProps.data.length === 0;
+    }
   }, {
     key: "getHeadProps",
     value: function getHeadProps() {
@@ -636,9 +661,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);
@@ -652,7 +677,8 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         getFixedStyle: this.getFixedStyle,
         onCellClick: this.handleCellClick,
         shadowVertical: shadowVertical,
-        scrollDirection: this.scrollDirection
+        scrollDirection: this.scrollDirection,
+        isDataEmpty: this.isDataEmpty
       });
     }
   }, {
@@ -684,8 +710,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 +732,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 +824,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
@@ -818,6 +845,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         "tabIndex": 0,
         "onFocus": this.handleFocus,
         "onBlur": this.handleBlur,
+        "isDataEmpty": this.isDataEmpty,
         "aria-rowcount": this.totalRows,
         "aria-colcount": this.columns.length,
         "gridTemplateColumns": gridTemplateColumns.join(' '),
@@ -1032,12 +1060,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 +1082,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 +1164,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
           rowIndex++;
         }
       });
+      this.calculatedRows = rows;
       return rows;
     }
   }, {
@@ -1134,8 +1176,8 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "getHeaderHeight",
     value: function getHeaderHeight() {
-      var _this$headerRef$curre;
-      var header = (_this$headerRef$curre = this.headerRef.current) === null || _this$headerRef$curre === void 0 ? void 0 : _this$headerRef$curre.children;
+      var _this$headerRef$curre4;
+      var header = (_this$headerRef$curre4 = this.headerRef.current) === null || _this$headerRef$curre4 === void 0 ? void 0 : _this$headerRef$curre4.children;
       var height = 0;
       for (var i = 0; i < ((_header$length = header === null || header === void 0 ? void 0 : header.length) !== null && _header$length !== void 0 ? _header$length : 0); i++) {
         var _header$length;