@semcore/data-table 16.0.0-prerelease.17 → 16.0.0-prerelease.19

package/lib/esm/components/Head/Head.mjs

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
@@ -12,6 +13,7 @@ import { ScreenReaderOnly, Box } from "@semcore/base-components";
 import { Column } from "./Column.mjs";
 import { Group } from "./Group.mjs";
 import { getFixedStyle } from "../../utils.mjs";
+import { DataTable } from "../DataTable/DataTable.mjs";
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
@@ -84,7 +86,8 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
         use,
         "aria-colindex": index + 1,
         ref: function ref(node) {
-          return column.ref(node);
+          var _column$ref;
+          return (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : _column$ref.call(column, node);
         },
         style: style2,
         gridArea: column.gridArea,
@@ -106,11 +109,26 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
     value: function render() {
       var _ref = this.asProps, _ref2;
       var SHead = Box;
-      var _this$asProps3 = this.asProps, Children = _this$asProps3.Children, styles = _this$asProps3.styles, getI18nText = _this$asProps3.getI18nText;
+      var _this$asProps3 = this.asProps, Children = _this$asProps3.Children, styles = _this$asProps3.styles, getI18nText = _this$asProps3.getI18nText, children = _this$asProps3.children, treeColumns = _this$asProps3.treeColumns;
       return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SHead, _ref2.cn("SHead", _objectSpread({}, assignProps({
         "role": "row",
         "aria-rowindex": 1
-      }, _ref))), /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {}))), /* @__PURE__ */ React.createElement(ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {
+      }, _ref))), children ? /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, treeColumns.map(function(column, i) {
+        if ("columns" in column) {
+          var _column$columns;
+          return /* @__PURE__ */ React.createElement(DataTable.Head.Group, _extends({
+            key: column.name
+          }, column, {
+            name: (_column$columns = column.columns) === null || _column$columns === void 0 ? void 0 : _column$columns.map(function(c) {
+              return c.name;
+            }).join("/"),
+            title: ""
+          }));
+        }
+        return /* @__PURE__ */ React.createElement(DataTable.Head.Column, _extends({
+          key: column.name
+        }, column));
+      }))), /* @__PURE__ */ React.createElement(ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {
         "aria-hidden": true,
         "id": this.sortableColumnDescribeId()
       }), getI18nText("sortableColumn")));

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { DTRow, DTRows } from './Row.types';
+import { DTRow } from './Row.types';
 import { DTColumn } from '../Head/Column.types';
