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

package/lib/esm/utils.mjs

@@ -0,0 +1,52 @@
+var getScrollOffsetValue = function getScrollOffsetValue2(columns) {
+  return columns.reduce(function(acc, column) {
+    if (column.fixed === "left") {
+      acc[0] += column.width;
+    }
+    if (column.fixed === "right") {
+      acc[1] += column.width;
+    }
+    return acc;
+  }, [0, 0]);
+};
+var flattenColumns = function flattenColumns2(columns) {
+  return columns.reduce(function(acc, column) {
+    var hasNestedColumns = "columns" in column && column.columns.length > 0;
+    var columns2 = hasNestedColumns ? flattenColumns2(column.columns) : [column];
+    acc = acc.concat(columns2);
+    return acc;
+  }, []);
+};
+var getFixedStyle = function getFixedStyle2(cell, columns) {
+  var side = cell.fixed;
+  if (!side) return [void 0, void 0];
+  var names = cell.name.split("/");
+  var nameSideMap = {
+    left: names[0],
+    right: names[names.length - 1]
+  };
+  var name = nameSideMap[side];
+  var index = columns.findIndex(function(column) {
+    return column.name === name;
+  });
+  if (index === -1) return [void 0, void 0];
+  var startIndexSideMap = {
+    left: 0,
+    right: index + 1
+  };
+  var endIndexSideMap = {
+    left: index,
+    right: columns.length
+  };
+  var columnsFixed = columns.slice(startIndexSideMap[side], endIndexSideMap[side]);
+  if (columnsFixed.length < 1) return [side, 0];
+  var vars = columnsFixed.map(function(column) {
+    return "var(--".concat(column.name, "_width)");
+  });
+  return [side, vars.length === 1 ? vars[0] : "calc(".concat(vars.join(" + "), ")")];
+};
+export {
+  flattenColumns,
+  getFixedStyle,
+  getScrollOffsetValue
+};

