@semcore/data-table 16.0.0-prerelease.13 → 16.0.0-prerelease.14

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

@@ -0,0 +1,80 @@
+/// <reference types="react" />
+import { DataTableProps, DTUse } from '../DataTable/DataTable.types';
+import { Property } from 'csstype';
+export type CommonColumnType = {
+    /**
+     * Name of column for mapping with data
+     */
+    name: string;
+    /**
+     * Flag to define column as sortable
+     */
+    sortable?: boolean;
+    /**
+     * Fixes column to some side of table
+     */
+    fixed?: 'left' | 'right';
+    /**
+     * Adds vertical border(s)
+     */
+    borders?: 'both' | 'left' | 'right';
+    /**
+     * It manages the `flex-wrap` property
+     */
+    flexWrap?: boolean;
+    /**
+     * It manages the `align-items` property
+     */
+    alignItems?: Property.AlignItems;
+    /**
+     * It manages the `align-content` property
+     */
+    alignContent?: Property.AlignContent;
+    /**
+     * CSS `justify-content` property
+     */
+    justifyContent?: Property.JustifyContent;
+};
+export type DTColumn = CommonColumnType & {
+    ref: React.RefCallback<HTMLElement> & {
+        current: HTMLElement | null;
+    };
+    /**
+     * Width for grid-template-columns
+     */
+    gridColumnWidth: string;
+    /**
+     * Width of column by getBoundaryRect() value
+     */
+    calculatedWidth: number;
+    /**
+     * Height of column by getBoundaryRect() value
+     */
+    calculatedHeight: number;
+    parent?: DTColumn;
+    gridArea?: string;
+};
+export type DataTableColumnProps = CommonColumnType & {
+    /**
+     * Value for grid-template-columns for current column
+     */
+    gtcWidth?: string;
+    /**
+     * Flag for change column size if sorted by it
+     */
+    changeSortSize?: boolean;
+    children?: React.ReactElement[];
+};
+export type ColumnPropsInner = {
+    use: DTUse;
+    borders?: 'both' | 'left' | 'right';
+    sort?: DataTableProps['sort'];
+    onSortChange?: DataTableProps['onSortChange'];
+    uid: string;
+    parent?: DTColumn;
+    sortableColumnDescribeId: string;
+    columnIndex: number;
+    tableRef: React.RefObject<HTMLElement>;
+    gridTemplateColumns: string[];
+    gridTemplateAreas: string[];
+};

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Component } from '@semcore/core';
+import { DataTableGroupProps, GroupPropsInner } from './Group.type';
+export declare class Group extends Component<DataTableGroupProps, {}, {}, [], GroupPropsInner> {
+    static displayName: string;
+    static style: {
+        [key: string]: string;
+    };
+    mounted: boolean;
+    componentDidMount(): void;
+    render(): React.ReactNode;
+}

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

@@ -0,0 +1,10 @@
+import { DTUse } from '../DataTable/DataTable.types';
+export type DataTableGroupProps = {
+    title: string;
+    borders?: 'both' | 'left' | 'right';
+    fixed?: 'left' | 'right';
+};
+export type GroupPropsInner = {
+    use: DTUse;
+    fixedColumnsMap: Map<string, any>;
+};

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

@@ -0,0 +1,8 @@
+import { Component, Intergalactic } from '@semcore/core';
+import { DataTableHeadProps } from './Head.types';
+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: Intergalactic.Component<'div', DataTableColumnProps>;
+    Group: Intergalactic.Component<'div', DataTableGroupProps>;
+};

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { DataTableProps, DTUse } from '../DataTable/DataTable.types';
+import { DTColumn } from './Column.types';
+export type DataTableHeadProps = {
+    /**
+     * Sticky header
+     * @default false
+     */
+    sticky?: boolean;
+    /** Enable scroll bar element in header */
+    withScrollBar?: boolean;
+};
+export type HeadPropsInner = {
+    use: DTUse;
+    tableRef: React.RefObject<HTMLElement>;
+    columns: DTColumn[];
+    compact: boolean;
+    sort?: DataTableProps['sort'];
+    onSortChange?: DataTableProps['onSortChange'];
+    getI18nText: (key: string) => string;
+    uid: string;
+    ref: React.RefObject<HTMLDivElement>;
+    gridAreaGroupMap: Map<number, string>;
+    gridTemplateColumns: string[];
+    gridTemplateAreas: string[];
+};

package/lib/types/index.d.ts

@@ -0,0 +1,4 @@
+import { DataTable, ACCORDION } from './components/DataTable/DataTable';
+export { default } from './DataTable';
+export * from './DataTable';
+export { DataTable, ACCORDION };

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

@@ -0,0 +1,46 @@
+export declare const localizedMessages: {
+    de: {
+        sortableColumn: string;
+    };
+    en: {
+        sortableColumn: string;
+        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
+        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
+    };
+    es: {
+        sortableColumn: string;
+    };
+    fr: {
+        sortableColumn: string;
+    };
+    it: {
+        sortableColumn: string;
+    };
+    ja: {
+        sortableColumn: string;
+    };
+    ko: {
+        sortableColumn: string;
+    };
+    nl: {
+        sortableColumn: string;
+    };
+    pt: {
+        sortableColumn: string;
+    };
+    tr: {
+        sortableColumn: string;
+    };
+    vi: {
+        sortableColumn: string;
+    };
+    zh: {
+        sortableColumn: string;
+    };
+    pl: {
+        sortableColumn: string;
+    };
+    sv: {
+        sortableColumn: 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,8 @@
+import type { DTColumn } from './components/Head/Column.types';
+export declare const getScrollOffsetValue: (columns: DTColumn[]) => [leftOffset: number, rightOffset: number];
+export declare const createCssVarForWidth: (name: string) => string;
+/**
+ * todo: Remove after v16
+ */
+export declare const flattenColumns: (columns: any[]) => any;
+export declare const getFixedStyle: (cell: Pick<DTColumn, 'name' | 'fixed'>, columns: DTColumn[]) => [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": "16.0.0-prerelease.13",
+  "version": "16.0.0-prerelease.14",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,9 +14,10 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/icon": "16.0.0-prerelease.13",
-    "@semcore/flex-box": "16.0.0-prerelease.13",
-    "@semcore/scroll-area": "16.0.0-prerelease.13"
+    "@semcore/icon": "16.0.0-prerelease.14",
+    "@semcore/button": "16.0.0-prerelease.14",
+    "@semcore/flex-box": "16.0.0-prerelease.14",
+    "@semcore/scroll-area": "16.0.0-prerelease.14"
   },
   "devDependencies": {
     "@types/react": "18.0.21",
@@ -36,7 +37,7 @@
     "csstype": "3.0.8"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0-prerelease.13"
+    "@semcore/base-components": "^16.0.0-prerelease.14"
   },
   "repository": {
     "type": "git",
@@ -44,6 +45,6 @@
     "directory": "semcore/data-table"
   },
   "scripts": {
-    "build": "pnpm vite build"
+    "build": "pnpm semcore-builder && pnpm vite build"
   }
 }