@semcore/data-table 16.3.2 → 16.4.0-prerelease.3

package/lib/es6/components/DataTable/DataTable.js

@@ -2,15 +2,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _callSuper from "@babel/runtime/helpers/callSuper";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled as _sstyled2 } from "@semcore/core";
 import { sstyled as _sstyled } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 import { Box, ScreenReaderOnly, ScrollArea } from '@semcore/base-components';
 import { Component, createComponent, lastInteraction, Root, sstyled } from '@semcore/core';
 import canUseDOM from '@semcore/core/lib/utils/canUseDOM';
@@ -24,38 +21,38 @@ import { isFocusInside, hasFocusableIn } from '@semcore/core/lib/utils/use/useFo
 import { NoData } from '@semcore/widget-empty';
 import * as React from 'react';
 /*!__reshadow-styles__:"./dataTable.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SDataTable_1nqim_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content}.___SDataTable_1nqim_gg_.__isDataEmpty_1nqim_gg_{display:block;align-items:initial;min-width:initial}.___SDataTable_1nqim_gg_.__gridTemplateColumns_1nqim_gg_{grid-template-columns:var(--gridTemplateColumns_1nqim)}.___SDataTable_1nqim_gg_.__gridTemplateAreas_1nqim_gg_{grid-template-areas:var(--gridTemplateAreas_1nqim)}.___SDataTable_1nqim_gg_.__gridTemplateRows_1nqim_gg_{grid-template-rows:var(--gridTemplateRows_1nqim)}", /*__inner_css_end__*/"1nqim_gg_"),
+var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SDataTable_z1x46_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content;grid-auto-rows:min-content}.___SDataTable_z1x46_gg_.__isDataEmpty_z1x46_gg_{display:block;align-items:initial;min-width:initial}.___SDataTable_z1x46_gg_.__gridTemplateColumns_z1x46_gg_{grid-template-columns:var(--gridTemplateColumns_z1x46)}.___SDataTable_z1x46_gg_.__gridTemplateAreas_z1x46_gg_{grid-template-areas:var(--gridTemplateAreas_z1x46)}.___SDataTable_z1x46_gg_.__gridTemplateRows_z1x46_gg_{grid-template-rows:var(--gridTemplateRows_z1x46)}", /*__inner_css_end__*/"z1x46_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SDataTable": "___SDataTable_1nqim_gg_",
-  "_isDataEmpty": "__isDataEmpty_1nqim_gg_",
-  "_gridTemplateColumns": "__gridTemplateColumns_1nqim_gg_",
-  "--gridTemplateColumns": "--gridTemplateColumns_1nqim",
-  "_gridTemplateAreas": "__gridTemplateAreas_1nqim_gg_",
-  "--gridTemplateAreas": "--gridTemplateAreas_1nqim",
-  "_gridTemplateRows": "__gridTemplateRows_1nqim_gg_",
-  "--gridTemplateRows": "--gridTemplateRows_1nqim"
+  "__SDataTable": "___SDataTable_z1x46_gg_",
+  "_isDataEmpty": "__isDataEmpty_z1x46_gg_",
+  "_gridTemplateColumns": "__gridTemplateColumns_z1x46_gg_",
+  "--gridTemplateColumns": "--gridTemplateColumns_z1x46",
+  "_gridTemplateAreas": "__gridTemplateAreas_z1x46_gg_",
+  "--gridTemplateAreas": "--gridTemplateAreas_z1x46",
+  "_gridTemplateRows": "__gridTemplateRows_z1x46_gg_",
+  "--gridTemplateRows": "--gridTemplateRows_z1x46"
 });
 /*!__reshadow-styles__:"../../style/scroll-shadows.shadow.css"*/
