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

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

@@ -0,0 +1,14 @@
+import { DTRow } from './Row.types';
+import { DTUse } from '../DataTable/DataTable.types';
+import { DTColumn, CommonColumnType } from '../Head/Column.types';
+export type DataTableCellProps = CommonColumnType & {
+    name: string;
+    row: DTRow;
+    columnIndex: number;
+    column: DTColumn;
+    rowIndex: number;
+    gridArea?: string;
+};
+export type CellPropsInner = {
+    use: DTUse;
+};

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

@@ -0,0 +1,10 @@
+export declare class MergedRowsCell {
+    readonly value: any;
+    readonly rowsCount: number;
+    constructor(value: any, size: number);
+}
+export declare class MergedColumnsCell {
+    readonly value: any;
+    readonly columnsCount: number;
+    constructor(value: any, size: number);
+}

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

@@ -0,0 +1,3 @@
+export declare const Row: import("@semcore/core/lib/coreFactory").ComponentType<unknown, {}, {}, {
+    [key: string]: (arg: unknown) => void;
+}, null>;

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

@@ -0,0 +1,24 @@
+import { DTValue, DTKey, DTUse } from '../DataTable/DataTable.types';
+import { DTColumn } from '../Head/Column.types';
+import { MergedColumnsCell, MergedRowsCell } from './MergedCells';
+export type DTRow = Record<DTKey, DTValue | MergedRowsCell | MergedColumnsCell>;
+export type DataTableRowProps = {
+    columns: DTColumn[];
+    row: DTRow;
+    rows: DTRow[];
+    rowIndex: number;
+    headerRows: number;
+    expandedRows?: number[];
+    onExpandRow?: (expandedRowIndex: number) => void;
+};
+export type RowPropsInner = {
+    use: DTUse;
+    /**
+     * Expanded flag for rows with accordion
+     * @default false
+     */
+    expanded?: boolean;
+    gridTemplateAreas: string;
+    gridTemplateColumns: string;
+    accordionDataGridArea: string;
+};

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

@@ -0,0 +1,9 @@
+import { Intergalactic } from '@semcore/core';
+import { DataTableProps } from './DataTable.types';
+import { Head } from '../Head/Head';
+import { Body } from '../Body/Body';
+export declare const ACCORDION: unique symbol;
+export declare const DataTable: (<Tag extends Intergalactic.InternalTypings.ComponentTag = "div", Props extends DataTableProps = DataTableProps>(props: Intergalactic.InternalTypings.ComponentProps<Tag, "div", Props, {}, never[]>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<"div", Intergalactic.InternalTypings.ComponentTag, DataTableProps, {}, never[]> & {
+    Head: typeof Head;
+    Body: typeof Body;
+};

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

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import { Intergalactic } from '@semcore/core';
+import { BoxProps } from '@semcore/base-components';
+/**
+ * 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;
+}>;
+export type SortDirection = 'asc' | 'desc';
+export type DataTableSort<Column = string> = [sortBy: Column, sortDirection: SortDirection];
+export type DTKey = string | symbol;
+export type DTValue = string | number | boolean;
+export type DataTableData = Array<Record<DTKey, any>>;
+export type DTUse = 'primary' | 'secondary';
+type Sizes = Pick<BoxProps, 'w' | 'wMax' | 'wMin' | 'h' | 'hMax' | 'hMin'>;
+export type DataTableProps = DataTableAriaProps & Sizes & {
+    /** Data for table */
+    data: DataTableData;
+    /** 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;
+    /** Handler call when request will change sort */
+    onSortChange?: (sort: DataTableSort, e?: React.SyntheticEvent) => void;
+    /**
+     *
+     * @default auto
+     */
+    defaultGridTemplateColumnWidth?: 'auto' | '1fr';
+    /**
+     * Flag for compact view (less paddings)
+     */
+    compact?: boolean;
+    /**
+     * Flag for showing spinner on table body
+     */
+    loading?: boolean;
+    children?: any;
+};
+export type RowIndex = number;
+export type ColIndex = number;
+export {};

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Component } from '@semcore/core';
+import { ColumnPropsInner, DataTableColumnProps } from './Column.types';
+type State = {
+    sortVisible: boolean;
+};
+export declare class Column extends Component<DataTableColumnProps, {}, {}, [], ColumnPropsInner> {
+    static displayName: string;
+    static style: {
+        [key: string]: string;
+    };
+    lockedCell: [HTMLElement | null, boolean];
+    columnRef: React.RefObject<HTMLDivElement>;
+    sortWrapperRef: React.RefObject<HTMLDivElement>;
+    state: State;
+    componentDidUpdate(prevProps: DataTableColumnProps & ColumnPropsInner): void;
+    calculateActiveColumnMinWidth: () => number | null;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    handleBlur: () => void;
+    handleSortClick: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    handleFocusCell: (e: React.FocusEvent<HTMLElement, HTMLElement>) => void;
+    render(): React.ReactNode;
+}
+export {};

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

@@ -1,2 +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

@@ -4,6 +4,8 @@ export declare const localizedMessages: {
     };
     en: {
         sortableColumn: string;
+        "DataTable.Cell.AccordionToggle.expand:aria-label": string;
+        "DataTable.Cell.AccordionToggle.collapse:aria-label": string;
     };
     es: {
         sortableColumn: string;

package/lib/types/utils.d.ts

@@ -1,4 +1,8 @@
-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];
+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.12",
+  "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.12",
-    "@semcore/flex-box": "16.0.0-prerelease.12",
-    "@semcore/scroll-area": "16.0.0-prerelease.12"
+    "@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.12"
+    "@semcore/base-components": "^16.0.0-prerelease.14"
   },
   "repository": {
     "type": "git",
@@ -44,6 +45,6 @@
     "directory": "semcore/data-table"
   },
   "scripts": {
-    "build": "pnpm semcore-builder --source=ts && pnpm vite build"
+    "build": "pnpm semcore-builder && pnpm vite build"
   }
 }

package/vite.config.ts

@@ -9,9 +9,6 @@ export default mergeConfig(
       lib: {
         entry: './src/index.ts',
       },
-      rollupOptions: {
-        external: ['react', 'react-dom', 'react/jsx-runtime', /@babel\/runtime\/*/, /@semcore\/*/],
-      },
     },
   }),
 );