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

package/lib/esm/index.mjs

@@ -1,5 +1,6 @@
 import { MergedColumnsCell, MergedRowsCell } from "./components/Body/MergedCells.mjs";
 import { ACCORDION, DataTable, ROW_GROUP } from "./components/DataTable/DataTable.mjs";
+import { SelectableRows } from "./store/SelectableRows.mjs";
 const wrapDataTable = (wrapper) => wrapper;
 export {
   ACCORDION,
@@ -7,5 +8,6 @@ export {
   MergedColumnsCell,
   MergedRowsCell,
   ROW_GROUP,
+  SelectableRows,
   wrapDataTable
 };

package/lib/esm/store/SelectableRows.mjs

@@ -0,0 +1,123 @@
+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";
+class SelectableRows extends EventEmitter {
+  constructor(initValues = []) {
+    super();
+    _defineProperty(this, "values", void 0);
+    _defineProperty(this, "availableKeys", /* @__PURE__ */ new Set());
+    _defineProperty(this, "lastSelectedRow", null);
+    _defineProperty(this, "isPressedShift", false);
+    this.values = new Set(initValues);
+  }
+  setAvailableKeys(value) {
+    this.availableKeys = new Set(value);
+  }
+  get() {
+    return Array.from(this.values.keys());
+  }
+  isChecked(key) {
+    return this.values.has(key);
+  }
+  replace(value) {
+    this.clearAll();
+    value.forEach((val) => {
+      this.values.add(val);
+      this.emit(SelectableRows.TOGGLE_EVENT, val);
+    });
+  }
+  has(value) {
+    return this.values.has(value);
+  }
+  isAllSelected() {
+    let isAllSelected = true;
+    if (this.availableKeys.size === 0 || this.values.size === 0) {
+      return false;
+    }
+    for (const key of this.availableKeys.values()) {
+      if (!this.values.has(key)) {
+        isAllSelected = false;
+        break;
+      }
+    }
+    return isAllSelected;
+  }
+  isIndeterminate() {
+    let isIndeterminate = false;
+    for (const key of this.availableKeys.values()) {
+      if (this.values.has(key)) {
+        isIndeterminate = true;
+        break;
+      }
+    }
+    return isIndeterminate;
+  }
+  selectAll() {
+    for (const key of this.availableKeys.values()) {
+      this.values.add(key);
+      this.emit(SelectableRows.TOGGLE_EVENT, key);
+    }
+    this.emit(SelectableRows.SELECT_ALL_EVENT);
+  }
+  clearAll() {
+    const keys = Array.from(this.values.values());
+    this.values.clear();
+    for (const key of keys) {
+      this.emit(SelectableRows.TOGGLE_EVENT, key);
+    }
+    this.emit(SelectableRows.SELECT_ALL_EVENT);
+  }
+  clearAllAvailable() {
+    for (const key of this.availableKeys.values()) {
+      this.values.delete(key);
+      this.emit(SelectableRows.TOGGLE_EVENT, key);
+    }
+    this.emit(SelectableRows.SELECT_ALL_EVENT);
+  }
+  toggle(selected, row) {
+    if (this.isPressedShift && this.values.size > 0 && this.lastSelectedRow && (selected ? this.values.has(this.lastSelectedRow) : true)) {
+      let select = false;
+      for (const item of this.availableKeys.values()) {
+        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;
+        }
+      }
+    } else {
+      this.toggleOneRow(selected, row[UNIQ_ROW_KEY]);
+    }
+    this.lastSelectedRow = row[UNIQ_ROW_KEY];
+  }
+  toggleOneRow(isSelected, key) {
+    if (isSelected) {
+      if (this.values.size === 0) {
+        this.emit(SelectableRows.SELECT_ALL_EVENT);
+      }
+      this.values.add(key);
+      if (this.values.size === this.availableKeys.size) {
+        this.emit(SelectableRows.SELECT_ALL_EVENT);
+      }
+    } else {
+      if (this.values.size === this.availableKeys.size) {
+        this.emit(SelectableRows.SELECT_ALL_EVENT);
+      }
+      this.values.delete(key);
+      if (this.values.size === 0) {
+        this.emit(SelectableRows.SELECT_ALL_EVENT);
+      }
+    }
+    this.emit(SelectableRows.TOGGLE_EVENT, key);
+  }
+}
+_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/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,6 +4,7 @@ import type { CellRenderProps } from './components/Body/Body.types';
 import { MergedRowsCell, MergedColumnsCell } from './components/Body/MergedCells';
 import { DataTable, ACCORDION, ROW_GROUP } 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, wrapDataTable, };