package/lib/types/Body.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Component } from '@semcore/core';
+import { RowData, Column, NestedCells, PropsLayer, Cell } from './types';
+import syncScroll from '@semcore/utils/lib/syncScroll';
+type AsProps = {
+    rows: NestedCells[][];
+    columns: Column[];
+    $scrollRef: ReturnType<ReturnType<typeof syncScroll>>;
+    onResize: ResizeObserverCallback;
+    onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    rowPropsLayers: PropsLayer[];
+    use: 'primary' | 'secondary';
+    uniqueKey: string;
+    virtualScroll?: boolean | {
+        tollerance?: number;
+        rowHeight?: number;
+    };
+    renderRows?: (props: {
+        rows: NestedCells[][];
+        columns: Column[];
+        renderRow: (row: Cell[], details: {
+            dataIndex: number;
+            nested: boolean;
+        }) => React.ReactNode;
+    }) => React.ReactNode;
+    disabledScroll?: boolean;
+    uid?: string;
+    animationsDisabled?: boolean;
+    scrollContainerRef: React.Ref<HTMLDivElement>;
+};
+type State = {
+    rowHeight: number | undefined;
+    scrollAreaHeight: undefined | number;
+    scrollOffset: number;
+};
+declare class Body extends Component<AsProps, {}, State> {
+    state: State;
+    scrollContainerRef: React.RefObject<HTMLDivElement>;
+    firstRowRef: React.RefObject<HTMLDivElement>;
+    firstRowResizeObserver: ResizeObserver | null;
+    lockedCell: [HTMLElement | null, boolean];
+    getRowHeight: () => number | undefined;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    onFocusCell: (e: React.FocusEvent<HTMLElement, HTMLElement>) => void;
+    renderCells(cells: NestedCells, rowData: RowData, dataIndex: number): React.ReactNode[];
+    renderRow(cells: NestedCells, { dataIndex, topOffset, nested, }: {
+        dataIndex: number;
+        topOffset?: number;
+        nested: boolean;
+    }): React.ReactNode;
+    renderRows(rows: NestedCells[], nested?: boolean): React.ReactNode[];
+    renderVirtualizedRows(rows: NestedCells[]): React.ReactNode[];
+    handleFirstRowResize: (entries: ResizeObserverEntry[]) => void;
+    handleScrollAreaResize: (entries: ResizeObserverEntry[]) => void;
+    handleScrollAreaScroll: (event: React.SyntheticEvent<HTMLElement>) => void;
+    setupRowSizeObserver: () => void;
+    handleBodyTransitionEnd: () => void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+export default Body;

package/lib/types/DataTable.d.ts

@@ -0,0 +1,205 @@
+import React from 'react';
+import { Property } from 'csstype';
+import { Component, PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';
+import { BoxProps, FlexProps } from '@semcore/flex-box';
+import type { Column } from './types';
+declare const ROW_GROUP: unique symbol;
+export type DataTableData = {
+    [key: string]: unknown;
+};
+export type DataTableSort<Column = string> = [sortBy: Column, sortDirection: 'desc' | 'asc'];
+export type DataTableTheme = 'muted' | 'info' | 'success' | 'warning' | 'danger';
+export type DataTableUse = 'primary' | 'secondary';
+export type DataTableRow = DataTableCell[];
+export type DataTableCell = {
+    /** Name of column */
+    name: string;
+    /** Data of column */
+    data: React.ReactNode;
+    [key: string]: unknown;
+};
+/**
+ * Datatable must have an accessible name (aria-table-name).
+ * It should describe table content.
+ */
+type DataTableAriaProps = Intergalactic.RequireAtLeastOne<{
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    title?: string;
+}>;
+/** @deprecated */
+export interface IDataTableProps<DataTableData extends {
+    [key: string]: any;
+}[] = UnknownProperties[]> extends Omit<DataTableProps<DataTableData>, keyof DataTableAriaProps> {
+}
+export type DataTableProps<DataTableData extends {
+    [key: string]: any;
+}[] = UnknownProperties[]> = BoxProps & {
+    /** Table theme according to visual hierarchy on the page
+     * @default primary
+     * */
+    use?: DataTableUse;
+    /** Data for table */
+    data?: DataTableData;
+    /** Active sort object */
+    sort?: DataTableSort<keyof DataTableData[0]>;
+    /** Handler call when request will change sort */
+    onSortChange?: (sort: DataTableSort<keyof DataTableData[0]>, e?: React.SyntheticEvent) => void;
+    /** Field name in one data entity that is unique accross all dataset
+     * @default id
+     */
+    uniqueKey?: keyof DataTableData[0];
+    /** Make cells compact by changing left and right paddings to smaller ones*/
+    compact?: boolean;
+    /** Count of total rows if table using virtual scroll. Needs for accessibility */
+    totalRows?: number;
+} & DataTableAriaProps;
+/** @deprecated */
+export interface IDataTableHeadProps extends DataTableHeadProps, UnknownProperties {
+}
+export type DataTableHeadProps = BoxProps & {
+    /** Sticky table header
+     * @deprecated
+     * */
+    sticky?: boolean;
+    /** Hidden header */
+    hidden?: boolean;
+    /** Disabled scroll (as action) */
+    disabledScroll?: boolean;
+    /** Enable scroll bar element in header */
+    withScrollBar?: boolean;
+    /** Disables column width change animation **/
+    animationsDisabled?: boolean;
+};
+/** @deprecated */
+export interface IDataTableColumnProps extends DataTableColumnProps, UnknownProperties {
+}
+export type DataTableColumnProps = FlexProps & {
+    /** Unique column name */
+    name?: string;
+    /** Enable sorting for column. And if you are passing a string, you can also set the default sorting */
+    sortable?: boolean | 'desc' | 'asc';
+    /** Enable resize for column
+     * @ignore */
+    resizable?: boolean;
+    /** Fix column on the left o right side of the table */
+    fixed?: 'left' | 'right';
+    /** Fields to control the size of the column */
+    flex?: Property.Flex | 'inherit';
+    /** Add vertical border to the column */
+    vBorders?: boolean;
+    /** Add vertical border to the right side of the cell */
+    borderRight?: boolean;
+    /** Add vertical border to the left side of the cell */
+    borderLeft?: boolean;
+    /**
+     * Enable changing column width with sort icon
+     * @default false
+     */
+    changeSortSize?: boolean;
+    /**
+     * Enable column to use as a column for recalculation width
+     * @default false (By default used first column with maximum width)
+     */
+    sortSizeRecalculation?: boolean;
+};
+/** @deprecated */
+export interface IDataTableBodyProps extends DataTableBodyProps, UnknownProperties {
+}
+export type DataTableBodyProps = BoxProps & {
+    /** Rows table */
+    rows?: DataTableRow[];
+    /** When enabled, only visually acessable rows are rendered.
+     * `tollerance` property controls how many rows outside of viewport are render.
+     * `rowHeight` fixes the rows height if it has known. If not provided, first row node height is measured.
+     * @default { tollerance: 2 }
+     */
+    virtualScroll?: boolean | {
+        tollerance?: number;
+        rowHeight?: number;
+    };
+    /** Allows to redefine rows renderning for a very deep and even fragile customization like building custom virtual scrolling */
+    renderRows?: (props: {
+        rows: DataTableRow[];
+        columns: Column[];
+        renderRow: (row: DataTableRow, details: {
+            dataIndex: number;
+        }) => React.ReactNode;
+    }) => React.ReactNode;
+    /**
+     * Called every time user scrolls area
+     */
+    onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    /** Disabled scroll */
+    disabledScroll?: boolean;
+    /** Disables column width change animation **/
+    animationsDisabled?: boolean;
+    /** Ref for table body container */
+    scrollContainerRef?: React.Ref<HTMLDivElement>;
+};
+/** @deprecated */
+export interface IDataTableRowProps extends DataTableRowProps, UnknownProperties {
+}
+export type DataTableRowProps = BoxProps & {
+    /** Theme for row */
+    theme?: DataTableTheme;
+    /** Sets row state to active*/
+    active?: boolean;
+};
+/** @deprecated */
+export interface IDataTableCellProps extends DataTableCellProps, UnknownProperties {
+}
+export type DataTableCellProps<Name extends string = string> = FlexProps & {
+    /** Unique name for column or columns separated by / */
+    name: Name;
+    /** Theme for cell */
+    theme?: DataTableTheme;
+};
+type DataTableCtx = {
+    getHeadProps: PropGetterFn;
+    getBodyProps: PropGetterFn;
+};
+type IntergalacticDataTableComponent<PropsExtending extends {} = {}> = (<Data extends DataTableData[], Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', DataTableProps<Data> & PropsExtending, DataTableCtx, never>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', DataTableProps>;
+type IntergalacticDataTableRowComponent<PropsExtending extends {} = {}> = (<Data extends DataTableData[], Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.PropsRenderingResultComponentProps<Tag, DataTableRowProps & {
+    /**
+     * That property is ONLY used for the component strict typings. In the component runtime `data` prop set on `<DataTable>...</DataTable> is used.
+     */
+    data?: Data;
+} & PropsExtending, DataTableCtx & {
+    data: Data;
+}, [
+    row: Data[0],
+    index: number
+]>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', DataTableRowProps>;
+type IntergalacticDataTableCellComponent<PropsExtending extends {} = {}> = (<Data extends DataTableData[] = [], Name extends string = string, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.PropsRenderingResultComponentProps<Tag, DataTableCellProps<Name> & {
+    /**
+     * That property is ONLY used for the componenct strict typings. In the component runtime `data` prop set on `<DataTable>...</DataTable> is used.
+     */
+    data?: Data;
+} & PropsExtending, DataTableCtx & {
+    data: Data;
+}, [
+    row: Data[0],
+    index: number
+]>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', DataTableCellProps>;
+declare const DefinitionTable: (<Data extends DataTableData[], Tag extends Intergalactic.InternalTypings.ComponentTag = "div">(props: Intergalactic.InternalTypings.ComponentProps<Tag, "div", DataTableProps<Data> & {}, DataTableCtx, never>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<"div", "div", DataTableProps<UnknownProperties[]>, {}, {}> & {
+    Head: Intergalactic.Component<'div', DataTableHeadProps>;
+    Body: Intergalactic.Component<'div', DataTableBodyProps>;
+    Column: Intergalactic.Component<'div', DataTableColumnProps>;
+    Row: IntergalacticDataTableRowComponent;
+    Cell: IntergalacticDataTableCellComponent;
+};
+export { ROW_GROUP };
+export default DefinitionTable;
+export declare const wrapDataTable: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticDataTableComponent<{}>>, "tag" | "ref"> & {
+    ref: React.Ref<any>;
+    tag: Intergalactic.InternalTypings.ComponentTag;
+} & PropsExtending) => React.ReactNode) => IntergalacticDataTableComponent<PropsExtending>;
+export declare const wrapDataTableRow: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticDataTableRowComponent<{}>>, "tag" | "ref"> & {
+    ref: React.Ref<any>;
+    tag: Intergalactic.InternalTypings.ComponentTag;
+} & PropsExtending) => React.ReactNode) => IntergalacticDataTableRowComponent<PropsExtending>;
+export declare const wrapDataTableCell: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticDataTableCellComponent<{}>>, "tag" | "ref"> & {
+    ref: React.Ref<any>;
+    tag: Intergalactic.InternalTypings.ComponentTag;
+} & PropsExtending) => React.ReactNode) => IntergalacticDataTableCellComponent<PropsExtending>;

package/lib/types/Head.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Component } from '@semcore/core';
+import { Column } from './types';
+export declare const SORT_ICON_WIDTH = 20;
+type AsProps = {
+    $onSortClick: (name: string, event: React.MouseEvent | React.KeyboardEvent) => void;
+    $scrollRef: (instance: unknown) => void;
+    use: 'primary' | 'secondary';
+    columnsChildren: Column[];
+    onResize: ResizeObserverCallback;
+    sticky: boolean;
+    ['data-ui-name']: string;
+    uid?: string;
+    withScrollBar?: boolean;
+    animationsDisabled?: boolean;
+    getI18nText?: (str: string) => string;
+};
+declare class Head extends Component<AsProps> {
+    columns: Column[];
+    static displayName: string;
+    headCellMap: Map<number, HTMLElement | null>;
+    lockedCell: [HTMLElement | null, boolean];
+    sortWrapperRefs: Map<Node, boolean>;
+    defaultWidths: Map<HTMLElement, {
+        minWidth: number;
+        maxWidth: number | null;
+        computedWidth: number;
+        useForRecalculation: boolean;
+    }>;
+    sortableColumnDescribeId(): string;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    onFocusCell: (e: React.FocusEvent<HTMLElement, HTMLElement>) => void;
+    bindHandlerSortClick: (name: string) => (event: React.MouseEvent) => void;
+    bindHandlerKeyDown: (name: string) => (event: React.KeyboardEvent) => void;
+    makeSortRefHandler: (active: boolean) => (ref: HTMLElement | null) => void;
+    makeColumnRefHandler: (column: Column, index: number) => (ref: HTMLElement | null) => void;
+    componentDidUpdate(): void;
+    changeMaxNodeWidth: (diff: number, exceptNode: HTMLElement) => void;
+    backToColumnDefaults: (node: HTMLElement) => void;
+    calculateActiveColumnMinWidth: (node: HTMLElement) => void;
+    renderColumns(columns: Column[], width: number): React.ReactNode[];
+    renderColumn(column: Column, width: number): React.ReactNode;
+    render(): React.ReactNode;
+}
+export default Head;

