@semcore/data-table 4.50.2 → 4.51.0-prerelease.0

package/lib/esm/translations/pl.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "Umożliwia sortowanie";
 const pl = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "Pokaż szczegóły",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "Ukryj szczegóły",
+  "DataTable.Header.selectAllCheckbox:aria-label": "Wszystkie przedmioty",
+  "DataTable.allItemsSelected:aria-live": "Wszystkie przedmioty wybrane",
+  "DataTable.allItemsDeselected:aria-live": "Wszystkie przedmioty odznaczone"
 };
 export {
   pl as default,

package/lib/esm/translations/pt.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "Classificável";
 const pt = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "Exibir detalhes",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "Ocultar detalhes",
+  "DataTable.Header.selectAllCheckbox:aria-label": "Todos os itens",
+  "DataTable.allItemsSelected:aria-live": "Todos os itens selecionados",
+  "DataTable.allItemsDeselected:aria-live": "Todos os itens desmarcados"
 };
 export {
   pt as default,

package/lib/esm/translations/sv.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "Sorterbar";
 const sv = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "Visa detaljer",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "Dölj detaljer",
+  "DataTable.Header.selectAllCheckbox:aria-label": "Alla objekt",
+  "DataTable.allItemsSelected:aria-live": "Alla objekt valda",
+  "DataTable.allItemsDeselected:aria-live": "Alla objekt avmarkerade"
 };
 export {
   sv as default,

package/lib/esm/translations/tr.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "Sıralanabilir";
 const tr = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "Detayları göster",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "Detayları gizle",
+  "DataTable.Header.selectAllCheckbox:aria-label": "Tüm öğeler",
+  "DataTable.allItemsSelected:aria-live": "Tüm öğeler seçildi",
+  "DataTable.allItemsDeselected:aria-live": "Tüm öğeler seçilmedi"
 };
 export {
   tr as default,

package/lib/esm/translations/vi.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "Có thể sắp xếp";
 const vi = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "Hiển thị chi tiết",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "Ẩn bớt",
+  "DataTable.Header.selectAllCheckbox:aria-label": "Tất cả các mục",
+  "DataTable.allItemsSelected:aria-live": "Tất cả các mục đã được chọn",
+  "DataTable.allItemsDeselected:aria-live": "Tất cả các mục đã được bỏ chọn"
 };
 export {
   vi as default,

package/lib/esm/translations/zh.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "可排序";
 const zh = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "显示详细信息",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "隐藏详细信息",
+  "DataTable.Header.selectAllCheckbox:aria-label": "所有项目",
+  "DataTable.allItemsSelected:aria-live": "所有项目已选择",
+  "DataTable.allItemsDeselected:aria-live": "所有项目已取消选择"
 };
 export {
   zh as default,

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { CellRenderProps } from '../Body/Body.types';
+import type { DataTableCellProps } from '../Body/Cell.types';
+import type { DTRow, DTRows } from '../Body/Row.types';
+import type { DataTableData, DataTableProps, DataRowItem, DTUse } from '../DataTable/DataTable.types';
+import type { DTColumn } from '../Head/Column.types';
+type AccordionRowsProps<Data extends DataTableData, UniqKeyType> = {
+    accordionId: string;
+    expanded: boolean;
+    expandedForAnimation: boolean;
+    tableRef: React.RefObject<HTMLDivElement>;
+    use: DTUse;
+    columns: DTColumn[];
+    row: DTRow<UniqKeyType> | DTRow<UniqKeyType>[];
+    rows: DTRows<UniqKeyType>;
+    flatRows: DTRow<UniqKeyType>[];
+    rowIndex: number;
+    gridRowIndex: number;
+    accordionDuration: number | [number, number];
+    accordionAnimationRows: number;
+    sideIndents: 'wide' | undefined;
+    getFixedStyle: (cell: Pick<DTColumn, 'name' | 'fixed'>) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];
+    onCellClick: DataTableCellProps<Data, UniqKeyType>['onClick'];
+    renderCell: ((props: CellRenderProps<Data[number], UniqKeyType>) => React.ReactNode | Record<string, any>) | undefined;
+    rawData: DataRowItem[];
+    shadowVertical: '' | 'end' | 'start' | 'median' | undefined;
+    variant: DataTableProps<any, any, any>['variant'];
+    limit: DataTableProps<any, any, any>['limit'];
+} & {
+    'aria-level': number;
+};
+type State = {
+    maxHeight: number;
+};
+export declare class AccordionRows<Data extends DataTableData, UniqKeyType> extends React.PureComponent<AccordionRowsProps<Data, UniqKeyType>, State> {
+    accordionRowsRef: React.RefObject<HTMLDivElement>;
+    state: State;
+    componentDidUpdate(prevProps: Readonly<AccordionRowsProps<Data, UniqKeyType>>): void;
+    render(): React.ReactNode;
+}
+export {};

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

