@semcore/data-table 16.0.7 → 16.1.0-prerelease.2

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

@@ -4,6 +4,7 @@ import { Head } from '../Head/Head';
 export declare const ACCORDION: unique symbol;
 export declare const ROW_GROUP: unique symbol;
 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;

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

@@ -1,9 +1,10 @@
 import type { BoxProps } from '@semcore/base-components';
 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 { DataTableBodyProps } from '../Body/Body.types';
-import type { DTRow, UniqRowKey } from '../Body/Row.types';
+import type { DTRow } from '../Body/Row.types';
 import type { DataTableColumnProps } from '../Head/Column.types';
 import type { DataTableHeadProps } from '../Head/Head.types';
 /**
@@ -22,7 +23,7 @@ export type DataRowItem = {
     [key: string]: DTValue | undefined | null;
     [ACCORDION]?: React.ReactNode | DataTableData;
     [ROW_GROUP]?: DataTableData;
-    [UNIQ_ROW_KEY]?: UniqRowKey;
+    [UNIQ_ROW_KEY]?: string;
 };
 export interface DTValue {
     toString(): string;
@@ -31,9 +32,9 @@ 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 DataTableProps<D extends DataTableData> = DataTableAriaProps & Sizes & {
+export type DataTableProps<Data extends DataTableData, UniqKey extends keyof Data[number], UniqKeyType extends Data[number][UniqKey]> = DataTableAriaProps & Sizes & {
     /** Data for table */
-    data: D;
+    data: Data;
     /** Count of total rows if table using virtual scroll. Needs for accessibility */
     totalRows?: number;
     /** Table theme according to visual hierarchy on the page
@@ -41,9 +42,9 @@ export type DataTableProps<D extends DataTableData> = DataTableAriaProps & Sizes
      * */
     use?: DTUse;
     /** Active sort object */
-    sort?: DataTableSort<keyof D[0]>;
+    sort?: DataTableSort<keyof Data[0]>;
     /** Handler call when request will change sort */
-    onSortChange?: DataTableChangeSort<keyof D[0]>;
+    onSortChange?: DataTableChangeSort<keyof Data[0]>;
     /**
      * Value to describe width for each column. Could be overridden in the column.gtcWidth property.
      * Use `auto` to automatically fit the table to the content,
@@ -67,34 +68,48 @@ export type DataTableProps<D extends DataTableData> = DataTableAriaProps & Sizes
     /**
      * Set of expanded rows (uniq id from them)
      */
-    expandedRows?: Set<string>;
+    expandedRows?: Set<UniqKeyType>;
     virtualScroll?: VirtualScroll;
     columns: ColumnsConfig;
     headerProps?: DataTableHeadProps;
-    rowProps?: DataTableBodyProps['rowProps'];
-    renderCell?: DataTableBodyProps['renderCell'];
+    rowProps?: DataTableBodyProps<UniqKeyType>['rowProps'];
+    renderCell?: DataTableBodyProps<UniqKeyType>['renderCell'];
     /**
    * Name of a unique key for each row data item
    */
-    uniqueRowKey?: keyof D[number];
+    uniqueRowKey?: UniqKey;
     /**
      * List of selected rows (uniqIds from a data array)
      */
