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

package/CHANGELOG.md

@@ -12,11 +12,14 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
 
 - Unnecessary re-render when data was updated but old values were still used.
 - Shadows remain after resizing table width.
+- `onSortChange` is called twice when click is on a sort icon.
+- Hover behaviour for sort icon in case the content is justified to the right.
 
 ### Changed
 
 - Type description for `DataTableProps`/`CellRenderProps`.
 - `AccordionToggle`'s `margin-left`.
+- `DataTable` display to `block` & `DataTable.Header` display to `grid` when `data` is empty.
 
 ## [16.1.0] - 2025-08-08
 

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_"),
@@ -347,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) {
@@ -380,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');
       }
     });
@@ -389,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 () {
@@ -607,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() {
@@ -659,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
       });
     }
   }, {
@@ -826,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(' '),
@@ -1156,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;