@semcore/data-table 16.5.3 → 16.6.0-prerelease.2

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

@@ -0,0 +1,98 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+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 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";
+var RowSelector = /* @__PURE__ */ (function(_React$PureComponent) {
+  function RowSelector2(props) {
+    var _this;
+    _classCallCheck(this, RowSelector2);
+    _this = _callSuper(this, RowSelector2, [props]);
+    _defineProperty(_this, "state", {
+      checked: false
+    });
+    _defineProperty(_this, "unsubscribeToggle", void 0);
+    _defineProperty(_this, "handleSelectRow", function(value, event) {
+      var _this$props = _this.props, row = _this$props.row, rowIndex = _this$props.rowIndex, onSelectRow = _this$props.onSelectRow, selectedRows = _this$props.selectedRows;
+      onSelectRow === null || onSelectRow === void 0 || onSelectRow(value, rowIndex, row, event);
+      if (selectedRows && !Array.isArray(selectedRows)) {
+        selectedRows.toggle(value, row);
+      }
+    });
+    _defineProperty(_this, "handleClickCheckbox", function(value) {
+      return function(event) {
+        event === null || event === void 0 || event.preventDefault();
+        event === null || event === void 0 || event.stopPropagation();
+        var _this$props2 = _this.props, row = _this$props2.row, rowIndex = _this$props2.rowIndex, onSelectRow = _this$props2.onSelectRow, selectedRows = _this$props2.selectedRows;
+        onSelectRow === null || onSelectRow === void 0 || onSelectRow(value, rowIndex, row, event);
+        if (selectedRows && !Array.isArray(selectedRows)) {
+          selectedRows.toggle(value, row);
+        }
+      };
+    });
+    var _row = props.row, _selectedRows = props.selectedRows;
+    if (_selectedRows && !Array.isArray(_selectedRows)) {
+      _this.state.checked = _selectedRows.has(_row[UNIQ_ROW_KEY]);
+    }
+    return _this;
+  }
+  _inherits(RowSelector2, _React$PureComponent);
+  return _createClass(RowSelector2, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      var _this$props3 = this.props, row = _this$props3.row, selectedRows = _this$props3.selectedRows;
+      if (selectedRows && !Array.isArray(selectedRows)) {
+        this.unsubscribeToggle = selectedRows.subscribe(SelectableRows.TOGGLE_EVENT, function(key) {
+          if (row[UNIQ_ROW_KEY] === key) {
+            _this2.setState({
+              checked: selectedRows.has(row[UNIQ_ROW_KEY])
+            });
+          }
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this$unsubscribeTogg;
+      (_this$unsubscribeTogg = this.unsubscribeToggle) === null || _this$unsubscribeTogg === void 0 || _this$unsubscribeTogg.call(this);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var SCheckboxCell = Row.Cell;
+      var _this$props4 = this.props, row = _this$props4.row, rowIndex = _this$props4.rowIndex, gridRowIndex = _this$props4.gridRowIndex, expanded = _this$props4.expanded, withAccordion = _this$props4.withAccordion, isAccordionRow = _this$props4.isAccordionRow, isCellHidden = _this$props4.isCellHidden, theme = _this$props4.theme, uid = _this$props4.uid, selectedRows = _this$props4.selectedRows;
+      var rowUniqKey = row[UNIQ_ROW_KEY];
+      var 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": "".concat(uid, "_").concat(rowUniqKey, "_1"),
+        onChange: this.handleSelectRow
+      }, /* @__PURE__ */ React__default.createElement(Checkbox.Value, null)));
+    }
+  }]);
+})(React__default.PureComponent);
+export {
+  RowSelector
+};

package/lib/esm/index.mjs

@@ -1,5 +1,6 @@
 import { MergedColumnsCell, MergedRowsCell } from "./components/Body/MergedCells.mjs";
 import { ACCORDION, DataTable, ROW_GROUP, UNIQ_ROW_KEY } from "./components/DataTable/DataTable.mjs";
