@semcore/data-table 2.2.2 → 2.2.5

package/lib/es6/style/data-table.shadow.css

@@ -149,8 +149,9 @@ SRow {
 }
 
 /* DEFAULT THEME */
-SRow[active] SCell:not([theme]),
-SRow:hover SCell:not([theme]) {
+SRow[active] > SCell:not([theme]),
+SRow:hover > SCell:not([theme]),
+SRow SCell:hover + SGroupCell SCell:not([theme]) {
   background-color: #f6f7f7;
 }
 
@@ -159,9 +160,10 @@ SRow[theme='muted'] SCell:not([theme]) {
   background-color: #f2f3f4;
 }
 
-SRow:hover SCell[theme='muted'],
-SRow[theme='muted'][active] SCell:not([theme]),
-SRow[theme='muted']:hover SCell:not([theme]) {
+SRow:hover > SCell[theme='muted'],
+SRow[theme='muted'][active] > SCell:not([theme]),
+SRow[theme='muted']:hover > SCell:not([theme]),
+SRow[theme='muted'] SCell:hover + SGroupCell SCell:not([theme]) {
   background-color: #f6f7f7;
 }
 
@@ -170,9 +172,10 @@ SRow[theme='info'] SCell:not([theme]) {
   background-color: color-mod(var(--light-blue) blend(#fff 80%));
 }
 
-SRow:hover SCell[theme='info'],
-SRow[theme='info'][active] SCell:not([theme]),
-SRow[theme='info']:hover SCell:not([theme]) {
+SRow:hover > SCell[theme='info'],
+SRow[theme='info'][active] > SCell:not([theme]),
+SRow[theme='info']:hover > SCell:not([theme]),
+SRow[theme='info'] SCell:hover + SGroupCell SCell:not([theme]) {
   background-color: color-mod(var(--light-blue) blend(#fff 75%));
 }
 
@@ -181,9 +184,10 @@ SRow[theme='success'] SCell:not([theme]) {
   background-color: color-mod(var(--green) blend(#fff 85%));
 }
 
-SRow:hover SCell[theme='success'],
-SRow[theme='success'][active] SCell:not([theme]),
-SRow[theme='success']:hover SCell:not([theme]) {
+SRow:hover > SCell[theme='success'],
+SRow[theme='success'][active] > SCell:not([theme]),
+SRow[theme='success']:hover > SCell:not([theme]),
+SRow[theme='success'] SCell:hover + SGroupCell SCell:not([theme]) {
   background-color: color-mod(var(--green) blend(#fff 80%));
 }
 
@@ -192,9 +196,10 @@ SRow[theme='warning'] SCell:not([theme]) {
   background-color: color-mod(var(--light-orange) blend(#fff 85%));
 }
 
-SRow:hover SCell[theme='warning'],
-SRow[theme='warning'][active] SCell:not([theme]),
-SRow[theme='warning']:hover SCell:not([theme]) {
+SRow:hover > SCell[theme='warning'],
+SRow[theme='warning'][active] > SCell:not([theme]),
+SRow[theme='warning']:hover > SCell:not([theme]),
+SRow[theme='warning'] SCell:hover + SGroupCell SCell:not([theme]) {
   background-color: color-mod(var(--light-orange) blend(#fff 80%));
 }
 
@@ -203,9 +208,10 @@ SRow[theme='danger'] SCell:not([theme]) {
   background-color: color-mod(var(--red) blend(#fff 90%));
 }
 
-SRow:hover SCell[theme='danger'],
-SRow[theme='danger'][active] SCell:not([theme]),
-SRow[theme='danger']:hover SCell:not([theme]) {
+SRow:hover > SCell[theme='danger'],
+SRow[theme='danger'][active] > SCell:not([theme]),
+SRow[theme='danger']:hover > SCell:not([theme]),
+SRow[theme='danger'] SCell:hover + SGroupCell SCell:not([theme]) {
   background-color: color-mod(var(--red) blend(#fff 85%));
 }
 

package/lib/types/Body.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Component } from '@semcore/core';
+import { RowData, Column, NestedCells, PropsLayer } from './types';
+import ResizeObserver from 'resize-observer-polyfill';
+import syncScroll from '@semcore/utils/lib/syncScroll';
+declare type AsProps = {
+    rows: NestedCells[];
+    columns: Column[];
+    $scrollRef: ReturnType<ReturnType<typeof syncScroll>>;
+    onResize: ResizeObserverCallback;
+    rowPropsLayers: PropsLayer[];
+    use: 'primary' | 'secondary';
+    uniqueKey: string;
+    virtualScroll?: boolean | {
+        tollerance?: number;
+        rowHeight?: number;
+    };
+};
+declare type State = {
+    rowHeight: number | undefined;
+    scrollAreaHeight: undefined | number;
+    scrollOffset: number;
+};
+declare class Body extends Component<AsProps, State> {
+    state: State;
+    firstRowRef: React.RefObject<HTMLElement>;
+    firstRowResizeObserver: ResizeObserver | null;
+    getRowHeight: () => number | undefined;
+    renderCells(cells: NestedCells, rowData: RowData, index: number): React.ReactNode[];
+    renderRow(cells: NestedCells, { dataIndex, topOffset, nested }: {
+        dataIndex: number;
+        topOffset?: number;
+        nested: boolean;
+    }): React.ReactNode;
+    renderRows(rows: NestedCells[]): React.ReactNode[];
+    renderVirtualizedRows(rows: NestedCells[]): React.ReactNode[];
+    handleFirstRowResize: {
+        (...args: any[]): void;
+        cancel(): void;
+    };
+    handleScrollAreaResize: {
+        (...args: any[]): void;
+        cancel(): void;
+    };
+    handleScrollAreaScroll: (event: React.SyntheticEvent<HTMLElement>) => void;
+    setupRowSizeObserver: () => void;
+    componentWillUnmount(): void;
+    render(): React.ReactNode;
+}
+export default Body;

package/lib/types/DataTable.d.ts

@@ -0,0 +1,100 @@
+import React from 'react';
+import { PropGetterFn } from '@semcore/core';
+import { IBoxProps, IFlexProps } from '@semcore/flex-box';
+declare const ROW_GROUP: unique symbol;
+declare type CProps<Props, Ctx = {}, UCProps = {}> = Props & {
+    children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) | React.ReactNode;
+};
+declare type ReturnEl = React.ReactElement | null;
+declare type ChildRenderFn<Props> = Props & {
+    children?: (props: Props, column: DataTableData, index: number) => {
+        [key: string]: unknown;
+    };
+};
+export declare type DataTableData = {
+    [key: string]: unknown;
+};
+export declare type DataTableSort = [string, 'desc' | 'asc'];
+export declare type DataTableTheme = 'muted' | 'info' | 'success' | 'warning' | 'danger';
+export declare type DataTableUse = 'primary' | 'secondary';
+export declare type DataTableRow = DataTableCell[];
+export declare type DataTableCell = {
+    /** Name of column */
+    name: string;
+    /** Data of column */
+    data: React.ReactNode;
+    [key: string]: unknown;
+};
+export interface IDataTableProps extends IBoxProps {
+    /** Theme for table
+     * @default primary
+     * */
+    use?: DataTableUse;
+    /** Data for table */
+    data?: DataTableData[];
+    /** Active sort object */
+    sort?: DataTableSort;
+    /** Handler call when will request change sort */
+    onSortChange?: (sort: DataTableSort, e?: React.SyntheticEvent) => void;
+    /** Field name in one data entity that is unique accross all set of data
+     * @default id
+     */
+    uniqueKey?: string;
+}
+export interface IDataTableHeadProps extends IBoxProps {
+    /** Sticky header table
+     * @deprecated
+     * */
+    sticky?: boolean;
+    /** Hidden header */
+    hidden?: boolean;
+}
+export interface IDataTableColumnProps extends IFlexProps {
+    /** Unique name column */
+    name?: string;
+    /** Enable sort for column also if you pass string you can set default sort */
+    sortable?: boolean | 'desc' | 'asc';
+    /** Enable resize for column
+     * @ignore */
+    resizable?: boolean;
+    /** Fixed column on the left/right */
+    fixed?: 'left' | 'right';
+}
+export interface IDataTableBodyProps extends IBoxProps {
+    /** 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 known. If not provided, first row node height is measured.
+     * @default { tollerance: 2 }
+     */
+    virtualScroll?: boolean | {
+        tollerance?: number;
+        rowHeight?: number;
+    };
+}
+export interface IDataTableRowProps extends IBoxProps {
+    /** Theme for row */
+    theme?: DataTableTheme;
+    /** Displays row as active/hover */
+    active?: boolean;
+}
+export interface IDataTableCellProps extends IFlexProps {
+    /** Unique name column or columns separated by / */
+    name: string;
+    /** Theme for cell */
+    theme?: DataTableTheme;
+}
+interface IDataTableCtx {
+    getHeadProps: PropGetterFn;
+    getBodyProps: PropGetterFn;
+}
+declare const DefinitionTable: (<T>(props: CProps<IDataTableProps & T, IDataTableCtx, {}>) => ReturnEl) & {
+    Head: <T_1>(props: IDataTableHeadProps & T_1) => ReturnEl;
+    Body: <T_2>(props: IDataTableBodyProps & T_2) => ReturnEl;
+    Column: <T_3>(props: IDataTableColumnProps & T_3) => ReturnEl;
+    Cell: <T_4>(props: ChildRenderFn<IDataTableCellProps & T_4>) => ReturnEl;
+    Row: <T_5>(props: ChildRenderFn<IDataTableRowProps & T_5>) => ReturnEl;
+};
+export { ROW_GROUP };
+export default DefinitionTable;

package/lib/types/Head.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Component } from '@semcore/core';
+import type { Column } from './types';
+import 'resize-observer-polyfill';
+declare 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;
+};
+declare class Head extends Component<AsProps> {
+    columns: Column[];
+    static displayName: string;
+    bindHandlerSortClick: (name: string) => (event: React.MouseEvent) => void;
+    bindHandlerKeyDown: (name: string) => (event: React.KeyboardEvent) => 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

@@ -0,0 +1,2 @@
+export { default } from './DataTable';
+export * from './DataTable';

package/lib/types/types.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { ROW_GROUP } from './DataTable';
+export declare type PseudoChildPropsGetter = (props: {
+    [propName: string]: unknown;
+}, rowData: {
+    [columnName: string]: unknown;
+}, index: number) => {
+    [propName: string]: unknown;
+};
+export declare type PropsLayer = {
+    childrenPropsGetter?: PseudoChildPropsGetter;
+    [propName: string]: unknown;
+};
+export declare type SortDirection = 'asc' | 'desc';
+export declare 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;
+    cssVar: string | string[];
+    data?: unknown;
+    props: {
+        name: string;
+    } & Partial<{
+        onClick: (event: React.MouseEvent) => void;
+        onKeyDown: (event: React.KeyboardEvent) => void;
+        ref: React.RefObject<HTMLElement>;
+        style: React.CSSProperties;
+        fixed: 'left' | 'right';
+        children: React.ReactNode[];
+        resizable: boolean;
+        sortable: boolean | SortDirection;
+        sortDirection: SortDirection;
+    }> & Props;
+    columns: Column[];
+};
+export declare type Cell = Pick<Column, 'name' | 'cssVar' | 'fixed' | 'data'> & {
+    cellPropsLayers: PropsLayer[];
+};
+export declare type RowData<Data extends {
+    [columnName: string]: unknown;
+} = {
+    [columnName: string]: unknown;
+}> = Data & Partial<{
+    name: string;
+    [ROW_GROUP]: RowData[];
+}>;
+export declare type NestedCells = (Cell | NestedCells)[] & {
+    flatRowData?: RowData;
+};

package/lib/types/utils.d.ts

@@ -0,0 +1,6 @@
+import type { Column } from './types';
+export declare const getScrollOffsetValue: (columns: Column[]) => [leftOffset: number, rightOffset: number];
+export declare const flattenColumns: (columns: Column[]) => Column<{
+    [propName: string]: unknown;
+}>[];
+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": "2.2.2",
+  "version": "2.2.5",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -9,7 +9,7 @@
   "author": "Roman Lysov <r.lysov@semrush.com>",
   "license": "MIT",
   "scripts": {
-    "build": "build --source=js",
+    "build": "build --source=ts",
     "test": "jest"
   },
   "dependencies": {

package/src/Body.tsx

@@ -55,7 +55,12 @@ class Body extends Component<AsProps, State> {
     const { styles, columns, use } = this.asProps;
     return cells.map((cell) => {
       if (Array.isArray(cell)) {
-        return <div>{this.renderRows(cell as NestedCells[])}</div>;
+        const SGroupCell = 'div';
+        return sstyled(styles)(
+          <SGroupCell data-ui-name="group-cell">
+            {this.renderRows(cell as NestedCells[])}
+          </SGroupCell>,
+        );
       } else {
         const column = columns.find((c) => c.name === cell.name);
         const [name, value] = getFixedStyle(cell, columns);

package/src/Head.tsx

@@ -8,7 +8,7 @@ import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
 import { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';
 import type { Column } from './types';
 import logger from '@semcore/utils/lib/logger';
-import type ResizeObserverCallback from 'resize-observer-polyfill';
+import 'resize-observer-polyfill';
 
 import scrollStyles from './style/scroll-area.shadow.css';
 

package/src/style/data-table.shadow.css

@@ -149,8 +149,9 @@ SRow {
 }
 
 /* DEFAULT THEME */
-SRow[active] SCell:not([theme]),
-SRow:hover SCell:not([theme]) {
+SRow[active] > SCell:not([theme]),
+SRow:hover > SCell:not([theme]),
+SRow SCell:hover + SGroupCell SCell:not([theme]) {
   background-color: #f6f7f7;
 }
 
@@ -159,9 +160,10 @@ SRow[theme='muted'] SCell:not([theme]) {
   background-color: #f2f3f4;
 }
 
-SRow:hover SCell[theme='muted'],
-SRow[theme='muted'][active] SCell:not([theme]),
-SRow[theme='muted']:hover SCell:not([theme]) {
+SRow:hover > SCell[theme='muted'],
+SRow[theme='muted'][active] > SCell:not([theme]),
+SRow[theme='muted']:hover > SCell:not([theme]),
+SRow[theme='muted'] SCell:hover + SGroupCell SCell:not([theme]) {
   background-color: #f6f7f7;
 }
 
@@ -170,9 +172,10 @@ SRow[theme='info'] SCell:not([theme]) {
   background-color: color-mod(var(--light-blue) blend(#fff 80%));
 }
 
-SRow:hover SCell[theme='info'],
-SRow[theme='info'][active] SCell:not([theme]),
-SRow[theme='info']:hover SCell:not([theme]) {
+SRow:hover > SCell[theme='info'],
+SRow[theme='info'][active] > SCell:not([theme]),
+SRow[theme='info']:hover > SCell:not([theme]),
+SRow[theme='info'] SCell:hover + SGroupCell SCell:not([theme]) {
   background-color: color-mod(var(--light-blue) blend(#fff 75%));
 }
 
@@ -181,9 +184,10 @@ SRow[theme='success'] SCell:not([theme]) {
   background-color: color-mod(var(--green) blend(#fff 85%));
 }
 
-SRow:hover SCell[theme='success'],
-SRow[theme='success'][active] SCell:not([theme]),
-SRow[theme='success']:hover SCell:not([theme]) {
+SRow:hover > SCell[theme='success'],
+SRow[theme='success'][active] > SCell:not([theme]),
+SRow[theme='success']:hover > SCell:not([theme]),
+SRow[theme='success'] SCell:hover + SGroupCell SCell:not([theme]) {
   background-color: color-mod(var(--green) blend(#fff 80%));
 }
 
@@ -192,9 +196,10 @@ SRow[theme='warning'] SCell:not([theme]) {
   background-color: color-mod(var(--light-orange) blend(#fff 85%));
 }
 
-SRow:hover SCell[theme='warning'],
-SRow[theme='warning'][active] SCell:not([theme]),
-SRow[theme='warning']:hover SCell:not([theme]) {
+SRow:hover > SCell[theme='warning'],
+SRow[theme='warning'][active] > SCell:not([theme]),
+SRow[theme='warning']:hover > SCell:not([theme]),
+SRow[theme='warning'] SCell:hover + SGroupCell SCell:not([theme]) {
   background-color: color-mod(var(--light-orange) blend(#fff 80%));
 }
 
@@ -203,9 +208,10 @@ SRow[theme='danger'] SCell:not([theme]) {
   background-color: color-mod(var(--red) blend(#fff 90%));
 }
 
-SRow:hover SCell[theme='danger'],
-SRow[theme='danger'][active] SCell:not([theme]),
-SRow[theme='danger']:hover SCell:not([theme]) {
+SRow:hover > SCell[theme='danger'],
+SRow[theme='danger'][active] > SCell:not([theme]),
+SRow[theme='danger']:hover > SCell:not([theme]),
+SRow[theme='danger'] SCell:hover + SGroupCell SCell:not([theme]) {
   background-color: color-mod(var(--red) blend(#fff 85%));
 }