-    selectedRows?: UniqRowKey[];
-    onSelectedRowsChange?: (selectedRows: UniqRowKey[], event?: React.SyntheticEvent<HTMLElement>, opts?: {
+    selectedRows?: UniqKeyType[];
+    onSelectedRowsChange?: (selectedRows: UniqKeyType[], event?: React.SyntheticEvent<HTMLElement>, opts?: {
         selectedRowIndex: number;
         isSelected: boolean;
-        row: DTRow;
+        row: DTRow<UniqKeyType>;
     }) => void;
     /**
      * For custom empty data widget.
      */
     renderEmptyData?: () => React.ReactNode;
+    /**
+     * For adding an overlay over table cells.
+     */
+    renderCellOverlay?: () => React.ReactNode;
     /**
      * Duration for collapse/expand accordion rows in tables in ms.
      * @default 200
      */
     accordionDuration?: number | [number, number];
+    /**
+     * Whether multiple accordion items can be open at a time, or only one.
+     * @default 'independent'
+     */
+    accordionMode?: 'toggle' | 'independent';
+    /**
+     * Handle open/close accordion.
+     * 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;
 };
 export type ColumnItemConfig = Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentProps<'div' | typeof Tooltip, 'div', DataTableColumnProps, {}, [
 ]>, 'children'> & {
@@ -120,5 +135,5 @@ export type VirtualScroll = boolean | {
 };
 export type RowIndex = number;
 export type ColIndex = number;
-export type DataTableType = (<Data extends DataTableData, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentProps<Tag, 'div', DataTableProps<Data>>, 'tag' | 'children'>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', DataTableProps<any>>;
+export type DataTableType = (<Data extends DataTableData, UniqKey extends keyof Data[number] = keyof Data[number], UniqKeyType extends Data[number][UniqKey] = Data[number][UniqKey], Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentProps<Tag, 'div', DataTableProps<Data, UniqKey, UniqKeyType>>, 'tag' | 'children'>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', DataTableProps<any, any, any>>;
 export {};

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

@@ -5,8 +5,8 @@ import type { DataTableData, SortDirection } from '../DataTable/DataTable.types'
 type State = {
     sortVisible: boolean;
 };
-export declare class Column<D extends DataTableData> extends Component<DataTableColumnProps, {}, {}, [
-], ColumnPropsInner<D>> {
+export declare class Column<Data extends DataTableData, UniqKey extends keyof Data[number], UniqKeyType extends Data[number][UniqKey]> extends Component<DataTableColumnProps, {}, {}, [
+], ColumnPropsInner<Data, UniqKey, UniqKeyType>> {
     static displayName: string;
     static style: {
         [key: string]: string;
@@ -16,7 +16,7 @@ export declare class Column<D extends DataTableData> extends Component<DataTable
     sortWrapperRef: React.RefObject<HTMLDivElement>;
     state: State;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: DataTableColumnProps & ColumnPropsInner<D>): void;
+    componentDidUpdate(prevProps: DataTableColumnProps & ColumnPropsInner<Data, UniqKey, UniqKeyType>): void;
     changeTemplateColumnBySort(): void;
     calculateActiveColumnMinWidth: () => number | null;
     get defaultDirection(): SortDirection;

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

@@ -1,4 +1,5 @@
 import type { Property } from 'csstype';
+import type { BodyPropsInner } from '../Body/Body.types';
 import type { CellPropsInner } from '../Body/Cell.types';
 import type { ColumnGroupConfig, ColumnItemConfig, DataTableData, DataTableProps, DTUse, SortDirection } from '../DataTable/DataTable.types';
 export type CommonColumnType = {
@@ -34,6 +35,10 @@ export type CommonColumnType = {
      * CSS `justify-content` property
      */
     justifyContent?: Property.JustifyContent;
+    /**
+     * CSS `text-align` property
+     */
+    textAlign?: Property.TextAlign;
 };
 export type DTColumn = ColumnItemConfig & CommonColumnType & {
     /**
@@ -44,6 +49,7 @@ export type DTColumn = ColumnItemConfig & CommonColumnType & {
     columns?: DTColumn[];
     children?: React.ReactNode | React.FC;
     gridArea?: string;
+    showShadowVertical?: boolean;
 };
 export type DataTableColumnProps = CommonColumnType & {
     /**
@@ -55,11 +61,11 @@ export type DataTableColumnProps = CommonColumnType & {
      */
     changeSortSize?: boolean;
 };
-export type ColumnPropsInner<D extends DataTableData> = {
+export type ColumnPropsInner<Data extends DataTableData, UniqKey extends keyof Data[number], UniqKeyType extends Data[number][UniqKey]> = {
     use: DTUse;
     borders?: 'both' | 'left' | 'right';
-    sort?: DataTableProps<D>['sort'];
-    onSortChange?: DataTableProps<D>['onSortChange'];
+    sort?: DataTableProps<Data, UniqKey, UniqKeyType>['sort'];
+    onSortChange?: DataTableProps<Data, UniqKey, UniqKeyType>['onSortChange'];
     uid: string;
     parent?: DTColumn;
     sortableColumnDescribeId: string;
@@ -68,5 +74,6 @@ export type ColumnPropsInner<D extends DataTableData> = {
     gridTemplateColumns: string[];
     gridTemplateAreas: string[];
     sticky: boolean;
-    onClick: CellPropsInner['onClick'];
+    onClick: CellPropsInner<UniqKeyType>['onClick'];
+    shadowVertical?: BodyPropsInner<UniqKeyType>['shadowVertical'];
 };

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

@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react';
 import type { DataTableColumnProps, DTColumn } from './Column.types';
+import type { BodyPropsInner } from '../Body/Body.types';
 import type { DTUse } from '../DataTable/DataTable.types';
 export type DataTableGroupProps = {
     title: React.ReactNode;
@@ -13,4 +14,5 @@ export type GroupPropsInner = {
     use: DTUse;
     withConfig: boolean;
     getFixedStyle: (cell: Pick<DTColumn, 'name' | 'fixed'>) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];
+    shadowVertical?: BodyPropsInner<any>['shadowVertical'];
 };

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

@@ -1,6 +1,7 @@
 import type { DTColumn } from './Column.types';
+import type { BodyPropsInner } from '../Body/Body.types';
 import type { CellPropsInner } from '../Body/Cell.types';
-import type { DTRow, UniqRowKey } from '../Body/Row.types';
+import type { DTRow } from '../Body/Row.types';
 import type { DataTableData, DataTableProps, DTUse } from '../DataTable/DataTable.types';
 export type DataTableHeadProps = {
     /**
@@ -20,26 +21,29 @@ export type DataTableHeadProps = {
     withScrollBar?: boolean;
     /** Animation duration for a top property. When it's set adds animation for top changes */
     animationDuration?: number;
+    /** Outer ref for the header */
+    ref?: React.Ref<HTMLDivElement>;
 };
-export type HeadPropsInner<D extends DataTableData> = {
+export type HeadPropsInner<Data extends DataTableData, UniqKey extends keyof Data[number], UniqKeyType extends Data[number][UniqKey]> = {
     use: DTUse;
     tableRef: React.RefObject<HTMLElement>;
     columns: DTColumn[];
     treeColumns: DTColumn[];
     compact: boolean;
-    sort?: DataTableProps<D>['sort'];
-    onSortChange?: DataTableProps<D>['onSortChange'];
+    sort?: DataTableProps<Data, UniqKey, UniqKeyType>['sort'];
+    onSortChange?: DataTableProps<Data, UniqKey, UniqKeyType>['onSortChange'];
     getI18nText: (key: string) => string;
     uid: string;
-    ref: React.RefObject<HTMLDivElement>;
+    ref: React.Ref<HTMLDivElement>;
     gridAreaGroupMap: Map<number, string>;
     gridTemplateColumns: string[];
     gridTemplateAreas: string[];
     sideIndents?: 'wide';
     totalRows: number;
-    selectedRows?: UniqRowKey[];
+    selectedRows?: UniqKeyType[];
     onChangeSelectAll?: (value: boolean, event?: React.SyntheticEvent<HTMLElement>) => void;
-    flatRows: DTRow[];
+    flatRows: DTRow<UniqKeyType>[];
     getFixedStyle: (cell: Pick<DTColumn, 'name' | 'fixed'>) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];
-    onCellClick: CellPropsInner['onClick'];
+    onCellClick: CellPropsInner<UniqKeyType>['onClick'];
+    shadowVertical?: BodyPropsInner<UniqKeyType>['shadowVertical'];
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/data-table",
   "description": "Semrush DataTable Component",
-  "version": "16.0.7",
+  "version": "16.1.0-prerelease.2",
   "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.4.0",
-    "@semcore/button": "16.0.5",
-    "@semcore/checkbox": "16.0.5",
-    "@semcore/flex-box": "16.0.5",
-    "@semcore/scroll-area": "16.0.5",
-    "@semcore/spin": "16.0.5",
-    "@semcore/tooltip": "16.0.5",
-    "@semcore/widget-empty": "16.0.5"
+    "@semcore/icon": "16.5.0-prerelease.2",
+    "@semcore/button": "16.0.6-prerelease.2",
+    "@semcore/checkbox": "16.1.0-prerelease.2",
+    "@semcore/flex-box": "16.0.6-prerelease.2",
+    "@semcore/scroll-area": "16.0.6-prerelease.2",
+    "@semcore/spin": "16.0.6-prerelease.2",
+    "@semcore/tooltip": "16.0.6-prerelease.2",
+    "@semcore/widget-empty": "16.0.6-prerelease.2"
   },
   "devDependencies": {
     "@types/node": "18.16.15",
     "csstype": "3.1.3",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/base-trigger": "16.2.4",
-    "@semcore/typography": "16.1.5",
-    "@semcore/accordion": "16.3.0",
-    "@semcore/dropdown-menu": "16.1.6",
-    "@semcore/divider": "16.0.5",
-    "@semcore/skeleton": "16.0.5",
-    "@semcore/portal": "16.0.5",
-    "@semcore/spin-container": "16.0.5",
-    "@semcore/progress-bar": "16.0.5",
-    "@semcore/spin": "16.0.5",
-    "@semcore/tooltip": "16.0.5",
-    "@semcore/base-components": "16.1.2"
+    "@semcore/dropdown-menu": "16.1.7-prerelease.2",
+    "@semcore/base-trigger": "16.3.0-prerelease.2",
+    "@semcore/typography": "16.2.0-prerelease.2",
+    "@semcore/accordion": "16.4.0-prerelease.2",
+    "@semcore/divider": "16.0.6-prerelease.2",
+    "@semcore/portal": "16.0.6-prerelease.2",
+    "@semcore/progress-bar": "16.0.6-prerelease.2",
+    "@semcore/skeleton": "16.0.6-prerelease.2",
+    "@semcore/spin": "16.0.6-prerelease.2",
+    "@semcore/spin-container": "16.0.6-prerelease.2",
+    "@semcore/base-components": "16.2.0-prerelease.2",
+    "@semcore/tooltip": "16.0.6-prerelease.2"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0"
+    "@semcore/base-components": "^16.2.0-prerelease.2"
   },
   "repository": {
     "type": "git",