package/lib/types/index.d.ts

@@ -1,10 +1,2 @@
-import type { Intergalactic } from '@semcore/core';
-import type React from 'react';
-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, SelectableRows, };
-export type { DataTableSort, DataTableData, DataTableProps, DataTableChangeSort, ColumnGroupConfig, ColumnItemConfig, CellRenderProps, };
+export { default } from './DataTable';
+export * from './DataTable';

package/lib/types/translations/__intergalactic-dynamic-locales.d.ts

@@ -1,114 +1,44 @@
 export declare const localizedMessages: {
     de: {
         sortableColumn: string;
-        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
-        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
-        "DataTable.Header.selectAllCheckbox:aria-label": string;
-        "DataTable.allItemsSelected:aria-live": string;
-        "DataTable.allItemsDeselected:aria-live": string;
     };
     en: {
         sortableColumn: string;
-        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
-        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
-        "DataTable.Header.selectAllCheckbox:aria-label": string;
-        "DataTable.allItemsSelected:aria-live": string;
-        "DataTable.allItemsDeselected:aria-live": string;
     };
     es: {
         sortableColumn: string;
-        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
-        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
-        "DataTable.Header.selectAllCheckbox:aria-label": string;
-        "DataTable.allItemsSelected:aria-live": string;
-        "DataTable.allItemsDeselected:aria-live": string;
     };
     fr: {
         sortableColumn: string;
-        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
-        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
-        "DataTable.Header.selectAllCheckbox:aria-label": string;
-        "DataTable.allItemsSelected:aria-live": string;
-        "DataTable.allItemsDeselected:aria-live": string;
     };
     it: {
         sortableColumn: string;
-        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
-        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
-        "DataTable.Header.selectAllCheckbox:aria-label": string;
-        "DataTable.allItemsSelected:aria-live": string;
-        "DataTable.allItemsDeselected:aria-live": string;
     };
     ja: {
         sortableColumn: string;
-        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
-        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
-        "DataTable.Header.selectAllCheckbox:aria-label": string;
-        "DataTable.allItemsSelected:aria-live": string;
-        "DataTable.allItemsDeselected:aria-live": string;
     };
     ko: {
         sortableColumn: string;
-        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
-        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
-        "DataTable.Header.selectAllCheckbox:aria-label": string;
-        "DataTable.allItemsSelected:aria-live": string;
-        "DataTable.allItemsDeselected:aria-live": string;
     };
     nl: {
         sortableColumn: string;
-        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
-        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
-        "DataTable.Header.selectAllCheckbox:aria-label": string;
-        "DataTable.allItemsSelected:aria-live": string;
-        "DataTable.allItemsDeselected:aria-live": string;
     };
     pt: {
         sortableColumn: string;
-        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
-        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
-        "DataTable.Header.selectAllCheckbox:aria-label": string;
-        "DataTable.allItemsSelected:aria-live": string;
-        "DataTable.allItemsDeselected:aria-live": string;
     };
     tr: {
         sortableColumn: string;
-        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
-        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
-        "DataTable.Header.selectAllCheckbox:aria-label": string;
-        "DataTable.allItemsSelected:aria-live": string;
-        "DataTable.allItemsDeselected:aria-live": string;
     };
     vi: {
         sortableColumn: string;
-        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
-        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
-        "DataTable.Header.selectAllCheckbox:aria-label": string;
-        "DataTable.allItemsSelected:aria-live": string;
-        "DataTable.allItemsDeselected:aria-live": string;
     };
     zh: {
         sortableColumn: string;
-        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
-        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
-        "DataTable.Header.selectAllCheckbox:aria-label": string;
-        "DataTable.allItemsSelected:aria-live": string;
-        "DataTable.allItemsDeselected:aria-live": string;
     };
     pl: {
         sortableColumn: string;
-        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
-        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
-        "DataTable.Header.selectAllCheckbox:aria-label": string;
-        "DataTable.allItemsSelected:aria-live": string;
-        "DataTable.allItemsDeselected:aria-live": string;
     };
     sv: {
         sortableColumn: string;
-        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
-        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
-        "DataTable.Header.selectAllCheckbox:aria-label": string;
-        "DataTable.allItemsSelected:aria-live": string;
-        "DataTable.allItemsDeselected:aria-live": string;
     };
 };

