@semcore/data-table 17.0.0-prerelease.30 → 17.0.0-prerelease.34

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

@@ -66,46 +66,20 @@ SCollapseRow > SCellWrapper > SCell {
   display: block;
 }
 
-/* DEFAULT THEME */
-
-SRow[active] > SCellWrapper > SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
-}
-
 SRow[accordionType='row'][expanded] > SCellWrapper > SCell:not([theme]),
 SCell:not([theme])[expanded][withAccordion] {
   background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
 }
 
-SCell[theme='muted'][expanded][withAccordion] {
-  background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
-}
-
-SCell[theme='info'][expanded][withAccordion] {
-  background-color: var(--intergalactic-table-td-cell-selected-hover, #c4e5fe);
-}
-
-SCell[theme='success'][expanded][withAccordion] {
-  background-color: var(--intergalactic-table-td-cell-new-hover, #9ef2c9);
-}
-
-SCell[theme='warning'][expanded][withAccordion] {
-  background-color: var(--intergalactic-table-td-cell-warning-hover, #ffdca2);
-}
-
-SCell[theme='danger'][expanded][withAccordion] {
-  background-color: var(--intergalactic-table-td-cell-critical-hover, #ffd7df);
-}
-
 SCollapseRow > SCellWrapper > SCell:not([theme]), SRow[isAccordionRow] > SCellWrapper > SCell:not([theme]) {
   background-color: var(--intergalactic-table-td-cell-accordion, #f4f5f9);
 }
 
 /* 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]):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]) {
+  :not(SRowGroup:has([data-row-selector="true"] input:checked)) > SRow:not([accordionType='row'][expanded]):hover:not([isNonInteractive]):not(:has([data-row-selector="true"] input:checked)):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):not(:has([data-row-selector="true"] input:checked)) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell:not([theme]):not([expanded][withAccordion]):not([aria-hidden]),
+  SRowGroup:has(SCell:hover):not(:has([data-row-selector="true"] input:checked)) > 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);
   }
 
@@ -121,9 +95,13 @@ SCollapseRow > SCellWrapper > SCell:not([theme]), SRow[isAccordionRow] > SCellWr
 
   /* INFO THEME */
   SRow:hover:not([isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell[theme='info']:not([aria-hidden]),
+  SRow:hover:has([data-row-selector="true"] input:checked):not([isNonInteractive]):not([aria-hidden]):not(:has(SLimitOverlayCellWrapper:hover)) > SCellWrapper > SCell: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):has([data-row-selector="true"] input:checked) SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell: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):has([data-row-selector="true"] input:checked) > SRow:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell[data-grouped-by='rowgroup']:not([aria-hidden]),
+  SRowGroup:has([data-row-selector="true"] input:checked) > SRow:hover:not([isNonInteractive]):not([aria-hidden]) > SCellWrapper > SCell: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);
@@ -160,81 +138,15 @@ SCollapseRow > SCellWrapper > SCell:not([theme]), SRow[isAccordionRow] > SCellWr
   }
 }
 
-/* MUTED THEME */
-
-SRow[theme='muted'] SCell:not([theme]) {
-  &: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]) {
-  background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
-}
-
-/* INFO THEME */
+SRowGroup:has([data-row-selector="true"] input:checked) > SRow > SCellWrapper > SCell,
+SRow:has([data-row-selector="true"] input:checked) > SCellWrapper > SCell {
+  background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
 
-SRow[theme='info'] SCell:not([theme]) {
-  &: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]) {
-  background-color: var(--intergalactic-table-td-cell-selected-active, #c4e5fe);
-}
-
-/* SUCCESS THEME */
-
-SRow[theme='success'] SCell:not([theme]) {
-  &: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]) {
-  background-color: var(--intergalactic-table-td-cell-new-active, #9ef2c9);
-}
-
-/* WARNING THEME */
-
-SRow[theme='warning'] SCell:not([theme]) {
-  &: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]) {
-  background-color: var(--intergalactic-table-td-cell-warning-active, #ffdca2);
-}
-
-/* DANGER THEME */
-
-SRow[theme='danger'] SCell:not([theme]) {
-  &: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]) {
-  background-color: var(--intergalactic-table-td-cell-critical-active, #ffd7df);
-}
-
 SCell {
   display: flex;
   height: 100%;
@@ -251,7 +163,6 @@ SCell {
   overflow: hidden;
 
   SAccordionToggle {
-    margin-top: var(--intergalactic-spacing-05x, 2px);
     margin-right: var(--intergalactic-spacing-3x, 12px);
     margin-left: calc(var(--intergalactic-spacing-05x, 2px) * -1);
     height: fit-content;
@@ -268,68 +179,94 @@ SCell {
   &[withoutBorder] {
     border-bottom: none;
   }
-}
 
-SRow[accordionType='row'] > SCellWrapper > SCell, SCell[withAccordion], SCell[name='Symbol(SELECT_ALL)'] {
-  cursor: pointer;
-}
+  &[use='primary'] {
+    padding: var(--intergalactic-spacing-3x, 12px);
+    min-height: 45px;
+    background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
 
-SCheckboxCell[aria-hidden] {
-  filter: blur(3px);
-  pointer-events: none;
-}
+    &[data-aria-level] {
+      padding-left: calc(var(--intergalactic-spacing-3x, 12px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) * (var(--data-aria-level) - 1)));
+    }
+  }
 
-SCell[use='primary'] {
-  padding: var(--intergalactic-spacing-3x, 12px);
-  min-height: 45px;
-  background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
+  &[use='secondary'] {
+    padding: var(--intergalactic-spacing-2x, 8px);
+    min-height: 37px;
+    background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
 
-  &[data-aria-level] {
-    padding-left: calc(var(--intergalactic-spacing-3x, 12px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) * (var(--data-aria-level) - 1)));
+    &[data-aria-level] {
+      padding-left: calc(var(--intergalactic-spacing-2x, 8px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) * (var(--data-aria-level) - 1)));
+    }
   }
-}
 
-SCell[use='secondary'] {
-  padding: var(--intergalactic-spacing-2x, 8px);
-  min-height: 37px;
-  background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
+  &[theme='muted'] {
+    background-color: var(--intergalactic-table-td-cell-unread, #f4f5f9);
 
-  &[data-aria-level] {
-    padding-left: calc(var(--intergalactic-spacing-2x, 8px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-1x, 4px) + var(--intergalactic-spacing-05x, 2px)) * (var(--data-aria-level) - 1)));
+    &[expanded][withAccordion] {
+      background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
+    }
   }
-}
 
-SCell[borders='both'], SCell[borders='left'] {
-  border-left: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
-}
+  &[theme='info'] {
+    background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
 
-SCell[borders='both'], SCell[borders='right'] {
-  border-right: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
-}
+    &[expanded][withAccordion] {
+      background-color: var(--intergalactic-table-td-cell-selected-active, #c4e5fe);
+    }
+  }
 
-SCellWrapper[fixed] {
-  position: sticky;
-  z-index: 2;
-}
+  &[theme='success'] {
+    background-color: var(--intergalactic-table-td-cell-new, #dbfee8);
 
-SCell[theme='muted'] {
-  background-color: var(--intergalactic-table-td-cell-unread, #f4f5f9);
-}
+    &[expanded][withAccordion] {
+      background-color: var(--intergalactic-table-td-cell-new-active, #9ef2c9);
+    }
+  }
 
-SCell[theme='info'] {
-  background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
+  &[theme='warning'] {
+    background-color: var(--intergalactic-table-td-cell-warning, #fff3d9);
+
+    &[expanded][withAccordion] {
+      background-color: var(--intergalactic-table-td-cell-warning-active, #ffdca2);
+    }
+  }
+
+  &[theme='danger'] {
+    background-color: var(--intergalactic-table-td-cell-critical, #fff0f7);
+
+    &[expanded][withAccordion] {
+      background-color: var(--intergalactic-table-td-cell-critical-active, #ffd7df);
+    }
+  }
+
+  &[borders='both'],
+  &[borders='left'] {
+    border-left: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+  }
+
+  &[borders='both'],
+  &[borders='right'] {
+    border-right: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+  }
+
+  &[innerOutline]:focus-visible {
+    transition: none;
+  }
 }
 
-SCell[theme='success'] {
-  background-color: var(--intergalactic-table-td-cell-new, #dbfee8);
+SRow[accordionType='row'] > SCellWrapper > SCell, SCell[withAccordion], SCell[name='Symbol(SELECT_ALL)'] {
+  cursor: pointer;
 }
 
-SCell[theme='warning'] {
-  background-color: var(--intergalactic-table-td-cell-warning, #fff3d9);
+SCheckboxCell[aria-hidden] {
+  filter: blur(3px);
+  pointer-events: none;
 }
 
-SCell[theme='danger'] {
-  background-color: var(--intergalactic-table-td-cell-critical, #fff0f7);
+SCellWrapper[fixed] {
+  position: sticky;
+  z-index: 2;
 }
 
 SSpinContainer {
@@ -343,13 +280,14 @@ SSpinContainer {
   justify-content: center;
   background-color: var(--intergalactic-overlay-limitation-secondary, rgba(255, 255, 255, 0.85));
   z-index: 15;
-}
-SSpinContainer:focus-visible {
-  z-index: 15;
-}
 
-SSpinContainer[headerHeight] {
-  top: var(--headerHeight);
+  &:focus-visible {
+    z-index: 15;
+  }
+
+  &[headerHeight] {
+    top: var(--headerHeight);
+  }
 }
 
 SEmptyData {
@@ -427,7 +365,3 @@ SLimitOverlayCellWrapper[left] {
   position: sticky;
   left: var(---left);
 }
-
-SCell[innerOutline]:focus-visible {
-  transition: none;
-}

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

@@ -19,6 +19,7 @@ var _uniqueID = _interopRequireDefault(require("@semcore/core/lib/utils/uniqueID
 var _useFocusLock = require("@semcore/core/lib/utils/use/useFocusLock");
 var _widgetEmpty = require("@semcore/widget-empty");
 var React = _interopRequireWildcard(require("react"));
+var _SelectableRows = require("../../store/SelectableRows");
 var _intergalacticDynamicLocales = require("../../translations/__intergalactic-dynamic-locales");
 var _Body = require("../Body/Body");
 var _MergedCells = require("../Body/MergedCells");
@@ -98,7 +99,7 @@ class DataTableRoot extends _core.Component {
     });
     (0, _defineProperty2.default)(this, "selectAllMessageTimer", 0);
     (0, _defineProperty2.default)(this, "headerNodesMap", new Map());
-    (0, _defineProperty2.default)(this, "isPressedShift", false);
+    (0, _defineProperty2.default)(this, "selectedRowsContainer", void 0);
     (0, _defineProperty2.default)(this, "lastSelectedRowKey", void 0);
     (0, _defineProperty2.default)(this, "state", {
       scrollTop: 0,
@@ -144,14 +145,20 @@ class DataTableRoot extends _core.Component {
         this.initFocusableCell([this.hasFocusableInHeader() ? opt.rowIndex + 1 : opt.rowIndex, opt.colIndex]);
       }
     });
+    (0, _defineProperty2.default)(this, "handleSelectAllRows", (selectedRows, event) => {
+      if (!('onSelectedRowsChange' in this.asProps) || !this.asProps.onSelectedRowsChange || !Array.isArray(selectedRows)) return;
+      this.asProps.onSelectedRowsChange(selectedRows, event);
+    });
     (0, _defineProperty2.default)(this, "handleSelectRow", (isSelected, selectedRowIndex, row, event) => {
       const {
-        selectedRows,
+        selectedRows
+      } = this.asProps;
+      if (!selectedRows || !('onSelectedRowsChange' in this.asProps) || !this.asProps.onSelectedRowsChange || !Array.isArray(selectedRows)) return;
+      const {
         onSelectedRowsChange
       } = this.asProps;
-      if (!selectedRows || !onSelectedRowsChange) return;
       const selectedRowsSet = new Set(selectedRows);
-      if (this.isPressedShift && selectedRowsSet.size > 0 && this.lastSelectedRowKey && (isSelected ? selectedRowsSet.has(this.lastSelectedRowKey) : true)) {
+      if (this.selectedRowsContainer.isPressedShift && selectedRowsSet.size > 0 && this.lastSelectedRowKey && (isSelected ? selectedRowsSet.has(this.lastSelectedRowKey) : true)) {
         let select = false;
         const firstColumnKey = this.columns[0].name;
         const isMerged = this.flatRows.some(item => item[firstColumnKey] instanceof _MergedCells.MergedRowsCell);
@@ -362,13 +369,13 @@ class DataTableRoot extends _core.Component {
           }
         case 'Shift':
           {
-            this.isPressedShift = true;
+            this.selectedRowsContainer.isPressedShift = true;
           }
       }
     });
     (0, _defineProperty2.default)(this, "handleKeyUp", e => {
       if (e.key === 'Shift') {
-        this.isPressedShift = false;
+        this.selectedRowsContainer.isPressedShift = false;
       }
     });
     (0, _defineProperty2.default)(this, "handleScroll", (0, _rafTrottle.default)(e => {
@@ -549,6 +556,11 @@ class DataTableRoot extends _core.Component {
     this.calculatedRows = this.getRows();
     this.flatRows = this.calculatedRows.flat();
     this.tmpData = props.data;
+    if (Array.isArray(props.selectedRows) || !props.selectedRows) {
+      this.selectedRowsContainer = new _SelectableRows.SelectableRows();
+    } else {
+      this.selectedRowsContainer = props.selectedRows;
+    }
   }
   componentDidMount() {
     const {
@@ -582,7 +594,7 @@ class DataTableRoot extends _core.Component {
         this.calculateVerticalShadow();
       }
     }
-    if (prevProps.selectedRows !== selectedRows && selectedRows !== undefined) {
+    if (prevProps.selectedRows !== selectedRows && selectedRows !== undefined && Array.isArray(selectedRows)) {
       const selectedRowsSet = new Set(selectedRows);
       const allChecked = [];
       const allUnchecked = [];
@@ -599,6 +611,9 @@ class DataTableRoot extends _core.Component {
         this.setSelectAllMessage(false);
       }
     }
+    if (prevProps.selectedRows !== selectedRows && selectedRows !== undefined && !Array.isArray(selectedRows)) {
+      this.selectedRowsContainer = selectedRows;
+    }
   }
   componentWillUnmount() {
     if ((0, _canUseDOM.default)()) {
@@ -668,7 +683,6 @@ class DataTableRoot extends _core.Component {
       getI18nText,
       uid,
       headerProps,
-      onSelectedRowsChange,
       selectedRows,
       sideIndents,
       variant
@@ -700,7 +714,7 @@ class DataTableRoot extends _core.Component {
       totalRows: this.totalRows,
       selectedRows,
       flatRows: this.getFlatRows(),
-      onChangeSelectAll: onSelectedRowsChange,
+      onChangeSelectAll: Array.isArray(selectedRows) ? this.handleSelectAllRows : undefined,
       getFixedStyle: this.getFixedStyle,
       onCellClick: this.handleCellClick,
       shadowVertical,
@@ -770,7 +784,7 @@ class DataTableRoot extends _core.Component {
       renderEmptyData,
       sideIndents,
       selectedRows,
-      onSelectRow: this.handleSelectRow,
+      onSelectRow: Array.isArray(selectedRows) ? this.handleSelectRow : undefined,
       getFixedStyle: this.getFixedStyle,
       onCellClick: this.handleCellClick,
       rawData,
@@ -832,7 +846,7 @@ class DataTableRoot extends _core.Component {
     const width = w ?? (this.columns.some(c => c.gtcWidth === 'auto' || c.gtcWidth === '1fr') ? '100%' : undefined);
     let gridTemplateRows = undefined;
     if (virtualScroll && typeof virtualScroll !== 'boolean' && 'rowHeight' in virtualScroll) {
-      gridTemplateRows = `auto auto repeat(${this.totalRows}, minmax(${virtualScroll.rowHeight}px, auto)`;
+      gridTemplateRows = `auto auto repeat(${this.totalRows}, minmax(${virtualScroll.rowHeight}px, auto))`;
     }
     return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/React.createElement(_baseComponents.ScrollArea, _ref2.cn("ScrollArea", {
       "leftOffset": offsetLeftSum,
@@ -1024,12 +1038,14 @@ class DataTableRoot extends _core.Component {
     const {
       data,
       uid,
-      uniqueRowKey
+      uniqueRowKey,
+      selectedRows
     } = this.props;
     if (this.tmpData === data) {
       return this.calculatedRows;
     }
     this.tmpData = data;
+    const availableRowKeys = [];
     const rows = [];
     const columnNames = columns.map(column => column.name);
     let rowIndex = 0;
@@ -1101,6 +1117,10 @@ class DataTableRoot extends _core.Component {
           dtRow[value] = '';
         });
       }
+      if (!excludeColumns) {
+        // we should add only the main row in mergedRows or default rows
+        availableRowKeys.push(dtRow[UNIQ_ROW_KEY]);
+      }
       return dtRow;
     };
     data.forEach(row => {
@@ -1157,6 +1177,9 @@ class DataTableRoot extends _core.Component {
       }
     });
     this.calculatedRows = rows;
+    if (selectedRows && !Array.isArray(selectedRows)) {
+      selectedRows.setAvailableKeys(availableRowKeys);
+    }
     return rows;
   }
   calculateGridTemplateColumn(c) {