-var scrollStyles = (/*__reshadow_css_start__*/_sstyled2.insert(/*__inner_css_start__*/".___SScrollArea_1t8qe_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_1t8qe_gg_ .___SContainer_1t8qe_gg_{overflow:visible;overflow:initial}.___SScrollArea_1t8qe_gg_ .___SContainer_1t8qe_gg_._scrollDirection_both_1t8qe_gg_{overflow:auto}.___SScrollArea_1t8qe_gg_ .___SContainer_1t8qe_gg_._scrollDirection_both_1t8qe_gg_.__loading_1t8qe_gg_,.___SScrollArea_1t8qe_gg_ .___SContainer_1t8qe_gg_._scrollDirection_horizontal_1t8qe_gg_.__loading_1t8qe_gg_,.___SScrollArea_1t8qe_gg_ .___SContainer_1t8qe_gg_._scrollDirection_vertical_1t8qe_gg_.__loading_1t8qe_gg_{overflow:hidden}.___SScrollArea_1t8qe_gg_ .___SContainer_1t8qe_gg_._scrollDirection_horizontal_1t8qe_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_1t8qe_gg_ .___SContainer_1t8qe_gg_._scrollDirection_vertical_1t8qe_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_1t8qe_gg_ .___SContainer_1t8qe_gg_.__headerHeight_1t8qe_gg_{scroll-padding-top:var(--headerHeight_1t8qe)}.___SScrollArea_1t8qe_gg_ .___SContainer_1t8qe_gg_.__leftScrollPadding_1t8qe_gg_{scroll-padding-left:var(--leftScrollPadding_1t8qe)}.___SScrollArea_1t8qe_gg_ .___SContainer_1t8qe_gg_.__rightScrollPadding_1t8qe_gg_{scroll-padding-right:var(--rightScrollPadding_1t8qe)}.___SScrollArea_1t8qe_gg_ .___SShadowHorizontal_1t8qe_gg_::before,.___SScrollArea_1t8qe_gg_ .___SShadowHorizontal_1t8qe_gg_:after,.___SScrollArea_1t8qe_gg_ .___SShadowVertical_1t8qe_gg_::after{z-index:20}.___SScrollArea_1t8qe_gg_ .___SShadowHorizontal_1t8qe_gg_.__leftOffset_1t8qe_gg_::before,.___SScrollArea_1t8qe_gg_ .___SShadowHorizontal_1t8qe_gg_.__rightOffset_1t8qe_gg_::after,.___SScrollArea_1t8qe_gg_ .___SShadowVertical_1t8qe_gg_::before{display:none}", /*__inner_css_end__*/"1t8qe_gg_"),
+var scrollStyles = (/*__reshadow_css_start__*/_sstyled2.insert(/*__inner_css_start__*/".___SScrollArea_1dxkn_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_1dxkn_gg_ .___SContainer_1dxkn_gg_{overflow:visible;overflow:initial}.___SScrollArea_1dxkn_gg_ .___SContainer_1dxkn_gg_._scrollDirection_both_1dxkn_gg_{overflow:auto}.___SScrollArea_1dxkn_gg_ .___SContainer_1dxkn_gg_._scrollDirection_both_1dxkn_gg_.__loading_1dxkn_gg_,.___SScrollArea_1dxkn_gg_ .___SContainer_1dxkn_gg_._scrollDirection_horizontal_1dxkn_gg_.__loading_1dxkn_gg_,.___SScrollArea_1dxkn_gg_ .___SContainer_1dxkn_gg_._scrollDirection_vertical_1dxkn_gg_.__loading_1dxkn_gg_{overflow:hidden}.___SScrollArea_1dxkn_gg_ .___SContainer_1dxkn_gg_._scrollDirection_horizontal_1dxkn_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_1dxkn_gg_ .___SContainer_1dxkn_gg_._scrollDirection_vertical_1dxkn_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_1dxkn_gg_ .___SContainer_1dxkn_gg_.__headerHeight_1dxkn_gg_{scroll-padding-top:var(--headerHeight_1dxkn)}.___SScrollArea_1dxkn_gg_ .___SContainer_1dxkn_gg_.__leftScrollPadding_1dxkn_gg_{scroll-padding-left:var(--leftScrollPadding_1dxkn)}.___SScrollArea_1dxkn_gg_ .___SContainer_1dxkn_gg_.__rightScrollPadding_1dxkn_gg_{scroll-padding-right:var(--rightScrollPadding_1dxkn)}.___SScrollArea_1dxkn_gg_ .___SShadowHorizontal_1dxkn_gg_::before,.___SScrollArea_1dxkn_gg_ .___SShadowHorizontal_1dxkn_gg_:after,.___SScrollArea_1dxkn_gg_ .___SShadowVertical_1dxkn_gg_::after{z-index:20}.___SScrollArea_1dxkn_gg_ .___SShadowHorizontal_1dxkn_gg_.__leftOffset_1dxkn_gg_::before,.___SScrollArea_1dxkn_gg_ .___SShadowHorizontal_1dxkn_gg_.__rightOffset_1dxkn_gg_::after,.___SScrollArea_1dxkn_gg_ .___SShadowVertical_1dxkn_gg_::before{display:none}", /*__inner_css_end__*/"1dxkn_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SScrollArea": "___SScrollArea_1t8qe_gg_",
-  "__SContainer": "___SContainer_1t8qe_gg_",
-  "_scrollDirection_both": "_scrollDirection_both_1t8qe_gg_",
-  "_loading": "__loading_1t8qe_gg_",
-  "_scrollDirection_horizontal": "_scrollDirection_horizontal_1t8qe_gg_",
-  "_scrollDirection_vertical": "_scrollDirection_vertical_1t8qe_gg_",
-  "_headerHeight": "__headerHeight_1t8qe_gg_",
-  "--headerHeight": "--headerHeight_1t8qe",
-  "_leftScrollPadding": "__leftScrollPadding_1t8qe_gg_",
-  "--leftScrollPadding": "--leftScrollPadding_1t8qe",
-  "_rightScrollPadding": "__rightScrollPadding_1t8qe_gg_",
-  "--rightScrollPadding": "--rightScrollPadding_1t8qe",
-  "__SShadowVertical": "___SShadowVertical_1t8qe_gg_",
-  "__SShadowHorizontal": "___SShadowHorizontal_1t8qe_gg_",
-  "_leftOffset": "__leftOffset_1t8qe_gg_",
-  "_rightOffset": "__rightOffset_1t8qe_gg_"
+  "__SScrollArea": "___SScrollArea_1dxkn_gg_",
+  "__SContainer": "___SContainer_1dxkn_gg_",
+  "_scrollDirection_both": "_scrollDirection_both_1dxkn_gg_",
+  "_loading": "__loading_1dxkn_gg_",
+  "_scrollDirection_horizontal": "_scrollDirection_horizontal_1dxkn_gg_",
+  "_scrollDirection_vertical": "_scrollDirection_vertical_1dxkn_gg_",
+  "_headerHeight": "__headerHeight_1dxkn_gg_",
+  "--headerHeight": "--headerHeight_1dxkn",
+  "_leftScrollPadding": "__leftScrollPadding_1dxkn_gg_",
+  "--leftScrollPadding": "--leftScrollPadding_1dxkn",
+  "_rightScrollPadding": "__rightScrollPadding_1dxkn_gg_",
+  "--rightScrollPadding": "--rightScrollPadding_1dxkn",
+  "__SShadowVertical": "___SShadowVertical_1dxkn_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_1dxkn_gg_",
+  "_leftOffset": "__leftOffset_1dxkn_gg_",
+  "_rightOffset": "__rightOffset_1dxkn_gg_"
 });
 import { localizedMessages } from '../../translations/__intergalactic-dynamic-locales';
 import { Body } from '../Body/Body';
@@ -199,6 +196,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_this, "changeFocusCell", function (rowIndex, colIndex, direction) {
       var _this$tableRef$curren2, _this$tableRef$curren3;
+      var limit = _this.asProps.limit;
       var hasFocusable = _this.hasFocusableInHeader();
       var maxCol = _this.columns.length - 1;
       var maxRow = _this.totalRows || 1;
@@ -217,7 +215,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       }
       if (!changed) return;
       var row = _this.getRow(newRow);
-      var cell = row === null || row === void 0 ? void 0 : row.querySelector(":scope > div > [role=gridcell][aria-colindex=\"".concat(newCol + 1, "\"], :scope > [role=columnheader][aria-colindex=\"").concat(newCol + 1, "\"], :scope > div > [role=columnheader][aria-colindex=\"").concat(newCol + 1, "\"]"));
+      var cell = row === null || row === void 0 ? void 0 : row.querySelector(":scope > div > [role=gridcell][aria-colindex=\"".concat(newCol + 1, "\"]:not([aria-hidden=\"true\"]), :scope > [role=columnheader][aria-colindex=\"").concat(newCol + 1, "\"]:not([aria-hidden=\"true\"]), :scope > div > [role=columnheader][aria-colindex=\"").concat(newCol + 1, "\"]:not([aria-hidden=\"true\"])"));
       if (cell instanceof HTMLElement && currentCell !== cell) {
         _this.focusedCell = [newRow, newCol];
         currentCell === null || currentCell === void 0 || currentCell.setAttribute('inert', '');
@@ -245,10 +243,24 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
           if (((_currentCell$parentEl = currentCell.parentElement) === null || _currentCell$parentEl === void 0 || (_currentCell$parentEl = _currentCell$parentEl.parentElement) === null || _currentCell$parentEl === void 0 ? void 0 : _currentCell$parentEl.dataset.uiName) === 'Collapse') {
             return;
           }
-
+          // skipping x-axis movement of the focus within limit overlay and there is only limit by rows
+          if ((limit === null || limit === void 0 ? void 0 : limit.fromRow) !== undefined && limit.fromColumn === undefined && newCol === limit.fromRow) {
+            return;
+          }
           // left/right
           if (currentCell.dataset.groupedBy === 'colgroup' || Number((_currentCell$parentEl2 = currentCell.parentElement) === null || _currentCell$parentEl2 === void 0 || (_currentCell$parentEl2 = _currentCell$parentEl2.parentElement) === null || _currentCell$parentEl2 === void 0 ? void 0 : _currentCell$parentEl2.getAttribute('aria-rowindex')) === 2 || currentCell.parentElement && Array.from((_row$children = row === null || row === void 0 ? void 0 : row.children) !== null && _row$children !== void 0 ? _row$children : []).indexOf(currentCell.parentElement) > 0) {
-            colI = direction === 'left' ? colI - 1 : colI + 1;
+            if (direction === 'right' && (limit === null || limit === void 0 ? void 0 : limit.fromColumn) !== undefined) {
+              if (newCol > limit.fromColumn) return;
+              rowI = direction === 'right' ? rowI - 1 : rowI;
+            } else {
+              colI = direction === 'left' ? colI - 1 : colI + 1;
+            }
+          } else if (direction === 'right' && ((limit === null || limit === void 0 ? void 0 : limit.fromColumn) !== undefined || (limit === null || limit === void 0 ? void 0 : limit.fromRow) !== undefined)) {
+            if (newCol === limit.fromColumn) {
+              rowI = rowI - 1;
+            } else {
+              return;
+            }
           } else {
             rowI = rowI - 1;
           }
@@ -257,6 +269,11 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
           if (currentCell.dataset.groupedBy === 'rowgroup' || Number(currentCell.getAttribute('aria-colindex')) === 1) {
             rowI = direction === 'up' ? rowI - 1 : rowI + 1;
           } else {
+            var _limit$fromRow;
+            var areLimitsDefined = (limit === null || limit === void 0 ? void 0 : limit.fromRow) !== undefined || (limit === null || limit === void 0 ? void 0 : limit.fromColumn) !== undefined;
+            if (areLimitsDefined && newRow > ((_limit$fromRow = limit === null || limit === void 0 ? void 0 : limit.fromRow) !== null && _limit$fromRow !== void 0 ? _limit$fromRow : 0) + 1) {
+              return;
+            }
             colI = colI - 1;
           }
         }
@@ -373,10 +390,10 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
             row = firstAvailableRow;
           }
         }
