@semcore/data-table 16.2.2-prerelease.1 → 16.3.0-prerelease.4

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

@@ -1,33 +1,33 @@
 import type { Intergalactic } from '@semcore/core';
-import type { DataTableCellProps } from './Cell.types';
+import type * as React from 'react';
+import type { CellRenderProps } from './Body.types';
+import type { CellPropsInner, DataTableCellProps } from './Cell.types';
 import type { MergedColumnsCell, MergedRowsCell } from './MergedCells';
-import type { ACCORDION, IS_EMPTY_DATA_ROW, ROW_GROUP, ROW_INDEX, UNIQ_ROW_KEY } from '../DataTable/DataTable';
-import type { DTValue, DTUse, DataTableData } from '../DataTable/DataTable.types';
+import type { RowRoot } from './Row';
+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';
 export type DTRow<UniqKeyType> = {
     [UNIQ_ROW_KEY]: UniqKeyType;
     [IS_EMPTY_DATA_ROW]?: boolean;
+    [GRID_ROW_INDEX]: number;
     [ROW_INDEX]: number;
     [key: string]: DTValue | MergedRowsCell | MergedColumnsCell;
     [ACCORDION]?: React.ReactNode | DataTableData | undefined;
     [ROW_GROUP]?: Set<UniqKeyType>;
 };
 export type DTRows<UniqKeyType> = Array<DTRow<UniqKeyType> | DTRow<UniqKeyType>[]>;