+import { SelectableRows } from "./store/SelectableRows.mjs";
 var wrapDataTable = function wrapDataTable2(wrapper) {
   return wrapper;
 };
@@ -9,6 +10,7 @@ export {
   MergedColumnsCell,
   MergedRowsCell,
   ROW_GROUP,
+  SelectableRows,
   UNIQ_ROW_KEY,
   wrapDataTable
 };

package/lib/esm/store/SelectableRows.mjs

@@ -0,0 +1,200 @@
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+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 EventEmitter from "@semcore/core/lib/utils/eventEmitter";
+import { UNIQ_ROW_KEY } from "../components/DataTable/DataTable.mjs";
+var SelectableRows = /* @__PURE__ */ (function(_EventEmitter) {
+  function SelectableRows2() {
+    var _this;
+    var initValues = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+    _classCallCheck(this, SelectableRows2);
+    _this = _callSuper(this, SelectableRows2);
+    _defineProperty(_this, "values", void 0);
+    _defineProperty(_this, "availableKeys", /* @__PURE__ */ new Set());
+    _defineProperty(_this, "lastSelectedRow", null);
+    _defineProperty(_this, "isPressedShift", false);
+    _this.values = new Set(initValues);
+    return _this;
+  }
+  _inherits(SelectableRows2, _EventEmitter);
+  return _createClass(SelectableRows2, [{
+    key: "setAvailableKeys",
+    value: function setAvailableKeys(value) {
+      this.availableKeys = new Set(value);
+    }
+  }, {
+    key: "get",
+    value: function get() {
+      return Array.from(this.values.keys());
+    }
+  }, {
+    key: "isChecked",
+    value: function isChecked(key) {
+      return this.values.has(key);
+    }
+  }, {
+    key: "replace",
+    value: function replace(value) {
+      var _this2 = this;
+      this.clearAll();
+      value.forEach(function(val) {
+        _this2.values.add(val);
+        _this2.emit(SelectableRows2.TOGGLE_EVENT, val);
+      });
+    }
+  }, {
+    key: "has",
+    value: function has(value) {
+      return this.values.has(value);
+    }
+  }, {
+    key: "isAllSelected",
+    value: function isAllSelected() {
+      var isAllSelected2 = true;
+      if (this.availableKeys.size === 0 || this.values.size === 0) {
+        return false;
+      }
+      var _iterator = _createForOfIteratorHelper(this.availableKeys.values()), _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done; ) {
+          var _key = _step.value;
+          if (!this.values.has(_key)) {
+            isAllSelected2 = false;
+            break;
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      return isAllSelected2;
+    }
+  }, {
+    key: "isIndeterminate",
+    value: function isIndeterminate() {
+      var isIndeterminate2 = false;
+      var _iterator2 = _createForOfIteratorHelper(this.availableKeys.values()), _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done; ) {
+          var _key2 = _step2.value;
+          if (this.values.has(_key2)) {
+            isIndeterminate2 = true;
+            break;
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      return isIndeterminate2;
+    }
+  }, {
+    key: "selectAll",
+    value: function selectAll() {
+      var _iterator3 = _createForOfIteratorHelper(this.availableKeys.values()), _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done; ) {
+          var _key3 = _step3.value;
+          this.values.add(_key3);
+          this.emit(SelectableRows2.TOGGLE_EVENT, _key3);
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      this.emit(SelectableRows2.SELECT_ALL_EVENT);
+    }
+  }, {
+    key: "clearAll",
+    value: function clearAll() {
+      var keys = Array.from(this.values.values());
+      this.values.clear();
+      for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
+        var _key4 = _keys[_i];
+        this.emit(SelectableRows2.TOGGLE_EVENT, _key4);
+      }
+      this.emit(SelectableRows2.SELECT_ALL_EVENT);
+    }
+  }, {
+    key: "clearAllAvailable",
+    value: function clearAllAvailable() {
+      var _iterator4 = _createForOfIteratorHelper(this.availableKeys.values()), _step4;
+      try {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done; ) {
+          var _key5 = _step4.value;
+          this.values["delete"](_key5);
+          this.emit(SelectableRows2.TOGGLE_EVENT, _key5);
+        }
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
+      this.emit(SelectableRows2.SELECT_ALL_EVENT);
+    }
+  }, {
+    key: "toggle",
+    value: function toggle(selected, row) {
+      if (this.isPressedShift && this.values.size > 0 && this.lastSelectedRow && (selected ? this.values.has(this.lastSelectedRow) : true)) {
+        var select = false;
+        var _iterator5 = _createForOfIteratorHelper(this.availableKeys.values()), _step5;
+        try {
+          for (_iterator5.s(); !(_step5 = _iterator5.n()).done; ) {
+            var item = _step5.value;
+            if (!select && (item === row[UNIQ_ROW_KEY] || item === this.lastSelectedRow)) {
+              select = true;
+              this.toggleOneRow(selected, item);
+              continue;
+            }
+            if (select) {
+              this.toggleOneRow(selected, item);
+            }
+            if (select && (item === row[UNIQ_ROW_KEY] || item === this.lastSelectedRow)) {
+              break;
+            }
+          }
+        } catch (err) {
+          _iterator5.e(err);
+        } finally {
+          _iterator5.f();
+        }
+      } else {
+        this.toggleOneRow(selected, row[UNIQ_ROW_KEY]);
+      }
+      this.lastSelectedRow = row[UNIQ_ROW_KEY];
+    }
+  }, {
+    key: "toggleOneRow",
+    value: function toggleOneRow(isSelected, key) {
+      if (isSelected) {
+        if (this.values.size === 0) {
+          this.emit(SelectableRows2.SELECT_ALL_EVENT);
+        }
+        this.values.add(key);
+        if (this.values.size === this.availableKeys.size) {
+          this.emit(SelectableRows2.SELECT_ALL_EVENT);
+        }
+      } else {
+        if (this.values.size === this.availableKeys.size) {
+          this.emit(SelectableRows2.SELECT_ALL_EVENT);
+        }
+        this.values["delete"](key);
+        if (this.values.size === 0) {
+          this.emit(SelectableRows2.SELECT_ALL_EVENT);
+        }
+      }
+      this.emit(SelectableRows2.TOGGLE_EVENT, key);
+    }
+  }]);
+})(EventEmitter);
+_defineProperty(SelectableRows, "TOGGLE_EVENT", "toggle_selected_row");
+_defineProperty(SelectableRows, "SELECT_ALL_EVENT", "select_all_selected_rows");
+export {
+  SelectableRows
+};

package/lib/types/components/Body/Body.types.d.ts

@@ -2,6 +2,7 @@ import type { Intergalactic } from '@semcore/core';
 import type * as React from 'react';
 import type { DataTableCellProps, Theme } from './Cell.types';
 import type { DTRow, RowPropsInner } from './Row.types';
+import type { ISelectedRows } from '../../store/SelectableRows';
 import type { ACCORDION } from '../DataTable/DataTable';
 import type { DataRowItem, DTUse, VirtualScroll, DataTableProps, DataTableData } from '../DataTable/DataTable.types';
 import type { DTColumn } from '../Head/Column.types';
@@ -67,7 +68,7 @@ export type BodyPropsInner<Data extends DataTableData, UniqKeyType> = DataTableB
     renderCell?: (props: CellRenderProps<Data[number], UniqKeyType>) => React.ReactNode | Record<string, any>;
     onBackFromAccordion: (colName: string) => void;
     stickyHeader?: boolean;
-    selectedRows?: UniqKeyType[];
+    selectedRows?: UniqKeyType[] | ISelectedRows<UniqKeyType>;
     onSelectRow?: (isSelect: boolean, selectedRowIndex: number, row: DTRow<UniqKeyType>, event?: React.SyntheticEvent<HTMLElement>) => void;
     renderEmptyData: () => React.ReactNode;
     sideIndents?: 'wide';

package/lib/types/components/Body/Row.d.ts

@@ -28,8 +28,6 @@ export declare class RowRoot<Data extends DataTableData, UniqKeyType> extends Co
     componentWillUnmount(): void;
     setAccordion(): void;
     cellHasAccordion(cellValue?: DTValue | MergedColumnsCell | MergedRowsCell): cellValue is DTValue;
-    handleSelectRow: (value: boolean, event?: React.SyntheticEvent<HTMLElement>) => void;
-    handleClickCheckbox: (value: boolean) => (event?: React.SyntheticEvent<HTMLElement>) => void;
     handleBackFromAccordion: (e: React.KeyboardEvent) => void;
     handleExpandRow: (row: DTRow<UniqKeyType>, index: number) => void;
     closeAccordion: (row: DTRow<UniqKeyType>, closeDuration: number) => void;

package/lib/types/components/Body/Row.types.d.ts

@@ -4,6 +4,7 @@ import type { CellRenderProps } from './Body.types';
 import type { DataTableCellProps, Theme } from './Cell.types';
 import type { MergedColumnsCell, MergedRowsCell } from './MergedCells';
 import type { RowRoot } from './Row';
+import type { ISelectedRows } from '../../store/SelectableRows';
 import type { ACCORDION, GRID_ROW_INDEX, IS_EMPTY_DATA_ROW, ROW_GROUP, ROW_INDEX, UNIQ_ROW_KEY } from '../DataTable/DataTable';
 import type { DTValue, DTUse, DataTableData, VirtualScroll, DataRowItem, DataTableProps } from '../DataTable/DataTable.types';
 import type { DTColumn } from '../Head/Column.types';
@@ -42,7 +43,7 @@ export type RowPropsInner<Data extends DataTableData, UniqKeyType> = JSX.Intrins
     onExpandRow: (expandedRow: DTRow<UniqKeyType>) => void;
     gridTemplateAreas: string[];
     gridTemplateColumns: string[];
-    selectedRows?: UniqKeyType[];
+    selectedRows?: UniqKeyType[] | ISelectedRows<UniqKeyType>;
     onSelectRow?: (isSelect: boolean, selectedRowIndex: number, row: DTRow<UniqKeyType>, event?: React.SyntheticEvent<HTMLElement>) => void;
     inert?: '';
     accordionDuration: number | [number, number];

package/lib/types/components/Body/RowGroup.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { ISelectedRows } from '../../store/SelectableRows';
+import type { RowRoot } from '../Body/Row';
+import type { DTRow } from '../Body/Row.types';
+import type { DataTableData } from '../DataTable/DataTable.types';
+import type { DTColumn } from '../Head/Column.types';
+type RowGroupProps<Data extends DataTableData, UniqKeyType> = {
+    rows: DTRow<UniqKeyType>[];
+    selectedRows?: UniqKeyType[] | ISelectedRows<UniqKeyType>;
+    columns: DTColumn[];
+    startIndex: number;
+    rowIndex: number;
+    handleRef: (index: number, row: DTRow<UniqKeyType>) => (node: HTMLElement | null) => void;
+    handleComponentRef: (row: DTRow<UniqKeyType>) => (component: RowRoot<Data, UniqKeyType> | null) => void;
+};
+export declare class RowGroup<Data extends DataTableData, UniqKeyType> extends React.PureComponent<RowGroupProps<Data, UniqKeyType>> {
+    render(): React.ReactNode;
+}
+export {};

package/lib/types/components/DataTable/DataTable.types.d.ts

@@ -3,6 +3,7 @@ import type { Intergalactic } from '@semcore/core';
 import type Tooltip from '@semcore/tooltip';
 import type * as React from 'react';
 import type { ACCORDION, ROW_GROUP, UNIQ_ROW_KEY } from './DataTable';
+import type { ISelectedRows } from '../../store/SelectableRows';
 import type { DataTableBodyProps } from '../Body/Body.types';
 import type { DTRow, RowPropsInner } from '../Body/Row.types';
 import type { DataTableColumnProps } from '../Head/Column.types';
@@ -31,7 +32,7 @@ export interface DTValue {
 }
 export type DataTableData = DataRowItem[];
 export type DTUse = 'primary' | 'secondary';
-export type Sizes = Pick<BoxProps, 'w' | 'wMax' | 'wMin' | 'h' | 'hMax' | 'hMin'>;
+export type Sizes = Partial<Pick<BoxProps, 'w' | 'wMax' | 'wMin' | 'h' | 'hMax' | 'hMin'>>;
 export type DataTableProps<Data extends DataTableData, UniqKey extends (Data[number] extends {
     [ROW_GROUP]: DataTableData;
 } ? keyof Data[number][typeof ROW_GROUP][number] : keyof Data[number]), UniqKeyType extends (Data[number] extends {
@@ -88,16 +89,6 @@ export type DataTableProps<Data extends DataTableData, UniqKey extends (Data[num
      * Name of a unique key for each row data item
      */
     uniqueRowKey?: UniqKey;
-    /**
-     * List of selected rows (uniqIds from a data array)
-     */
-    selectedRows?: UniqKeyType[];
-    /** Callback when row selection changes */
-    onSelectedRowsChange?: (selectedRows: UniqKeyType[], event?: React.SyntheticEvent<HTMLElement>, opts?: {
-        selectedRowIndex: number;
-        isSelected: boolean;
-        row: DTRow<UniqKeyType>;
-    }) => void;
     /**
      * For custom empty data widget.
      */
@@ -154,7 +145,25 @@ export type DataTableProps<Data extends DataTableData, UniqKey extends (Data[num
    * Handling table container resizing.
    */
     onResize?: ResizeObserverCallback;
-};
+} & ({
+    /**
+     * List of selected rows (uniqIds from a data array)
+     * @deprecated use ISelectedRows for this property instead of an array.
+     */
+    selectedRows?: UniqKeyType[];
+    /** Callback when row selection changes */
+    onSelectedRowsChange?: (selectedRows: UniqKeyType[], event?: React.SyntheticEvent<HTMLElement>, opts?: {
+        selectedRowIndex: number;
+        isSelected: boolean;
+        row: DTRow<UniqKeyType>;
+    }) => void;
+} | {
+    /**
+     * Entity of selected rows (uniq id from them)
+     * This is mutable! variable because of table performance. Don't change the link on it.
+     */
+    selectedRows?: ISelectedRows<UniqKeyType>;
+});
 export type ColumnItemConfig = Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentProps<'div' | typeof Tooltip, 'div', DataTableColumnProps, {}, [
 ]>, 'children'> & {
     children: React.ReactNode | React.FC;

package/lib/types/components/Head/Column.d.ts

@@ -29,6 +29,7 @@ export declare class Column<Data extends DataTableData, UniqKey extends (Data[nu
     handleMouseEnter: () => void;
     handleMouseLeave: () => void;
     handleBlur: (e: React.FocusEvent<HTMLElement>) => void;
+    handleSort: (e: React.SyntheticEvent<HTMLElement>) => void;
     handleSortClick: (e: React.SyntheticEvent<HTMLElement>) => void;
     handleFocusableCellKeyDown: (e: React.KeyboardEvent) => void;
     handleFocusableCellFocus: (e: React.FocusEvent<HTMLElement, HTMLElement>) => void;

package/lib/types/components/Head/Head.types.d.ts

@@ -1,4 +1,5 @@
 import type { ColumnPropsInner, DTColumn } from './Column.types';
+import type { ISelectedRows } from '../../store/SelectableRows';
 import type { BodyPropsInner } from '../Body/Body.types';
 import type { DataTableCellProps } from '../Body/Cell.types';
 import type { DTRow } from '../Body/Row.types';
@@ -45,7 +46,7 @@ export type HeadPropsInner<Data extends DataTableData, UniqKey extends (Data[num
     gridTemplateAreas: string[];
     sideIndents?: 'wide';
     totalRows: number;
-    selectedRows?: UniqKeyType[];
+    selectedRows?: UniqKeyType[] | ISelectedRows<UniqKeyType>;
     onChangeSelectAll?: (selectedRows: UniqKeyType[], event?: React.SyntheticEvent<HTMLElement>) => void;
     flatRows: DTRow<UniqKeyType>[];
     getFixedStyle: (cell: Pick<DTColumn, 'name' | 'fixed'>) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];

package/lib/types/components/RowSelector/RowsSelector.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { ISelectedRows } from '../../store/SelectableRows';
+import type { Theme } from '../Body/Cell.types';
+import type { DTRow } from '../Body/Row.types';
+type RowSelectorProps<UniqKeyType> = {
+    row: DTRow<UniqKeyType>;
+    rowIndex: number;
+    gridRowIndex: number;
+    expanded: boolean;
+    withAccordion: boolean;
+    uid: string;
+    theme?: Theme;
+    isCellHidden?: boolean;
+    isAccordionRow?: boolean;
+    selectedRows?: UniqKeyType[] | ISelectedRows<UniqKeyType>;
+    onSelectRow?: (isSelect: boolean, selectedRowIndex: number, row: DTRow<UniqKeyType>, event?: React.SyntheticEvent<HTMLElement>) => void;
+};
+type State = {
+    checked: boolean;
+};
+export declare class RowSelector<UniqKeyType> extends React.PureComponent<RowSelectorProps<UniqKeyType>, State> {
+    state: State;
+    private unsubscribeToggle;
+    constructor(props: RowSelectorProps<UniqKeyType>);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleSelectRow: (value: boolean, event?: React.SyntheticEvent<HTMLElement>) => void;
+    handleClickCheckbox: (value: boolean) => (event?: React.SyntheticEvent<HTMLElement>) => void;
+    render(): React.JSX.Element;
+}
+export {};

package/lib/types/index.d.ts

@@ -4,10 +4,11 @@ import type { CellRenderProps } from './components/Body/Body.types';
 import { MergedRowsCell, MergedColumnsCell } from './components/Body/MergedCells';
 import { DataTable, ACCORDION, ROW_GROUP, UNIQ_ROW_KEY } from './components/DataTable/DataTable';
 import type { DataTableSort, DataTableType, DataTableData, DataTableProps, DataTableChangeSort, ColumnGroupConfig, ColumnItemConfig } from './components/DataTable/DataTable.types';
+import { SelectableRows } from './store/SelectableRows';
 declare const wrapDataTable: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.UntypeRefAndTag<Intergalactic.InternalTypings.ComponentPropsNesting<DataTableType>> & PropsExtending) => React.ReactNode) => DataTableType;
 export { MergedRowsCell, MergedColumnsCell, DataTable, ACCORDION, ROW_GROUP, 
 /**
  * @deprecated use property `uniqueRowKey` in DataTableProps to set key of unique value in your data.
  */
-UNIQ_ROW_KEY, wrapDataTable, };
+UNIQ_ROW_KEY, wrapDataTable, SelectableRows, };
 export type { DataTableSort, DataTableData, DataTableProps, DataTableChangeSort, ColumnGroupConfig, ColumnItemConfig, CellRenderProps, };

package/lib/types/store/SelectableRows.d.ts

@@ -0,0 +1,51 @@
+import EventEmitter from '@semcore/core/lib/utils/eventEmitter';
+import type { DTRow } from '../components/Body/Row.types';
+export interface ISelectedRows<UniqKeyType> {
+    /** Flag for multiple rows selection */
+    isPressedShift: boolean;
+    /** Method for set keys from data. Call it in DataTable, on data changes */
+    setAvailableKeys(keys: UniqKeyType[]): void;
+    /** Get the list of keys */
+    get(): UniqKeyType[];
+    /** Check if the row is selected */
+    isChecked(key: UniqKeyType): boolean;
+    /** Replace the list of keys.  */
+    replace(value: UniqKeyType[]): void;
+    /** Check if the key exists in selected rows */
+    has(value: UniqKeyType): boolean;
+    /** Select all handler */
+    selectAll(): void;
+    /** Clear all handler */
+    clearAll(): void;
+    /** Clear all available values (rows on current page) handler */
+    clearAllAvailable(): void;
+    /** Toggle selection of row */
+    toggle(selected: boolean, row: DTRow<UniqKeyType>): void;
+    /** Check if all rows selected */
+    isAllSelected(): boolean;
+    /** Check if at least one row selected */
+    isIndeterminate(): boolean;
+    /** Subscribe to changes */
+    subscribe: EventEmitter['subscribe'];
+}
+export declare class SelectableRows<UniqRowKeyType> extends EventEmitter implements ISelectedRows<UniqRowKeyType> {
+    private readonly values;
+    private availableKeys;
+    private lastSelectedRow;
+    static TOGGLE_EVENT: string;
+    static SELECT_ALL_EVENT: string;
+    isPressedShift: boolean;
+    constructor(initValues?: UniqRowKeyType[]);
+    setAvailableKeys(value: UniqRowKeyType[]): void;
+    get(): UniqRowKeyType[];
+    isChecked(key: UniqRowKeyType): boolean;
+    replace(value: UniqRowKeyType[]): void;
+    has(value: UniqRowKeyType): boolean;
+    isAllSelected(): boolean;
+    isIndeterminate(): boolean;
+    selectAll(): void;
+    clearAll(): void;
+    clearAllAvailable(): void;
+    toggle(selected: boolean, row: DTRow<UniqRowKeyType>): void;
+    private toggleOneRow;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/data-table",
   "description": "Semrush DataTable Component",
-  "version": "16.5.3",
+  "version": "16.6.0-prerelease.2",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,7 +14,7 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/icon": "16.7.3",
+    "@semcore/icon": "16.7.5-prerelease.2",
     "@semcore/button": "16.0.12",
     "@semcore/checkbox": "16.2.1",
     "@semcore/flex-box": "16.0.11",
@@ -27,21 +27,21 @@
     "@types/node": "18.16.15",
     "csstype": "3.1.3",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/dropdown-menu": "16.2.2",
     "@semcore/base-trigger": "16.4.5",
+    "@semcore/dropdown-menu": "16.2.2",
     "@semcore/typography": "16.3.2",
     "@semcore/accordion": "16.7.2",
-    "@semcore/portal": "16.0.11",
     "@semcore/divider": "16.0.11",
-    "@semcore/spin": "16.0.11",
-    "@semcore/tooltip": "16.0.11",
+    "@semcore/portal": "16.0.11",
     "@semcore/progress-bar": "16.0.11",
+    "@semcore/skeleton": "16.0.11",
+    "@semcore/spin": "16.0.11",
     "@semcore/spin-container": "16.0.11",
-    "@semcore/base-components": "16.4.2",
-    "@semcore/skeleton": "16.0.11"
+    "@semcore/tooltip": "16.0.11",
+    "@semcore/base-components": "16.5.0-prerelease.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0"
+    "@semcore/base-components": "^16.5.0-prerelease.2"
   },
   "repository": {
     "type": "git",