@semcore/data-table 17.0.0-prerelease.31 → 17.0.0-prerelease.36

package/lib/esm/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%;
@@ -267,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 {
@@ -342,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 {
@@ -426,7 +365,3 @@ SLimitOverlayCellWrapper[left] {
   position: sticky;
   left: var(---left);
 }
-
-SCell[innerOutline]:focus-visible {
-  transition: none;
-}

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

@@ -11,6 +11,7 @@ import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import { hasFocusableIn, isFocusInside } from "@semcore/core/lib/utils/use/useFocusLock";
 import { NoData } from "@semcore/widget-empty";
 import * as React from "react";
+import { SelectableRows } from "../../store/SelectableRows.mjs";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
 import { Body } from "../Body/Body.mjs";
 import { MergedRowsCell, MergedColumnsCell } from "../Body/MergedCells.mjs";
@@ -104,7 +105,7 @@ class DataTableRoot extends Component {
     });
     _defineProperty(this, "selectAllMessageTimer", 0);
     _defineProperty(this, "headerNodesMap", /* @__PURE__ */ new Map());
-    _defineProperty(this, "isPressedShift", false);
+    _defineProperty(this, "selectedRowsContainer", void 0);
     _defineProperty(this, "lastSelectedRowKey", void 0);
     _defineProperty(this, "state", {
       scrollTop: 0,
@@ -151,14 +152,20 @@ class DataTableRoot extends Component {
         this.initFocusableCell([this.hasFocusableInHeader() ? opt.rowIndex + 1 : opt.rowIndex, opt.colIndex]);
       }
     });
+    _defineProperty(this, "handleSelectAllRows", (selectedRows, event) => {
+      if (!("onSelectedRowsChange" in this.asProps) || !this.asProps.onSelectedRowsChange || !Array.isArray(selectedRows)) return;
+      this.asProps.onSelectedRowsChange(selectedRows, event);
+    });
     _defineProperty(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 MergedRowsCell);
@@ -362,13 +369,13 @@ class DataTableRoot extends Component {
           break;
         }
         case "Shift": {
-          this.isPressedShift = true;
+          this.selectedRowsContainer.isPressedShift = true;
         }
       }
     });
     _defineProperty(this, "handleKeyUp", (e) => {
       if (e.key === "Shift") {
-        this.isPressedShift = false;
+        this.selectedRowsContainer.isPressedShift = false;
       }
     });
     _defineProperty(this, "handleScroll", trottle((e) => {
@@ -552,6 +559,11 @@ class DataTableRoot extends 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();
+    } else {
+      this.selectedRowsContainer = props.selectedRows;
+    }
   }
   componentDidMount() {
     const {
@@ -585,7 +597,7 @@ class DataTableRoot extends Component {
         this.calculateVerticalShadow();
       }
     }
-    if (prevProps.selectedRows !== selectedRows && selectedRows !== void 0) {
+    if (prevProps.selectedRows !== selectedRows && selectedRows !== void 0 && Array.isArray(selectedRows)) {
       const selectedRowsSet = new Set(selectedRows);
       const allChecked = [];
       const allUnchecked = [];
@@ -602,6 +614,9 @@ class DataTableRoot extends Component {
         this.setSelectAllMessage(false);
       }
     }
+    if (prevProps.selectedRows !== selectedRows && selectedRows !== void 0 && !Array.isArray(selectedRows)) {
+      this.selectedRowsContainer = selectedRows;
+    }
   }
   componentWillUnmount() {
     var _a;
@@ -672,7 +687,6 @@ class DataTableRoot extends Component {
       getI18nText,
       uid,
       headerProps,
-      onSelectedRowsChange,
       selectedRows,
       sideIndents,
       variant
@@ -704,7 +718,7 @@ class DataTableRoot extends Component {
       totalRows: this.totalRows,
       selectedRows,
       flatRows: this.getFlatRows(),
-      onChangeSelectAll: onSelectedRowsChange,
+      onChangeSelectAll: Array.isArray(selectedRows) ? this.handleSelectAllRows : void 0,
       getFixedStyle: this.getFixedStyle,
       onCellClick: this.handleCellClick,
       shadowVertical,
@@ -774,7 +788,7 @@ class DataTableRoot extends Component {
       renderEmptyData,
       sideIndents,
       selectedRows,
-      onSelectRow: this.handleSelectRow,
+      onSelectRow: Array.isArray(selectedRows) ? this.handleSelectRow : void 0,
       getFixedStyle: this.getFixedStyle,
       onCellClick: this.handleCellClick,
       rawData,
@@ -836,7 +850,7 @@ class DataTableRoot extends Component {
     const width = w ?? (this.columns.some((c) => c.gtcWidth === "auto" || c.gtcWidth === "1fr") ? "100%" : void 0);
     let gridTemplateRows = void 0;
     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 = sstyled(styles), /* @__PURE__ */ React.createElement(ScrollArea, _ref2.cn("ScrollArea", {
       "leftOffset": offsetLeftSum,
@@ -1024,12 +1038,14 @@ class DataTableRoot extends 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;
@@ -1099,6 +1115,9 @@ class DataTableRoot extends Component {
           dtRow[value] = "";
         });
       }
+      if (!excludeColumns) {
+        availableRowKeys.push(dtRow[UNIQ_ROW_KEY]);
+      }
       return dtRow;
     };
     data.forEach((row) => {
@@ -1156,6 +1175,9 @@ class DataTableRoot extends Component {
       }
     });
     this.calculatedRows = rows;
+    if (selectedRows && !Array.isArray(selectedRows)) {
+      selectedRows.setAvailableKeys(availableRowKeys);
+    }
     return rows;
   }
   calculateGridTemplateColumn(c) {

package/lib/esm/components/Head/Head.mjs

@@ -6,6 +6,7 @@ import Checkbox from "@semcore/checkbox";
 import React__default from "react";
 import { Column } from "./Column.mjs";
 import { Group } from "./Group.mjs";
+import { SelectableRows } from "../../store/SelectableRows.mjs";
 import { UNIQ_ROW_KEY, SELECT_ALL, DataTable } from "../DataTable/DataTable.mjs";
 /*!__reshadow-styles__:"./style.shadow.css"*/
 const style = (
@@ -57,22 +58,31 @@ const style = (
 class HeadRoot extends Component {
   constructor(...args) {
     super(...args);
+    _defineProperty(this, "unsubscribeSelectAll", void 0);
     _defineProperty(this, "handleSelectAll", (value, event) => {
       var _a, _b;
       const {
-        selectedRows = []
+        selectedRows
       } = this.asProps;
-      const idsSet = new Set(selectedRows);
-      if (value) {
-        this.selectableRows.forEach((row) => {
-          idsSet.add(row[UNIQ_ROW_KEY]);
-        });
-      } else {
-        this.selectableRows.forEach((row) => {
-          idsSet.delete(row[UNIQ_ROW_KEY]);
-        });
+      if (Array.isArray(selectedRows)) {
+        const idsSet = new Set(selectedRows);
+        if (value) {
+          this.selectableRows.forEach((row) => {
+            idsSet.add(row[UNIQ_ROW_KEY]);
+          });
+        } else {
+          this.selectableRows.forEach((row) => {
+            idsSet.delete(row[UNIQ_ROW_KEY]);
+          });
+        }
+        (_b = (_a = this.asProps).onChangeSelectAll) == null ? void 0 : _b.call(_a, Array.from(idsSet), event);
+      } else if (selectedRows) {
+        if (value) {
+          selectedRows.selectAll();
+        } else {
+          selectedRows.clearAllAvailable();
+        }
       }
-      (_b = (_a = this.asProps).onChangeSelectAll) == null ? void 0 : _b.call(_a, Array.from(idsSet), event);
     });
     _defineProperty(this, "handleClickSelectAll", (value) => (event) => {
       event == null ? void 0 : event.preventDefault();
@@ -80,6 +90,20 @@ class HeadRoot extends Component {
       this.handleSelectAll(value, event);
     });
   }
+  componentDidMount() {
+    const {
+      selectedRows
+    } = this.asProps;
+    if (selectedRows && !Array.isArray(selectedRows)) {
+      this.unsubscribeSelectAll = selectedRows.subscribe(SelectableRows.SELECT_ALL_EVENT, () => {
+        this.forceUpdate();
+      });
+    }
+  }
+  componentWillUnmount() {
+    var _a;
+    (_a = this.unsubscribeSelectAll) == null ? void 0 : _a.call(this);
+  }
   sortableColumnDescribeId() {
     const {
       uid
@@ -189,15 +213,23 @@ class HeadRoot extends Component {
   }
   get areAllRowsSelected() {
     const {
-      selectedRows = []
+      selectedRows
     } = this.asProps;
-    return selectedRows.length > 0 && this.selectableRows.every((row) => selectedRows == null ? void 0 : selectedRows.includes(row[UNIQ_ROW_KEY]));
+    if (Array.isArray(selectedRows)) {
+      return selectedRows.length > 0 && this.selectableRows.every((row) => selectedRows == null ? void 0 : selectedRows.includes(row[UNIQ_ROW_KEY]));
+    } else if (selectedRows) {
+      return selectedRows.isAllSelected();
+    }
   }
   get isIndeterminate() {
     const {
       selectedRows
     } = this.asProps;
-    return this.selectableRows.some((row) => selectedRows == null ? void 0 : selectedRows.includes(row[UNIQ_ROW_KEY]));
+    if (Array.isArray(selectedRows)) {
+      return this.selectableRows.some((row) => selectedRows == null ? void 0 : selectedRows.includes(row[UNIQ_ROW_KEY]));
+    } else if (selectedRows) {
+      return selectedRows.isIndeterminate();
+    }
   }
   get selectableRows() {
     const {

package/lib/esm/components/RowSelector/RowsSelector.mjs

@@ -0,0 +1,107 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import Checkbox from "@semcore/checkbox";
+import React__default from "react";
+import { SelectableRows } from "../../store/SelectableRows.mjs";
+import { Row } from "../Body/Row.mjs";
+import { UNIQ_ROW_KEY, SELECT_ALL } from "../DataTable/DataTable.mjs";
+class RowSelector extends React__default.PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "state", {
+      checked: false
+    });
+    _defineProperty(this, "unsubscribeToggle", void 0);
+    _defineProperty(this, "handleSelectRow", (value, event) => {
+      const {
+        row,
+        rowIndex,
+        onSelectRow,
+        selectedRows
+      } = this.props;
+      onSelectRow == null ? void 0 : onSelectRow(value, rowIndex, row, event);
+      if (selectedRows && !Array.isArray(selectedRows)) {
+        selectedRows.toggle(value, row);
+      }
+    });
+    _defineProperty(this, "handleClickCheckbox", (value) => (event) => {
+      event == null ? void 0 : event.preventDefault();
+      event == null ? void 0 : event.stopPropagation();
+      const {
+        row,
+        rowIndex,
+        onSelectRow,
+        selectedRows
+      } = this.props;
+      onSelectRow == null ? void 0 : onSelectRow(value, rowIndex, row, event);
+      if (selectedRows && !Array.isArray(selectedRows)) {
+        selectedRows.toggle(value, row);
+      }
+    });
+    const {
+      row: _row,
+      selectedRows: _selectedRows
+    } = props;
+    if (_selectedRows && !Array.isArray(_selectedRows)) {
+      this.state.checked = _selectedRows.has(_row[UNIQ_ROW_KEY]);
+    }
+  }
+  componentDidMount() {
+    const {
+      row,
+      selectedRows
+    } = this.props;
+    if (selectedRows && !Array.isArray(selectedRows)) {
+      this.unsubscribeToggle = selectedRows.subscribe(SelectableRows.TOGGLE_EVENT, (key) => {
+        if (row[UNIQ_ROW_KEY] === key) {
+          this.setState({
+            checked: selectedRows.has(row[UNIQ_ROW_KEY])
+          });
+        }
+      });
+    }
+  }
+  componentWillUnmount() {
+    var _a;
+    (_a = this.unsubscribeToggle) == null ? void 0 : _a.call(this);
+  }
+  render() {
+    const SCheckboxCell = Row.Cell;
+    const {
+      row,
+      rowIndex,
+      gridRowIndex,
+      expanded,
+      withAccordion,
+      isAccordionRow,
+      isCellHidden,
+      theme,
+      uid,
+      selectedRows
+    } = this.props;
+    const rowUniqKey = row[UNIQ_ROW_KEY];
+    const checked = Array.isArray(selectedRows) ? selectedRows.includes(rowUniqKey) : this.state.checked;
+    return /* @__PURE__ */ React__default.createElement(SCheckboxCell, {
+      row,
+      rowIndex,
+      column: {
+        name: SELECT_ALL.toString()
+      },
+      columnIndex: 0,
+      gridRowIndex,
+      onClick: this.handleClickCheckbox(!checked),
+      expanded,
+      isAccordionRow,
+      "aria-hidden": isCellHidden,
+      withAccordion,
+      theme,
+      "data-row-selector": true
+    }, /* @__PURE__ */ React__default.createElement(Checkbox, {
+      checked,
+      "aria-labelledby": `${uid}_${rowUniqKey}_1`,
+      onChange: this.handleSelectRow
+    }, /* @__PURE__ */ React__default.createElement(Checkbox.Value, null)));
+  }
+}
+export {
+  RowSelector
+};