-        var cell = (_row = row) === null || _row === void 0 ? void 0 : _row.querySelectorAll('[role=gridcell], [role=columnheader]').item(_this.focusedCell[1]);
+        var cell = (_row = row) === null || _row === void 0 ? void 0 : _row.querySelectorAll('[role=gridcell]:not([aria-hidden="true"]), [role=columnheader]:not([aria-hidden="true"])').item(_this.focusedCell[1]);
         cell === null || cell === void 0 || cell.removeAttribute('inert');
         if (cell instanceof HTMLElement) {
-          if (hasParent(e.target, cell)) {
+          if (hasParent(e.target, cell) && !e.target.dataset.skipTargetFocus) {
             e.target.focus();
           } else {
             cell.focus();
@@ -568,9 +585,10 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         return totalRows + expandedRowsCount;
       }
       var rows = this.getRows().reduce(function (acc, item) {
-        acc = acc + 1;
         if (Array.isArray(item)) {
           acc = acc + item.length;
+        } else {
+          acc = acc + 1;
         }
         return acc;
       }, 0);
@@ -680,8 +698,9 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         accordionMode = _this$asProps8.accordionMode,
         rawData = _this$asProps8.data,
         renderCellOverlay = _this$asProps8.renderCellOverlay,
-        totalRows = _this$asProps8.totalRows,
-        variant = _this$asProps8.variant;
+        limit = _this$asProps8.limit,
+        variant = _this$asProps8.variant,
+        totalRows = _this$asProps8.totalRows;
       var _this$gridSettings2 = this.gridSettings,
         gridTemplateColumns = _this$gridSettings2.gridTemplateColumns,
         gridTemplateAreas = _this$gridSettings2.gridTemplateAreas;
@@ -723,8 +742,9 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         rawData: rawData,
         shadowVertical: shadowVertical,
         renderCellOverlay: renderCellOverlay,
-        totalRows: totalRows,
-        variant: variant
+        limit: limit,
+        variant: variant,
+        totalRows: totalRows
       };
     }
   }, {