-import { DTUse } from '../DataTable/DataTable.types';
-type CellRenderProps = {
+import { DataTableData, DTUse, VirtualScroll } from '../DataTable/DataTable.types';
+export type CellRenderProps = {
     dataKey: string;
     row: DTRow;
     column: DTColumn;
@@ -16,11 +16,9 @@ type CellRenderProps = {
 };
 export type DataTableBodyProps = {
     renderCell?: (props: CellRenderProps) => React.ReactNode | Record<string, any>;
-    virtualScroll?: boolean;
 };
-export type BodyPropsInner = {
-    rows: DTRows;
-    flatRows: DTRow[];
+export type BodyPropsInner<D extends DataTableData> = {
+    data: D;
     columns: DTColumn[];
     use: DTUse;
     compact: boolean;
@@ -32,5 +30,12 @@ export type BodyPropsInner = {
     expandedRows: number[];
     onExpandRow: (rowIndex: number) => void;
     spinnerRef: React.RefObject<HTMLDivElement>;
+    tableContainerRef: React.RefObject<HTMLDivElement>;
+    tableRef: React.RefObject<HTMLDivElement>;
+    scrollTop: number;
+    scrollDirection: 'down' | 'up';
+    virtualScroll?: VirtualScroll;
+    hasGroups: boolean;
+    uid: string;
+    renderCell?: (props: CellRenderProps) => React.ReactNode | Record<string, any>;
 };
-export {};

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

@@ -7,8 +7,11 @@ export type DataTableCellProps = {
     rowIndex: number;
     column: DTColumn;
     columnIndex: number;
+    gridRowIndex: number;
     children?: React.ReactNode;
 };
 export type CellPropsInner = {
     use: DTUse;
+    virtualScroll: boolean;
+    tableRef: React.RefObject<HTMLDivElement>;
 };

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

@@ -2,14 +2,17 @@
 import { DTValue, DTUse, DataTableData } from '../DataTable/DataTable.types';
 import { DTColumn } from '../Head/Column.types';
 import { MergedColumnsCell, MergedRowsCell } from './MergedCells';
-import { ACCORDION } from '../DataTable/DataTable';
+import { ACCORDION, UNIQ_ROW_KEY } from '../DataTable/DataTable';
 export type DTRow = {
+    [UNIQ_ROW_KEY]: string;
     [key: string]: DTValue | MergedRowsCell | MergedColumnsCell;
     [ACCORDION]?: React.ReactNode | DataTableData | undefined;
 };
 export type DTRows = Array<DTRow | DTRow[]>;
 export type DataTableRowProps = {
     row: DTRow;
+    offset?: number;
+    rowMarginTop?: React.CSSProperties['marginTop'];
 };
 export type RowPropsInner = {
     use: DTUse;
@@ -21,9 +24,9 @@ export type RowPropsInner = {
     columns: DTColumn[];
     row: DTRow | DTRow[];
     rows: DTRows;
-    flatRows: DTRow[];
     rowIndex: number;
     ariaRowIndex: number;
+    gridRowIndex: number;
     expandedRows: number[];
     onExpandRow: (expandedRowIndex: number) => void;
     gridTemplateAreas: string[];

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

@@ -3,7 +3,8 @@ import { Head } from '../Head/Head';
 import { Body } from '../Body/Body';
 export declare const ACCORDION: unique symbol;
 export declare const ROW_GROUP: unique symbol;
-export declare const DataTable: (<Data extends DataTableData, Tag extends import("@semcore/core").Intergalactic.InternalTypings.ComponentTag = "div">(props: import("@semcore/core").Intergalactic.InternalTypings.ComponentProps<Tag, "div", DataTableProps<Data>, never, never[]>) => import("@semcore/core").Intergalactic.InternalTypings.ComponentRenderingResults) & import("@semcore/core").Intergalactic.InternalTypings.ComponentAdditive<"div", "div", DataTableProps<any>, {}, {}> & {
+export declare const UNIQ_ROW_KEY: unique symbol;
+export declare const DataTable: (<Data extends DataTableData, Tag extends import("@semcore/core").Intergalactic.InternalTypings.ComponentTag = "div">(props: import("@semcore/core").Intergalactic.InternalTypings.EfficientOmit<import("@semcore/core").Intergalactic.InternalTypings.ComponentProps<Tag, "div", DataTableProps<Data>, never, never[]>, "children" | "tag">) => import("@semcore/core").Intergalactic.InternalTypings.ComponentRenderingResults) & import("@semcore/core").Intergalactic.InternalTypings.ComponentAdditive<"div", "div", DataTableProps<any>, {}, {}> & {
     Head: typeof Head;
     Body: typeof Body;
 };

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

@@ -2,6 +2,9 @@
 import { Intergalactic } from '@semcore/core';
 import { BoxProps } from '@semcore/base-components';
 import { ACCORDION, ROW_GROUP } from './DataTable';
+import { DataTableColumnProps } from '../Head/Column.types';
+import { CellRenderProps } from '../Body/Body.types';
+import Tooltip from '@semcore/tooltip';
 /**
  * Datatable must have an accessible name (aria-table-name).
  * It should describe table content.
@@ -52,13 +55,47 @@ export type DataTableProps<D extends DataTableData> = DataTableAriaProps & Sizes
      * Flag for showing spinner on table body
      */
     loading?: boolean;
-    children?: any;
+    children?: never;
     /**
      *
      */
     expandedRows?: number[];
+    virtualScroll?: VirtualScroll;
+    columns: ColumnsConfig;
+    headerProps?: {
+        /**
+         * Sticky header
+         * @default false
+         */
+        sticky?: boolean;
+        /**
+         * offset for sticky header
+         */
+        top?: number;
+        /** Enable scroll bar element in header */
+        withScrollBar?: boolean;
+    };
+    renderCell?: (props: CellRenderProps) => React.ReactNode | Record<string, any>;
+};
+export type ColumnItemConfig = Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentProps<'div' | typeof Tooltip, 'div', DataTableColumnProps, {}, [
+]>, 'children'> & {
+    children: React.ReactNode | React.FC;
+};
+export type ColumnGroupConfig = {
+    borders?: 'both' | 'left' | 'right';
+    fixed?: 'left' | 'right';
+    children: React.ReactNode;
+    columns: ColumnItemConfig[];
+};
+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, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', DataTableProps<Data>>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', DataTableProps<any>>;
+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 {};

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DataTableData, DataTableProps, DTUse } from '../DataTable/DataTable.types';
+import { ColumnGroupConfig, DataTableData, DataTableProps, DTUse } from '../DataTable/DataTable.types';
 import { Property } from 'csstype';
 export type CommonColumnType = {
     /**
@@ -51,7 +51,9 @@ export type DTColumn = CommonColumnType & {
      * Height of column by getBoundaryRect() value
      */
     calculatedHeight: number;
-    parent?: DTColumn;
+    parent?: DTColumn | ColumnGroupConfig;
+    columns?: DTColumn[];
+    children: React.ReactNode;
     gridArea?: string;
 };
 export type DataTableColumnProps = CommonColumnType & {
@@ -63,7 +65,6 @@ export type DataTableColumnProps = CommonColumnType & {
      * Flag for change column size if sorted by it
      */
     changeSortSize?: boolean;
-    children?: React.ReactElement[];
 };
 export type ColumnPropsInner<D extends DataTableData> = {
     use: DTUse;

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

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import { Component } from '@semcore/core';
 import { DataTableGroupProps, GroupPropsInner } from './Group.type';
-export declare class Group extends Component<DataTableGroupProps, {}, {}, [], GroupPropsInner> {
+export declare class Group extends Component<DataTableGroupProps, {}, {}, typeof Group.enhance, GroupPropsInner> {
     static displayName: string;
     static style: {
         [key: string]: string;
     };
+    static enhance: readonly [(props: any) => {
+        uid: string;
+    }];
     componentDidMount(): void;
+    get groupId(): string;
     render(): React.ReactNode;
 }

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

@@ -1,11 +1,13 @@
 import { DTUse } from '../DataTable/DataTable.types';
 import { ReactElement } from 'react';
-import { DataTableColumnProps } from './Column.types';
+import { DataTableColumnProps, DTColumn } from './Column.types';
 export type DataTableGroupProps = {
     title: React.ReactNode;
     borders?: 'both' | 'left' | 'right';
     fixed?: 'left' | 'right';
     children: Array<ReactElement<DataTableColumnProps>>;
+    name?: string;
+    columns?: DTColumn[];
 };
 export type GroupPropsInner = {
     use: DTUse;

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

@@ -1,11 +1,98 @@
+import * as React from 'react';
 import { Intergalactic } from '@semcore/core';
 import { DataTableHeadProps } from './Head.types';
 import Tooltip from '@semcore/tooltip';
 import { DataTableColumnProps } from './Column.types';
 import { DataTableGroupProps } from './Group.type';
 export declare const Head: (<Tag extends Intergalactic.InternalTypings.ComponentTag = "div", Props extends DataTableHeadProps = DataTableHeadProps>(props: Intergalactic.InternalTypings.ComponentProps<Tag, "div", Props, {}, never[]>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<"div", Intergalactic.InternalTypings.ComponentTag, DataTableHeadProps, {}, never[]> & {
-    Column: (props: Intergalactic.InternalTypings.ComponentProps<'div' | typeof Tooltip, 'div', DataTableColumnProps, {}, [
-    ]>) => Intergalactic.InternalTypings.ComponentRenderingResults;
-    Group: (props: Intergalactic.InternalTypings.ComponentProps<'div' | typeof Tooltip, 'div', DataTableGroupProps, {}, [
-    ]>) => Intergalactic.InternalTypings.ComponentRenderingResults;
+    Column: <Tag_1 extends "div" | ((<Tag_2 extends Intergalactic.InternalTypings.ComponentTag = "div", Props_1 extends import("@semcore/tooltip").TooltipProps = import("@semcore/tooltip").TooltipProps>(props: Intergalactic.InternalTypings.ComponentProps<Tag_2, "div", Props_1, import("@semcore/base-components").PopperContext, never[]>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<"div", Intergalactic.InternalTypings.ComponentTag, import("@semcore/tooltip").TooltipProps, import("@semcore/base-components").PopperContext, never[]> & {
+        Trigger: Intergalactic.Component<"div", import("@semcore/base-components").PopperTriggerProps, import("@semcore/tooltip").TooltipTriggerContext, never[]>;
+        Popper: Intergalactic.Component<"div", Intergalactic.InternalTypings.EfficientOmit<import("@semcore/base-components").PopperProps, "interaction"> & import("@semcore/core").StyledProps & {
+            display?: import("csstype").Property.Display | undefined;
+            inline?: boolean | undefined;
+            boxSizing?: boolean | "border-box" | undefined;
+            flex?: import("csstype").Property.Flex<string> | undefined;
+            m?: string | number | undefined;
+            mt?: string | number | undefined;
+            mr?: string | number | undefined;
+            mb?: string | number | undefined;
+            ml?: string | number | undefined;
+            mx?: string | number | undefined;
+            my?: string | number | undefined;
+            p?: string | number | undefined;
+            pt?: string | number | undefined;
+            pr?: string | number | undefined;
+            pb?: string | number | undefined;
+            pl?: string | number | undefined;
+            px?: string | number | undefined;
+            py?: string | number | undefined;
+            w?: string | number | undefined;
+            wMin?: string | number | undefined;
+            wMax?: string | number | undefined;
+            h?: string | number | undefined;
+            hMin?: string | number | undefined;
+            hMax?: string | number | undefined;
+            scaleIndent?: number | undefined;
+            innerOutline?: boolean | undefined;
+            css?: React.CSSProperties | undefined;
+            position?: import("csstype").Property.Position | undefined;
+            top?: string | number | undefined;
+            left?: string | number | undefined;
+            bottom?: string | number | undefined;
+            right?: string | number | undefined;
+            zIndex?: number | undefined;
+            children?: React.ReactNode;
+        } & {
+            disableEnforceFocus?: boolean | undefined;
+        } & {
+            title?: React.ReactNode;
+            theme?: "default" | "warning" | "invert" | undefined;
+            interaction?: "none" | "hover" | "click" | "focus" | import("@semcore/base-components").eventInteraction | undefined;
+        } & import("@semcore/tooltip").ArrowCustom, import("@semcore/base-components").PopperContext, never[]>;
+    }) = "div">(props: Intergalactic.InternalTypings.ComponentProps<Tag_1, "div", DataTableColumnProps, {}, []>) => Intergalactic.InternalTypings.ComponentRenderingResults;
+    Group: <Tag_3 extends "div" | ((<Tag_2 extends Intergalactic.InternalTypings.ComponentTag = "div", Props_1 extends import("@semcore/tooltip").TooltipProps = import("@semcore/tooltip").TooltipProps>(props: Intergalactic.InternalTypings.ComponentProps<Tag_2, "div", Props_1, import("@semcore/base-components").PopperContext, never[]>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<"div", Intergalactic.InternalTypings.ComponentTag, import("@semcore/tooltip").TooltipProps, import("@semcore/base-components").PopperContext, never[]> & {
+        Trigger: Intergalactic.Component<"div", import("@semcore/base-components").PopperTriggerProps, import("@semcore/tooltip").TooltipTriggerContext, never[]>;
+        Popper: Intergalactic.Component<"div", Intergalactic.InternalTypings.EfficientOmit<import("@semcore/base-components").PopperProps, "interaction"> & import("@semcore/core").StyledProps & {
+            display?: import("csstype").Property.Display | undefined;
+            inline?: boolean | undefined;
+            boxSizing?: boolean | "border-box" | undefined;
+            flex?: import("csstype").Property.Flex<string> | undefined;
+            m?: string | number | undefined;
+            mt?: string | number | undefined;
+            mr?: string | number | undefined;
+            mb?: string | number | undefined;
+            ml?: string | number | undefined;
+            mx?: string | number | undefined;
+            my?: string | number | undefined;
+            p?: string | number | undefined;
+            pt?: string | number | undefined;
+            pr?: string | number | undefined;
+            pb?: string | number | undefined;
+            pl?: string | number | undefined;
+            px?: string | number | undefined;
+            py?: string | number | undefined;
+            w?: string | number | undefined;
+            wMin?: string | number | undefined;
+            wMax?: string | number | undefined;
+            h?: string | number | undefined;
+            hMin?: string | number | undefined;
+            hMax?: string | number | undefined;
+            scaleIndent?: number | undefined;
+            innerOutline?: boolean | undefined;
+            css?: React.CSSProperties | undefined;
+            position?: import("csstype").Property.Position | undefined;
+            top?: string | number | undefined;
+            left?: string | number | undefined;
+            bottom?: string | number | undefined;
+            right?: string | number | undefined;
+            zIndex?: number | undefined;
+            children?: React.ReactNode;
+        } & {
+            disableEnforceFocus?: boolean | undefined;
+        } & {
+            title?: React.ReactNode;
+            theme?: "default" | "warning" | "invert" | undefined;
+            interaction?: "none" | "hover" | "click" | "focus" | import("@semcore/base-components").eventInteraction | undefined;
+        } & import("@semcore/tooltip").ArrowCustom, import("@semcore/base-components").PopperContext, never[]>;
+    }) = "div">(props: Intergalactic.InternalTypings.ComponentProps<Tag_3, "div", DataTableGroupProps, {}, []>) => Intergalactic.InternalTypings.ComponentRenderingResults;
 };

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

@@ -18,6 +18,7 @@ export type HeadPropsInner<D extends DataTableData> = {
     use: DTUse;
     tableRef: React.RefObject<HTMLElement>;
     columns: DTColumn[];
+    treeColumns: DTColumn[];
     compact: boolean;
     sort?: DataTableProps<D>['sort'];
     onSortChange?: DataTableProps<D>['onSortChange'];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/data-table",
   "description": "Semrush DataTable Component",
-  "version": "16.0.0-prerelease.17",
+  "version": "16.0.0-prerelease.19",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,11 +14,12 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/icon": "16.0.0-prerelease.17",
-    "@semcore/button": "16.0.0-prerelease.17",
-    "@semcore/flex-box": "16.0.0-prerelease.17",
-    "@semcore/scroll-area": "16.0.0-prerelease.17",
-    "@semcore/spin": "16.0.0-prerelease.17"
+    "@semcore/icon": "16.0.0-prerelease.19",
+    "@semcore/button": "16.0.0-prerelease.19",
+    "@semcore/flex-box": "16.0.0-prerelease.19",
+    "@semcore/scroll-area": "16.0.0-prerelease.19",
+    "@semcore/spin": "16.0.0-prerelease.19",
+    "@semcore/tooltip": "16.0.0-prerelease.19"
   },
   "devDependencies": {
     "@types/react": "18.0.21",
@@ -38,7 +39,7 @@
     "csstype": "3.0.8"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0-prerelease.17"
+    "@semcore/base-components": "^16.0.0-prerelease.19"
   },
   "repository": {
     "type": "git",