+export { MergedRowsCell, MergedColumnsCell, DataTable, ACCORDION, ROW_GROUP, wrapDataTable, SelectableRows, };
 export type { DataTableSort, DataTableData, DataTableProps, DataTableChangeSort, ColumnGroupConfig, ColumnItemConfig, CellRenderProps, };

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

@@ -0,0 +1,56 @@
+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<Events<UniqKeyType>>['subscribe'];
+}
+type Events<UniqRowKeyType> = {
+    [SelectableRows.TOGGLE_EVENT]: (val: UniqRowKeyType) => void;
+    [SelectableRows.SELECT_ALL_EVENT]: () => void;
+};
+export declare class SelectableRows<UniqRowKeyType> extends EventEmitter<Events<UniqRowKeyType>> implements ISelectedRows<UniqRowKeyType> {
+    private readonly values;
+    private availableKeys;
+    private lastSelectedRow;
+    static TOGGLE_EVENT: "toggle_selected_row";
+    static SELECT_ALL_EVENT: "select_all_selected_rows";
+    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;
+}
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/data-table",
   "description": "Semrush DataTable Component",
-  "version": "17.0.0-prerelease.31",
+  "version": "17.0.0-prerelease.36",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,28 +14,28 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/button": "^17.0.0-prerelease.31",
-    "@semcore/checkbox": "^17.0.0-prerelease.31",
-    "@semcore/spin": "^17.0.0-prerelease.31",
-    "@semcore/tooltip": "^17.0.0-prerelease.31",
-    "@semcore/widget-empty": "^17.0.0-prerelease.31"
+    "@semcore/button": "^17.0.0-prerelease.36",
+    "@semcore/checkbox": "^17.0.0-prerelease.36",
+    "@semcore/spin": "^17.0.0-prerelease.36",
+    "@semcore/tooltip": "^17.0.0-prerelease.36",
+    "@semcore/widget-empty": "^17.0.0-prerelease.36"
   },
   "devDependencies": {
     "@types/node": "18.16.15",
     "csstype": "3.1.3",
+    "@semcore/base-trigger": "17.0.0-prerelease.36",
+    "@semcore/typography": "17.0.0-prerelease.36",
+    "@semcore/dropdown-menu": "17.0.0-prerelease.36",
+    "@semcore/divider": "17.0.0-prerelease.36",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/base-trigger": "17.0.0-prerelease.31",
-    "@semcore/typography": "17.0.0-prerelease.31",
-    "@semcore/dropdown-menu": "17.0.0-prerelease.31",
-    "@semcore/accordion": "17.0.0-prerelease.31",
-    "@semcore/divider": "17.0.0-prerelease.31",
-    "@semcore/progress-bar": "17.0.0-prerelease.31",
-    "@semcore/skeleton": "17.0.0-prerelease.31",
-    "@semcore/spin": "17.0.0-prerelease.31",
-    "@semcore/spin-container": "17.0.0-prerelease.31",
-    "@semcore/tooltip": "17.0.0-prerelease.31",
-    "@semcore/base-components": "17.0.0-prerelease.31",
-    "@semcore/icon": "16.7.2-prerelease.31"
+    "@semcore/skeleton": "17.0.0-prerelease.36",
+    "@semcore/progress-bar": "17.0.0-prerelease.36",
+    "@semcore/accordion": "17.0.0-prerelease.36",
+    "@semcore/spin": "17.0.0-prerelease.36",
+    "@semcore/spin-container": "17.0.0-prerelease.36",
+    "@semcore/tooltip": "17.0.0-prerelease.36",
+    "@semcore/base-components": "17.0.0-prerelease.36",
+    "@semcore/icon": "16.7.2-prerelease.36"
   },
   "peerDependencies": {
     "@semcore/base-components": "^17.0.0 || ^17.0.0-0",