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

package/lib/esm/components/Body/style.shadow.css

@@ -21,6 +21,11 @@ SBody[compact] {
       padding-left: calc(var(--intergalactic-spacing-5x, 20px) + ((var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) * (var(--data-aria-level) - 1)));
     }
   }
+  SCollapseRow[sideIndents='wide'] {
+    SCellWrapper:first-child SCell[data-aria-level] {
+      padding-left: calc(var(--intergalactic-spacing-5x, 20px) + ((var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) * (var(--data-aria-level) - 1)));
+    }
+  }
 
   SCell SAccordionToggle {
     margin-right: var(--intergalactic-spacing-2x, 8px);
@@ -67,59 +72,59 @@ SCollapseRow > SCellWrapper > SCell:not([theme]), SRow[isAccordionRow] > SCellWr
 
 /* we need a media query here because of the postcssHoverMediaFeature plugin. it doesn't handle this type of selectors correctly */
 @media (hover: hover) {
-  SRow:not([accordionType='row'][expanded]):hover:not([isNonInteractive]) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]),
-  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([isNonInteractive]) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]),
-  SRowGroup:has(SCell:hover) > SRow:not([isNonInteractive]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([expanded][withAccordion]) {
+  SRow:not([accordionType='row'][expanded]):hover:not([isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([expanded][withAccordion]):not([aria-hidden]) {
     background-color: var(--intergalactic-table-td-cell-hover, #f0f0f4);
   }
 
   /* MUTED THEME */
-  SRow:hover:not([isNonInteractive]) > SCellWrapper > SCell[theme='muted'],
-  SRow[theme='muted']:hover:not([expanded][isNonInteractive]) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]),
-  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([isNonInteractive]) > SCellWrapper > SCell[theme='muted'],
-  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='muted']:not([isNonInteractive]) > SCellWrapper > SCell:not([theme]),
-  SRowGroup:has(SCell:hover) > SRow:not([isNonInteractive]) > SCellWrapper > SCell[data-grouped-by='rowgroup'][theme='muted'],
-  SRowGroup:has(SCell:hover) > SRow[theme='muted']:not([isNonInteractive]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]) {
-    background-color: var(--intergalactic-table-td-cell-hover, #f0f0f4);
+  SRow:hover:not([isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell[theme='muted']:not([aria-hidden]),
+  SRow[theme='muted']:hover:not([expanded][isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[theme='muted']:not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='muted']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup'][theme='muted']:not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow[theme='muted']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([aria-hidden]) {
+    background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
   }
 
   /* INFO THEME */
-  SRow:hover:not([isNonInteractive]) > SCellWrapper > SCell[theme='info'],
-  SRow[theme='info']:hover:not([expanded][isNonInteractive]) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]),
-  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([isNonInteractive]) > SCellWrapper > SCell[theme='info'],
-  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='info']:not([isNonInteractive]) > SCellWrapper > SCell:not([theme]),
-  SRowGroup:has(SCell:hover) > SRow:not([isNonInteractive]) > SCellWrapper > SCell[data-grouped-by='rowgroup'][theme='info'],
-  SRowGroup:has(SCell:hover) > SRow[theme='info']:not([isNonInteractive]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]) {
+  SRow:hover:not([isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell[theme='info']:not([aria-hidden]),
+  SRow[theme='info']:hover:not([expanded][isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[theme='info']:not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='info']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup'][theme='info']:not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow[theme='info']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([aria-hidden]) {
     background-color: var(--intergalactic-table-td-cell-selected-hover, #c4e5fe);
   }
 
   /* SUCCESS THEME */
-  SRow:hover:not([isNonInteractive]) > SCellWrapper > SCell[theme='success'],
-  SRow[theme='success']:hover:not([expanded][isNonInteractive]) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]),
-  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([isNonInteractive]) > SCellWrapper > SCell[theme='success'],
-  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='success']:not([isNonInteractive]) > SCellWrapper > SCell:not([theme]),
-  SRowGroup:has(SCell:hover) > SRow:not([isNonInteractive]) > SCellWrapper > SCell[data-grouped-by='rowgroup'][theme='success'],
-  SRowGroup:has(SCell:hover) > SRow[theme='success']:not([isNonInteractive]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([expanded][withAccordion]) {
+  SRow:hover:not([isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell[theme='success']:not([aria-hidden]),
+  SRow[theme='success']:hover:not([expanded][isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[theme='success']:not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='success']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup'][theme='success']:not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow[theme='success']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([expanded][withAccordion]):not([aria-hidden]) {
     background-color: var(--intergalactic-table-td-cell-new-hover, #9ef2c9);
   }
 
   /* WARNING THEME */
-  SRow:hover:not([isNonInteractive]) > SCellWrapper > SCell[theme='warning'],
-  SRow[theme='warning']:hover:not([expanded][isNonInteractive]) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]),
-  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([isNonInteractive]) > SCellWrapper > SCell[theme='warning'],
-  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='warning']:not([isNonInteractive]) > SCellWrapper > SCell:not([theme]),
-  SRowGroup:has(SCell:hover) > SRow:not([isNonInteractive]) > SCellWrapper > SCell[data-grouped-by='rowgroup'][theme='warning'],
-  SRowGroup:has(SCell:hover) > SRow[theme='warning']:not([isNonInteractive]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]) {
+  SRow:hover:not([isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell[theme='warning']:not([aria-hidden]),
+  SRow[theme='warning']:hover:not([expanded][isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[theme='warning']:not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='warning']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup'][theme='warning']:not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow[theme='warning']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([aria-hidden]) {
     background-color: var(--intergalactic-table-td-cell-warning-hover, #ffdca2);
   }
 
   /* DANGER THEME */
-  SRow:hover:not([isNonInteractive]) > SCellWrapper > SCell[theme='danger'],
-  SRow[theme='danger']:hover:not([expanded][isNonInteractive]) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]),
-  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([isNonInteractive]) > SCellWrapper > SCell[theme='danger'],
-  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='danger']:not([isNonInteractive]) > SCellWrapper > SCell:not([theme]),
-  SRowGroup:has(SCell:hover) > SRow:not([isNonInteractive]) > SCellWrapper > SCell[data-grouped-by='rowgroup'][theme='danger'],
-  SRowGroup:has(SCell:hover) > SRow[theme='danger']:not([isNonInteractive]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]) {
+  SRow:hover:not([isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell[theme='danger']:not([aria-hidden]),
+  SRow[theme='danger']:hover:not([expanded][isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[theme='danger']:not([aria-hidden]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='danger']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup'][theme='danger']:not([aria-hidden]),
+  SRowGroup:has(SCell:hover) > SRow[theme='danger']:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([theme]):not([aria-hidden]) {
     background-color: var(--intergalactic-table-td-cell-critical-hover, #ffd7df);
   }
 }
@@ -127,7 +132,12 @@ SCollapseRow > SCellWrapper > SCell:not([theme]), SRow[isAccordionRow] > SCellWr
 /* MUTED THEME */
 
 SRow[theme='muted'] SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-unread, #f4f5f9);
+  &:not([expanded][withAccordion]) {
+    background-color: var(--intergalactic-table-td-cell-unread, #f4f5f9);
+  }
+  &[expanded][withAccordion] {
+    background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
+  }
 }
 
 SRow[theme='muted'][active] > SCellWrapper > SCell:not([theme]) {
@@ -137,7 +147,12 @@ SRow[theme='muted'][active] > SCellWrapper > SCell:not([theme]) {
 /* INFO THEME */
 
 SRow[theme='info'] SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
+  &:not([expanded][withAccordion]) {
+    background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
+  }
+  &[expanded][withAccordion] {
+    background-color: var(--intergalactic-table-td-cell-selected-active, #c4e5fe);
+  }
 }
 
 SRow[theme='info'][active] > SCellWrapper > SCell:not([theme]) {
@@ -147,7 +162,12 @@ SRow[theme='info'][active] > SCellWrapper > SCell:not([theme]) {
 /* SUCCESS THEME */
 
 SRow[theme='success'] SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-new, #dbfee8);
+  &:not([expanded][withAccordion]) {
+    background-color: var(--intergalactic-table-td-cell-new, #dbfee8);
+  }
+  &[expanded][withAccordion] {
+    background-color: var(--intergalactic-table-td-cell-new-active, #9ef2c9);
+  }
 }
 
 SRow[theme='success'][active] > SCellWrapper > SCell:not([theme]) {
@@ -157,7 +177,12 @@ SRow[theme='success'][active] > SCellWrapper > SCell:not([theme]) {
 /* WARNING THEME */
 
 SRow[theme='warning'] SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-warning, #fff3d9);
+  &:not([expanded][withAccordion]) {
+    background-color: var(--intergalactic-table-td-cell-warning, #fff3d9);
+  }
+  &[expanded][withAccordion] {
+    background-color: var(--intergalactic-table-td-cell-warning-active, #ffdca2);
+  }
 }
 
 SRow[theme='warning'][active] > SCellWrapper > SCell:not([theme]) {
@@ -167,7 +192,12 @@ SRow[theme='warning'][active] > SCellWrapper > SCell:not([theme]) {
 /* DANGER THEME */
 
 SRow[theme='danger'] SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-critical, #fff0f7);
+  &:not([expanded][withAccordion]) {
+    background-color: var(--intergalactic-table-td-cell-critical, #fff0f7);
+  }
+  &[expanded][withAccordion] {
+    background-color: var(--intergalactic-table-td-cell-critical-active, #ffd7df);
+  }
 }
 
 SRow[theme='danger'][active] > SCellWrapper > SCell:not([theme]) {
@@ -209,10 +239,15 @@ SCell {
   }
 }
 
-SRow[accordionType='row'] > SCellWrapper > SCell, SCell[withAccordion], SCheckboxCell {
+SRow[accordionType='row'] > SCellWrapper > SCell, SCell[withAccordion], SCell[name='Symbol(SELECT_ALL)'] {
   cursor: pointer;
 }
 
+SCheckboxCell[aria-hidden] {
+  filter: blur(3px);
+  pointer-events: none;
+}
+
 SCell[use='primary'] {
   padding: var(--intergalactic-spacing-3x, 12px);
   min-height: 45px;
@@ -290,13 +325,12 @@ SEmptyData {
   grid-column: 1 / -1;
 }
 
-SRow[sideIndents='wide'] {
+SRow[sideIndents='wide'], SCollapseRow[sideIndents='wide'] {
   SCellWrapper:first-child SCell {
     padding-left: var(--intergalactic-spacing-5x, 20px);
 
     &[data-aria-level] {
       padding-left: calc(var(--intergalactic-spacing-5x, 20px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) * (var(--data-aria-level) - 1)));
-
     }
   }
 
@@ -355,3 +389,21 @@ SCellWrapper[fixed='right'][shadowVertical='end'] {
   }
 }
 
+SLimitOverlayCellWrapper[gridArea] {
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  z-index: 16;
+  grid-area: var(--gridArea);
+  backdrop-filter: blur(6px);
+}
+
+SLimitOverlayCellWrapper[left] {
+  position: sticky;
+  left: var(---left);
+}
+
+SCell[innerOutline]:focus-visible {
+  transition: none;
+}

package/lib/esm/components/DataTable/DataTable.mjs

@@ -2,9 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent, sstyled, assignProps, Component, lastInteraction } from "@semcore/core";
@@ -23,27 +21,24 @@ import { localizedMessages } from "../../translations/__intergalactic-dynamic-lo
 import { Body } from "../Body/Body.mjs";
 import { MergedRowsCell, MergedColumnsCell } from "../Body/MergedCells.mjs";
 import { Head } from "../Head/Head.mjs";
-function _callSuper(t, o, e) {
-  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
-}
 /*!__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)}",
+    ".___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__*/
-    "1nqim_gg_"
+    "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"*/
@@ -51,27 +46,27 @@ var scrollStyles = (
   /*__reshadow_css_start__*/
   (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}",
+    ".___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__*/
-    "1t8qe_gg_"
+    "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 = Symbol("accordion");
@@ -207,6 +202,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;
@@ -225,7 +221,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", "");
@@ -252,8 +248,22 @@ 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;
           }
+          if ((limit === null || limit === void 0 ? void 0 : limit.fromRow) !== void 0 && limit.fromColumn === void 0 && newCol === limit.fromRow) {
+            return;
+          }
           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) !== void 0) {
+              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) !== void 0 || (limit === null || limit === void 0 ? void 0 : limit.fromRow) !== void 0)) {
+            if (newCol === limit.fromColumn) {
+              rowI = rowI - 1;
+            } else {
+              return;
+            }
           } else {
             rowI = rowI - 1;
           }
@@ -261,6 +271,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) !== void 0 || (limit === null || limit === void 0 ? void 0 : limit.fromColumn) !== void 0;
+            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;
           }
         }
@@ -365,10 +380,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();
@@ -553,9 +568,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);
@@ -630,7 +646,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "getBodyProps",
     value: function getBodyProps() {
-      var _this$asProps8 = this.asProps, use = _this$asProps8.use, compact = _this$asProps8.compact, loading = _this$asProps8.loading, getI18nText = _this$asProps8.getI18nText, expandedRows = _this$asProps8.expandedRows, virtualScroll = _this$asProps8.virtualScroll, uid = _this$asProps8.uid, rowProps = _this$asProps8.rowProps, renderCell = _this$asProps8.renderCell, headerProps = _this$asProps8.headerProps, renderEmptyData2 = _this$asProps8.renderEmptyData, sideIndents = _this$asProps8.sideIndents, selectedRows = _this$asProps8.selectedRows, accordionDuration = _this$asProps8.accordionDuration, accordionMode = _this$asProps8.accordionMode, rawData = _this$asProps8.data, renderCellOverlay = _this$asProps8.renderCellOverlay, totalRows = _this$asProps8.totalRows, variant = _this$asProps8.variant;
+      var _this$asProps8 = this.asProps, use = _this$asProps8.use, compact = _this$asProps8.compact, loading = _this$asProps8.loading, getI18nText = _this$asProps8.getI18nText, expandedRows = _this$asProps8.expandedRows, virtualScroll = _this$asProps8.virtualScroll, uid = _this$asProps8.uid, rowProps = _this$asProps8.rowProps, renderCell = _this$asProps8.renderCell, headerProps = _this$asProps8.headerProps, renderEmptyData2 = _this$asProps8.renderEmptyData, sideIndents = _this$asProps8.sideIndents, selectedRows = _this$asProps8.selectedRows, accordionDuration = _this$asProps8.accordionDuration, accordionMode = _this$asProps8.accordionMode, rawData = _this$asProps8.data, renderCellOverlay = _this$asProps8.renderCellOverlay, 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;
       var shadowVertical = this.state.shadowVertical;
       return {
@@ -670,8 +686,9 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         rawData,
         shadowVertical,
         renderCellOverlay,
-        totalRows,
-        variant
+        limit,
+        variant,
+        totalRows
       };
     }
   }, {

package/lib/esm/components/DataTable/dataTable.shadow.css

@@ -2,6 +2,7 @@ SDataTable {
   display: grid;
   align-items: start;
   min-width: fit-content;
+  grid-auto-rows: min-content;
 }
 
 SDataTable[isDataEmpty] {