@@ -0,0 +1,6 @@
+import type { DataTableBodyType } from './Body.types';
+import type { DataTableRowType } from './Row.types';
+export declare const INDEX_OFFSET = 2;
+export declare const Body: DataTableBodyType & {
+    Row: DataTableRowType;
+};

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

@@ -0,0 +1,87 @@
+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';
+export type CellRenderProps<Data extends DataRowItem, UniqKeyType> = {
+    /** The column key for the cell data */
+    dataKey: string;
+    /** The complete row data object */
+    row: DTRow<UniqKeyType>;
+    /** The column configuration object */
+    column: DTColumn;
+    /** Zero-based row index in the table */
+    rowIndex: number;
+    /** Zero-based column index in the table */
+    columnIndex: number;
+    /** The name/key of the column */
+    columnName: string | typeof ACCORDION;
+    /** Cell value */
+    value: string | React.ReactElement;
+    /** Function that returns the default cell rendering */
+    defaultRender: () => React.ReactNode;
+    /** Indicates if this cell spans multiple rows */
+    isMergedRows: boolean;
+    /** Indicates if this cell spans multiple columns */
+    isMergedColumns: boolean;
+    /** The original unprocessed row data */
+    rawData: Data;
+    /** Flag to show is the cell is in the accordion row */
+    isAccordionRow: boolean;
+    /** Zero-based accordion row index */
+    accordionRowIndex?: number;
+};
+export type DataTableBodyProps<Data extends DataTableData, UniqKeyType> = {
+    renderCell?: (props: CellRenderProps<Data[number], UniqKeyType>) => React.ReactNode | (Record<string, any> & {
+        theme?: Theme;
+    });
+    rowProps?: (row: DTRow<UniqKeyType>, rowIndex: number) => (Record<string, any> & {
+        theme?: Theme;
+    }) | undefined;
+};
+export type BodyPropsInner<Data extends DataTableData, UniqKeyType> = DataTableBodyProps<Data, UniqKeyType> & {
+    rows: Array<DTRow<UniqKeyType> | DTRow<UniqKeyType>[]>;
+    flatRows: DTRow<UniqKeyType>[];
+    columns: DTColumn[];
+    use: DTUse;
+    compact: boolean;
+    gridTemplateColumns: string[];
+    gridTemplateAreas: string[];
+    loading?: boolean;
+    headerHeight: number;
+    getI18nText: (key: string) => string;
+    expandedRows: Set<UniqKeyType>;
+    onExpandRow: (row: DTRow<UniqKeyType>) => void;
+    spinnerRef: React.RefObject<HTMLDivElement>;
+    tableContainerRef: React.RefObject<HTMLDivElement>;
+    tableRef: React.RefObject<HTMLDivElement>;
+    scrollAreaRef: React.RefObject<HTMLDivElement>;
+    scrollTop: number;
+    scrollDirection: 'down' | 'up';
+    virtualScroll?: VirtualScroll;
+    hasGroups: boolean;
+    uid: string;
+    rowProps?: (row: DTRow<UniqKeyType>, rowIndex: number) => Record<string, any> | undefined;
+    renderCell?: (props: CellRenderProps<Data[number], UniqKeyType>) => React.ReactNode | Record<string, any>;
+    onBackFromAccordion: (colName: string) => void;
+    stickyHeader?: boolean;
+    selectedRows?: UniqKeyType[] | ISelectedRows<UniqKeyType>;
+    onSelectRow?: (isSelect: boolean, selectedRowIndex: number, row: DTRow<UniqKeyType>, event?: React.SyntheticEvent<HTMLElement>) => void;
+    renderEmptyData: () => React.ReactNode;
+    sideIndents?: 'wide';
+    getFixedStyle: (cell: Pick<DTColumn, 'name' | 'fixed'>) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];
+    accordionDuration: number | [number, number];
+    onCellClick: DataTableCellProps<Data, UniqKeyType>['onClick'];
+    rawData: DataRowItem[];
+    accordionMode?: DataTableProps<any, any, any>['accordionMode'];
+    shadowVertical?: '' | 'end' | 'start' | 'median';
+    renderCellOverlay?: () => React.ReactNode;
+    limit?: DataTableProps<any, any, any>['limit'];
+    variant?: DataTableProps<any, any, any>['variant'];
+    totalRows?: number;
+    accordionAnimationRows: RowPropsInner<Data, UniqKeyType>['accordionAnimationRows'];
+};
+export type DataTableBodyType = (<Data extends DataTableData, UniqKeyType, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', DataTableBodyProps<Data, UniqKeyType>>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', DataTableBodyProps<any, any>>;

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

@@ -0,0 +1 @@
+export declare const Cell: import("@semcore/core").Intergalactic.Component<"div", {}, {}, never[]>;

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

@@ -0,0 +1,36 @@
+import type { Intergalactic } from '@semcore/core';
+import type { CSSProperties, HTMLAttributes } from 'react';
+import type { BodyPropsInner } from './Body.types';
+import type { DTRow, DTRows } from './Row.types';
+import type { DataTableData, DTUse } from '../DataTable/DataTable.types';
+import type { DTColumn } from '../Head/Column.types';
+export type Theme = 'muted' | 'info' | 'success' | 'warning' | 'danger';
+export type DataTableCellProps<Data extends DataTableData, UniqKeyType> = Intergalactic.InternalTypings.EfficientOmit<HTMLAttributes<HTMLDivElement>, 'onClick'> & {
+    id: string;
+    accordionId: string;
+    row: DTRow<UniqKeyType>;
+    rowIndex: number;
+    column: DTColumn;
+    columnIndex: number;
+    gridRowIndex: number;
+    children?: React.ReactNode;
+    expanded?: boolean;
+    withAccordion?: boolean;
+    accordionRowIndex?: number;
+    rows: DTRows<UniqKeyType>;
+    use: DTUse;
+    style?: CSSProperties;
+    virtualScroll: boolean;
+    tableRef: React.RefObject<HTMLDivElement>;
+    accordionDuration?: number | [number, number];
+    onClick: (e: React.SyntheticEvent<HTMLElement>, opt: {
+        rowIndex: number;
+        colIndex: number;
+        row?: DTRow<UniqKeyType>;
+    }) => void;
+    flatRows: DTRow<UniqKeyType>[];
+    shadowVertical?: BodyPropsInner<Data, UniqKeyType>;
+    withoutBorder?: boolean;
+} & {
+    'data-aria-level'?: number;
+};

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

@@ -0,0 +1,17 @@
+import { type Intergalactic } from '@semcore/core';
+import * as React from 'react';
+import type { DTRow, DTRows } from './Row.types';
+import type { DataTableProps } from '../DataTable/DataTable.types';
+import type { DTColumn } from '../Head/Column.types';
+type LimitOverlayProps<UniqKeyType> = {
+    columns: DTColumn[];
+    rows: DTRows<UniqKeyType>;
+    limit: Exclude<DataTableProps<any, any, any>['limit'], undefined>;
+    flatRows: DTRow<UniqKeyType>[];
+    hasGroups: boolean;
+    tableRef: React.RefObject<HTMLDivElement>;
+    scrollAreaRef: React.RefObject<HTMLDivElement>;
+};
+type LimitOverlayType = (<UniqKeyType, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', LimitOverlayProps<UniqKeyType>>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', LimitOverlayProps<any>>;
+export declare const LimitOverlay: LimitOverlayType;
+export {};

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

@@ -0,0 +1,17 @@
+import type { DTRows } from './Row.types';
+export declare class MergedRowsCell {
+    readonly value: any;
+    readonly rowsCount: number;
+    readonly accordion?: React.ReactNode | DTRows<any>;
+    constructor(value: any, rowsCount: number, accordion?: React.ReactNode | DTRows<any>);
+}
+export declare class MergedColumnsCell {
+    readonly value: any;
+    readonly columnsCount: number;
+    readonly dataKey: string;
+    readonly accordion?: React.ReactNode | DTRows<any>;
+    constructor(value: any, options: {
+        size: number;
+        dataKey: string;
+    }, accordion?: React.ReactNode | DTRows<any>);
+}

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

@@ -0,0 +1,47 @@
+import { Component } from '@semcore/core';
+import * as React from 'react';
+import type { DataTableCellProps } from './Cell.types';
+import { MergedColumnsCell, MergedRowsCell } from './MergedCells';
+import type { DataTableRowProps, DataTableRowType, DTRow, DTRows, RowPropsInner } from './Row.types';
+import type { DataTableData, DTValue } from '../DataTable/DataTable.types';
+type State<UniqKeyType> = {
+    expandedForAnimation: boolean;
+    accordionRows?: DTRows<UniqKeyType>;
+    accordionComponent?: React.ReactNode;
+};
+export declare class RowRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTableRowProps<Data, UniqKeyType>, [], {}, RowPropsInner<Data, UniqKeyType>, State<UniqKeyType>> {
+    static displayName: string;
+    static style: {
+        [key: string]: string;
+    };
+    static defaultProps: {
+        'aria-level': undefined;
+    };
+    private cellName;
+    private closeAccordionTimeout;
+    private openAccordionTimeout;
+    rowElementRef: React.RefObject<HTMLDivElement>;
+    state: State<UniqKeyType>;
+    constructor(props: DataTableRowProps<Data, UniqKeyType>);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: DataTableRowProps<Data, UniqKeyType>): void;
+    componentWillUnmount(): void;
+    setAccordion(): void;
+    cellHasAccordion(cellValue?: DTValue | MergedColumnsCell | MergedRowsCell): cellValue is DTValue;
+    handleBackFromAccordion: (e: React.KeyboardEvent) => void;
+    handleExpandRow: (row: DTRow<UniqKeyType>, index: number) => void;
+    closeAccordion: (row: DTRow<UniqKeyType>, closeDuration: number) => void;
+    handleClickRow(row: DTRow<UniqKeyType>): (e: React.SyntheticEvent) => void;
+    handleClickCell: (e: React.SyntheticEvent<HTMLElement>, opt: {
+        row: DTRow<UniqKeyType>;
+        rowIndex: number;
+    }) => void;
+    getCellProps(props: DataTableCellProps<Data, UniqKeyType>): Record<string, any>;
+    get isRowHidden(): true | undefined;
+    render(): React.ReactNode;
+    private isReactNode;
+}
+export declare const Row: DataTableRowType & {
+    Cell: any;
+};
+export {};

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

@@ -0,0 +1,74 @@
+import type { Intergalactic } from '@semcore/core';
+import type * as React from 'react';
+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';
+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 | DTRows<UniqKeyType>;
+    [ROW_GROUP]?: Set<UniqKeyType>;
+};
+export type DTRows<UniqKeyType> = Array<DTRow<UniqKeyType> | DTRow<UniqKeyType>[]>;
+export type DataTableRowProps<Data extends DataTableData, UniqKeyType> = {
+    row: DTRow<UniqKeyType>;
+    mergedRow?: boolean;
+    isAccordionRow?: boolean;
+    accordionRowIndex?: DataTableCellProps<Data, UniqKeyType>['accordionRowIndex'];
+    isNonInteractive?: boolean;
+    componentRef?: (component: RowRoot<Data, UniqKeyType> | null) => void;
+    accordionIndex?: number;
+    theme?: Theme;
+};
+export type RowPropsInner<Data extends DataTableData, UniqKeyType> = JSX.IntrinsicElements['div'] & {
+    use: DTUse;
+    /**
+     * Flag to show is row in a merged list or not.
+     */
+    mergedRow?: boolean;
+    columns: DTColumn[];
+    row: DTRow<UniqKeyType> | DTRow<UniqKeyType>[];
+    rows: DTRows<UniqKeyType>;
+    flatRows: DTRow<UniqKeyType>[];
+    rowIndex: number;
+    gridRowIndex: number;
+    onExpandRow: (expandedRow: DTRow<UniqKeyType>) => void;
+    gridTemplateAreas: string[];
+    gridTemplateColumns: string[];
+    selectedRows?: UniqKeyType[] | ISelectedRows<UniqKeyType>;
+    onSelectRow?: (isSelect: boolean, selectedRowIndex: number, row: DTRow<UniqKeyType>, event?: React.SyntheticEvent<HTMLElement>) => void;
+    inert?: '';
+    accordionDuration: number | [number, number];
+    accordionAnimationRows: number;
+    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: DataTableCellProps<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'];
+    limit: DataTableProps<any, any, any>['limit'];
+    totalRows?: number;
+    hasGroups: boolean;
+};
+export type DataTableRowType = (<Data extends DataTableData, UniqKeyType, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', DataTableRowProps<Data, UniqKeyType> & Partial<RowPropsInner<Data, UniqKeyType>>>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', DataTableRowProps<any, any>>;

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.d.ts

@@ -0,0 +1,14 @@
+import type { DataTableType } from './DataTable.types';
+import { Body } from '../Body/Body';
+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 = "SELECT_ALL_ROWS";
+export declare const ROW_INDEX: unique symbol;
+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

@@ -0,0 +1,202 @@
+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 { 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';
+import type { DataTableHeadProps } from '../Head/Head.types';
+/**
+ * Datatable must have an accessible name (aria-table-name).
+ * It should describe table content.
+ */
+export type DataTableAriaProps = Intergalactic.RequireAtLeastOne<{
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'title'?: string;
+}>;
+export type SortDirection = 'asc' | 'desc';
+export type DataTableSort<Column> = [sortBy: Column, sortDirection: SortDirection];
+export type DataTableChangeSort<Column> = (sort: [sortBy: Column, sortDirection: SortDirection], e?: React.SyntheticEvent) => void;
+export type DataRowItem = {
+    [key: string]: DTValue | undefined | null;
+    [ACCORDION]?: React.ReactNode | DataTableData;
+    [ROW_GROUP]?: DataTableData;
+    [UNIQ_ROW_KEY]?: string;
+};
+export interface DTValue {
+    toString(): string;
+    [ACCORDION]?: React.ReactNode;
+}
+export type DataTableData = DataRowItem[];
+export type DTUse = 'primary' | 'secondary';
+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 {
+    [ROW_GROUP]: DataTableData;
+} ? Data[number][typeof ROW_GROUP][number][UniqKey] : Data[number][UniqKey])> = DataTableAriaProps & Sizes & {
+    /** Data for table */
+    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
+     * @default primary
+     * */
+    use?: DTUse;
+    /** Active sort object */
+    sort?: DataTableSort<keyof Data[0]>;
+    /** Handler call when request will change sort */
+    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,
+     * `1fr` for equal-width columns or any other value for the grid-template-column css property.
+     * @default auto
+     */
+    defaultGridTemplateColumnWidth?: string;
+    /**
+     * Flag for compact view (smaller horizontal paddings)
+     */
+    compact?: boolean;
+    /**
+     * Size of paddings for the first and last columns in the table
+     */
+    sideIndents?: 'wide';
+    /**
+     * Flag for showing spinner on table body
+     */
+    loading?: boolean;
+    children?: never;
+    /**
+     * Set of expanded rows (uniq id from them)
+     * This is mutable! variable because of table performance. Don't change the link on it.
+     */
+    expandedRows?: Set<UniqKeyType>;
+    /** Configuration for virtual scroll */
+    virtualScroll?: VirtualScroll;
+    /** Configuration for table columns including headers, sorting, and layout */
+    columns: ColumnsConfig;
+    /** Configuration for sticky headers, height, scroll bars, etc. */
+    headerProps?: DataTableHeadProps;
+    /** Function to add custom props to rows */
+    rowProps?: DataTableBodyProps<Data, UniqKeyType>['rowProps'];
+    /** Custom cell renderer function */
+    renderCell?: DataTableBodyProps<Data, UniqKeyType>['renderCell'];
+    /**
+     * Name of a unique key for each row data item
+     */
+    uniqueRowKey?: UniqKey;
+    /**
+     * 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];
+    /**
+     * List of animated rows in accordion.
+     * @default 20
+     */
+    accordionAnimationRows?: RowPropsInner<Data, UniqKeyType>['accordionAnimationRows'];
+    /**
+     * 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;
+    /** Defines a limit configuration */
+    limit?: {
+        /**
+         * Start limit from this row
+         * @default 0
+         */
+        fromRow?: number;
+        /**
+         * Start limit from this column
+         * @default 0
+         */
+        fromColumn?: number;
+        /** Limit overlay */
+        renderOverlay: () => React.ReactNode;
+    };
+    /**
+     * Visual variant that adapts the table styling to different usage contexts
+     * @default 'default'
+     */
+    variant?: 'default' | 'card';
+    /**
+     * Handle change expanded rows
+     */
+    onExpandedRowsChange?: (expandedRows: Set<UniqKeyType>) => void;
+    /**
+   * 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;
+};
+export type ColumnGroupConfig = {
+    /**
+     * Name of column for mapping with data.
+     *
+     * Necessary to set a unique name for a group. (It will use as a React key).
+     *
+     * Note: Column names cannot contain the "/" character as it is reserved
+     * as a separator for merged columns. Column names are also used to generate
+     * CSS variable names for grid layout, so they must be valid CSS identifiers.
+     * Use letters, numbers, hyphens, and underscores only.
+     */
+    name: string;
+    borders?: 'both' | 'left' | 'right';
+    fixed?: 'left' | 'right';
+    children: React.ReactNode;
+    columns: ColumnItemConfig[];
+};
+export type ColumnsConfig = Array<ColumnItemConfig | ColumnGroupConfig>;
+export type VirtualScroll = boolean | {
+    rowsBuffer?: number;
+    aproxRowsOnPage?: number;
+} | {
+    rowHeight: number;
+    rowsBuffer?: number;
+};
+export type RowIndex = number;
+export type ColIndex = number;
+export type DataTableType = (<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 {
+    [ROW_GROUP]: DataTableData;
+} ? Data[number][typeof ROW_GROUP][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>>;