package/lib/types/types.d.ts

@@ -0,0 +1,73 @@
+import React from 'react';
+import { ROW_GROUP } from './DataTable';
+import { Property } from 'csstype';
+import { FlexProps } from '@semcore/flex-box';
+export type PseudoChildPropsGetter = (props: {
+    [propName: string]: unknown;
+}, rowData: {
+    [columnName: string]: unknown;
+}, index: number) => {
+    [propName: string]: unknown;
+};
+export type PropsLayer = {
+    childrenPropsGetter?: PseudoChildPropsGetter;
+    [propName: string]: unknown;
+};
+export type SortDirection = 'asc' | 'desc';
+export type Column<Props extends {
+    [propName: string]: unknown;
+} = {
+    [propName: string]: unknown;
+}> = {
+    name: string;
+    active: boolean;
+    width: number;
+    fixed?: 'left' | 'right';
+    resizable?: boolean;
+    sortable?: boolean | SortDirection;
+    sortDirection: SortDirection;
+    varWidth: string;
+    setVar: boolean;
+    data?: unknown;
+    vBorders?: boolean;
+    borderLeft?: boolean;
+    borderRight?: boolean;
+    props: {
+        name: string;
+        ref: React.RefObject<HTMLElement>;
+    } & FlexProps & Partial<{
+        flex: Property.Flex;
+        onClick: (event: React.MouseEvent) => void;
+        onKeyDown: (event: React.KeyboardEvent) => void;
+        forwardRef: React.Ref<HTMLElement>;
+        style: React.CSSProperties;
+        fixed: 'left' | 'right';
+        resizable: boolean;
+        sortable: boolean | SortDirection;
+        sortDirection: SortDirection;
+        vBorders: boolean;
+        borderLeft: Property.BorderLeft;
+        borderRight: Property.BorderLeft;
+        changeSortSize?: boolean;
+        sortSizeRecalculation?: boolean;
+    }> & Props;
+    columns: Column[];
+    parentColumns: Column[];
+};
+export type Cell = Pick<Column, 'name' | 'fixed' | 'data'> & {
+    cssVar: string | string[];
+    cellPropsLayers: PropsLayer[];
+};
+export type RowData<Data extends {
+    [columnName: string]: unknown;
+} = {
+    [columnName: string]: unknown;
+}> = Data & Partial<{
+    name: string;
+    [ROW_GROUP]: RowData[];
+}>;
+export type NestedCells = (Cell | NestedCells)[] & {
+    flatRowData?: RowData;
+};
+export type RowIndex = number;
+export type ColIndex = number;

