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

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

@@ -10,9 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _isNativeReflectConstruct2 = _interopRequireDefault(require("@babel/runtime/helpers/isNativeReflectConstruct"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
@@ -31,40 +29,39 @@ var _intergalacticDynamicLocales = require("../../translations/__intergalactic-d
 var _Body = require("../Body/Body");
 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_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__*/_core.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__*/_core.sstyled.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__*/_core.sstyled.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_"
 });
 var ACCORDION = exports.ACCORDION = Symbol('accordion');
 var ROW_GROUP = exports.ROW_GROUP = Symbol('ROW_GROUP');
@@ -78,7 +75,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
   function DataTableRoot(props) {
     var _this;
     (0, _classCallCheck2["default"])(this, DataTableRoot);
-    _this = _callSuper(this, DataTableRoot, [props]);
+    _this = (0, _callSuper2["default"])(this, DataTableRoot, [props]);
     (0, _defineProperty2["default"])(_this, "columns", []);
     (0, _defineProperty2["default"])(_this, "treeColumns", []);
     (0, _defineProperty2["default"])(_this, "hasGroups", false);
@@ -204,6 +201,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2["default"])(_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;
@@ -222,7 +220,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', '');
@@ -250,10 +248,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;
           }
@@ -262,6 +274,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;
           }
         }
@@ -378,10 +395,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 ((0, _hasParent.hasParent)(e.target, cell)) {
+          if ((0, _hasParent.hasParent)(e.target, cell) && !e.target.dataset.skipTargetFocus) {
             e.target.focus();
           } else {
             cell.focus();
@@ -573,9 +590,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);
@@ -685,8 +703,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;
@@ -728,8 +747,9 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         rawData: rawData,
         shadowVertical: shadowVertical,
         renderCellOverlay: renderCellOverlay,
-        totalRows: totalRows,
-        variant: variant
+        limit: limit,
+        variant: variant,
+        totalRows: totalRows
       };
     }
   }, {