-export type DataTableRowProps<UniqKeyType> = {
+export type DataTableRowProps<Data extends DataTableData, UniqKeyType> = {
     row: DTRow<UniqKeyType>;
     mergedRow?: boolean;
     isAccordionRow?: DataTableCellProps<UniqKeyType>['isAccordionRow'];
     animationExpand?: DataTableCellProps<UniqKeyType>['animationExpand'];
     accordionRowIndex?: DataTableCellProps<UniqKeyType>['accordionRowIndex'];
     isNonInteractive?: boolean;
+    componentRef?: (component: RowRoot<Data, UniqKeyType> | null) => void;
 };
-export type RowPropsInner<UniqKeyType> = JSX.IntrinsicElements['div'] & {
+export type RowPropsInner<Data extends DataTableData, UniqKeyType> = JSX.IntrinsicElements['div'] & {
     use: DTUse;
-    /**
-     * Expanded flag for rows with accordion
-     * @default false
-     */
-    expanded?: boolean;
     /**
      * Flag to show is row in a merged list or not.
      */
@@ -35,22 +35,34 @@ export type RowPropsInner<UniqKeyType> = JSX.IntrinsicElements['div'] & {
     columns: DTColumn[];
     row: DTRow<UniqKeyType> | DTRow<UniqKeyType>[];
     rows: DTRows<UniqKeyType>;
+    flatRows: DTRow<UniqKeyType>[];
     rowIndex: number;
-    ariaRowIndex: number;
     gridRowIndex: number;
-    expandedRows: Set<UniqKeyType>;
     onExpandRow: (expandedRow: DTRow<UniqKeyType>) => void;
     gridTemplateAreas: string[];
     gridTemplateColumns: string[];
-    accordionDataGridArea: string;
     selectedRows?: UniqKeyType[];
     onSelectRow?: (isSelect: boolean, selectedRowIndex: number, row: DTRow<UniqKeyType>, event?: React.SyntheticEvent<HTMLElement>) => void;
     inert?: '';
     accordionDuration?: number | [number, number];
-    onBackFromAccordion: (colIndex: number) => void;
+    onBackFromAccordion: (colName: string) => void;
     scrollAreaRef: React.RefObject<HTMLDivElement>;
     uid: string;
     sideIndents?: 'wide';
     getFixedStyle: (cell: Pick<DTColumn, 'name' | 'fixed'>) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];
+    renderCell?: (props: CellRenderProps<Data[number], UniqKeyType>) => React.ReactNode | Record<string, any>;
+    getI18nText: (key: string) => string;
+    virtualScroll?: VirtualScroll;
+    tableRef: React.RefObject<HTMLDivElement>;
+    onCellClick: CellPropsInner<Data, UniqKeyType>['onClick'];
+    rawData: DataRowItem[];
+    shadowVertical?: '' | 'end' | 'start' | 'median';
+    expandedRows: Set<UniqKeyType>;
+    accordionMode?: DataTableProps<any, any, any>['accordionMode'];
+    rowsHeightMap: Map<number, [number, number, HTMLElement]>;
+    setRowHeight: (index: number, row: DTRow<UniqKeyType>) => void;
+    componentsMap: Map<UniqKeyType, RowRoot<Data, UniqKeyType>>;
+    calculateAriaRowIndex: () => void;
+    variant?: DataTableProps<any, any, any>['variant'];
 };
-export type DataTableRowType = (<UniqKeyType, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', DataTableRowProps<UniqKeyType>>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', DataTableRowProps<any>>;
+export type DataTableRowType = (<Data extends DataTableData, UniqKeyType, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', DataTableRowProps<Data, UniqKeyType>>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', DataTableRowProps<any, any>>;

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

@@ -7,8 +7,8 @@ export declare const UNIQ_ROW_KEY: unique symbol;
 export declare const IS_EMPTY_DATA_ROW: unique symbol;
 export declare const SELECT_ALL: unique symbol;
 export declare const ROW_INDEX: unique symbol;
-export declare const DataTable: DataTableType;
-export declare const DataTableInternal: DataTableType & {
+export declare const GRID_ROW_INDEX: unique symbol;
+export declare const DataTable: DataTableType & {
     Head: typeof Head;
     Body: typeof Body;
 };

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

@@ -53,7 +53,7 @@ export type DataTableProps<Data extends DataTableData, UniqKey extends keyof Dat
      */
     defaultGridTemplateColumnWidth?: string;
     /**
-     * Flag for compact view (fewer paddings)
+     * Flag for compact view (smaller horizontal paddings)
      */
     compact?: boolean;
     /**
@@ -116,6 +116,11 @@ export type DataTableProps<Data extends DataTableData, UniqKey extends keyof Dat
      * Work only with table-in-table accordions. In accordions with custom components use mount/unmount hooks in components.
      */
     onAccordionToggle?: (type: 'open' | 'close', uniqRowKey: UniqKeyType, rowIndex: number) => void;
+    /**
+     * Visual variant that adapts the table styling to different usage contexts
+     * @default 'default'
+     */
+    variant?: 'default' | 'card';
 };
 export type ColumnItemConfig = Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentProps<'div' | typeof Tooltip, 'div', DataTableColumnProps, {}, [
 ]>, 'children'> & {

package/lib/types/index.d.ts

@@ -1,11 +1,12 @@
 import type { Intergalactic } from '@semcore/core';
 import type React from 'react';
+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 } from './components/DataTable/DataTable.types';
+import type { DataTableSort, DataTableType, DataTableData, DataTableProps, DataTableChangeSort, ColumnGroupConfig, ColumnItemConfig } from './components/DataTable/DataTable.types';
 declare const wrapDataTable: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.UntypeRefAndTag<Intergalactic.InternalTypings.ComponentPropsNesting<DataTableType>> & PropsExtending) => React.ReactNode) => DataTableType;
-export { DataTable, ACCORDION, ROW_GROUP, 
+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, };
-export type { DataTableSort, DataTableData, DataTableProps, DataTableChangeSort, };
+export type { DataTableSort, DataTableData, DataTableProps, DataTableChangeSort, ColumnGroupConfig, ColumnItemConfig, };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/data-table",
   "description": "Semrush DataTable Component",
-  "version": "16.2.2-prerelease.1",
+  "version": "16.3.0-prerelease.4",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,34 +14,34 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/icon": "16.7.1-prerelease.1",
-    "@semcore/button": "16.0.9-prerelease.1",
-    "@semcore/checkbox": "16.1.3-prerelease.1",
-    "@semcore/flex-box": "16.0.9-prerelease.1",
-    "@semcore/scroll-area": "16.0.9-prerelease.1",
-    "@semcore/spin": "16.0.9-prerelease.1",
-    "@semcore/tooltip": "16.0.9-prerelease.1",
-    "@semcore/widget-empty": "16.0.9-prerelease.1"
+    "@semcore/icon": "16.7.1-prerelease.4",
+    "@semcore/button": "16.0.9-prerelease.4",
+    "@semcore/checkbox": "16.1.3-prerelease.4",
+    "@semcore/flex-box": "16.0.9-prerelease.4",
+    "@semcore/scroll-area": "16.0.9-prerelease.4",
+    "@semcore/spin": "16.0.9-prerelease.4",
+    "@semcore/tooltip": "16.0.9-prerelease.4",
+    "@semcore/widget-empty": "16.0.9-prerelease.4"
   },
   "devDependencies": {
     "@types/node": "18.16.15",
     "csstype": "3.1.3",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/typography": "16.2.3-prerelease.1",
-    "@semcore/dropdown-menu": "16.1.10-prerelease.1",
-    "@semcore/accordion": "16.6.0",
-    "@semcore/base-trigger": "16.4.1-prerelease.1",
-    "@semcore/divider": "16.0.9-prerelease.1",
-    "@semcore/progress-bar": "16.0.9-prerelease.1",
-    "@semcore/portal": "16.0.9-prerelease.1",
-    "@semcore/skeleton": "16.0.9-prerelease.1",
-    "@semcore/spin-container": "16.0.9-prerelease.1",
-    "@semcore/spin": "16.0.9-prerelease.1",
-    "@semcore/tooltip": "16.0.9-prerelease.1",
-    "@semcore/base-components": "16.2.3-prerelease.1"
+    "@semcore/base-trigger": "16.4.1-prerelease.4",
+    "@semcore/dropdown-menu": "16.1.10-prerelease.4",
+    "@semcore/accordion": "16.6.1-prerelease.4",
+    "@semcore/divider": "16.0.9-prerelease.4",
+    "@semcore/portal": "16.0.9-prerelease.4",
+    "@semcore/progress-bar": "16.0.9-prerelease.4",
+    "@semcore/typography": "16.2.3-prerelease.4",
+    "@semcore/skeleton": "16.0.9-prerelease.4",
+    "@semcore/spin": "16.0.9-prerelease.4",
+    "@semcore/spin-container": "16.0.9-prerelease.4",
+    "@semcore/tooltip": "16.0.9-prerelease.4",
+    "@semcore/base-components": "16.2.3-prerelease.4"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.2.3-prerelease.1"
+    "@semcore/base-components": "^16.2.3-prerelease.4"
   },
   "repository": {
     "type": "git",