package/lib/types/utils.d.ts

@@ -0,0 +1,4 @@
+import type { Column } from './types';
+export declare const getScrollOffsetValue: (columns: Column[]) => [leftOffset: number, rightOffset: number];
+export declare const flattenColumns: (columns: Column[]) => Column[];
+export declare const getFixedStyle: (cell: Pick<Column, 'name' | 'fixed'>, columns: Column[]) => [side: "left" | "right", style: string | number] | [side: undefined, style: undefined];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/data-table",
   "description": "Semrush DataTable Component",
-  "version": "4.51.0-prerelease.0",
+  "version": "4.51.0-prerelease.4",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,10 +14,10 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/flex-box": "5.42.0-prerelease.0",
-    "@semcore/icon": "4.63.0-prerelease.0",
-    "@semcore/scroll-area": "5.46.0-prerelease.0",
-    "@semcore/utils": "4.49.0-prerelease.0"
+    "@semcore/flex-box": "5.42.0-prerelease.4",
+    "@semcore/icon": "4.63.0-prerelease.4",
+    "@semcore/scroll-area": "5.46.0-prerelease.4",
+    "@semcore/utils": "4.49.0-prerelease.4"
   },
   "devDependencies": {
     "@types/react": "18.0.21",
@@ -37,7 +37,7 @@
     "csstype": "3.0.8"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.40.0-prerelease.0",
+    "@semcore/core": "^2.40.0-prerelease.4",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },