@semcore/data-table 16.0.0-prerelease.2 → 16.0.0-prerelease.21

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

@@ -0,0 +1,13 @@
+import { DataTableProps, DataTableData, DataTableType } from './DataTable.types';
+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 UNIQ_ROW_KEY: unique symbol;
+export declare const SELECT_ALL: unique symbol;
+export declare const ROW_INDEX: unique symbol;
+export declare const DataTable: DataTableType;
+export declare const DataTableInternal: (<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[]>, "tag" | "children">) => 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

@@ -0,0 +1,125 @@
+/// <reference types="react" />
+import { Intergalactic } from '@semcore/core';
+import { BoxProps } from '@semcore/base-components';
+import { ACCORDION, ROW_GROUP, UNIQ_ROW_KEY } from './DataTable';
+import { DataTableColumnProps } from '../Head/Column.types';
+import { DataTableBodyProps } from '../Body/Body.types';
+import Tooltip from '@semcore/tooltip';
+import { DTRow } from '../Body/Row.types';
+/**
+ * Datatable must have an accessible name (aria-table-name).
+ * It should describe table content.
+ */
+export type DataTableAriaProps = Intergalactic.RequireAtLeastOne<{
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    title?: string;
+}>;
+export type SortDirection = 'asc' | 'desc';
+export type DataTableSort<Column> = [sortBy: Column, sortDirection: SortDirection];
+export type DataTableChangeSort<Column> = (sort: [sortBy: Column, sortDirection: SortDirection], e?: React.SyntheticEvent) => void;
+export type DataRowItem = {
+    [key: string]: DTValue | undefined;
+    [ACCORDION]?: React.ReactNode | DataTableData;
+    [ROW_GROUP]?: DataTableData;
+    [UNIQ_ROW_KEY]?: string;
+};
+export interface DTValue {
+    toString(): string;
+    [ACCORDION]?: React.ReactNode | DataTableData;
+}
+export type DataTableData = DataRowItem[];
+export type DTUse = 'primary' | 'secondary';
+export type Sizes = Pick<BoxProps, 'w' | 'wMax' | 'wMin' | 'h' | 'hMax' | 'hMin'>;
+export type DataTableProps<D extends DataTableData> = DataTableAriaProps & Sizes & {
+    /** Data for table */
+    data: D;
+    /** 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<keyof D[0]>;
+    /** Handler call when request will change sort */
+    onSortChange?: DataTableChangeSort<keyof D[0]>;
+    /**
+     *
+     * @default auto
+     */
+    defaultGridTemplateColumnWidth?: 'auto' | '1fr';
+    /**
+     * Flag for compact view (fewer paddings)
+     */
+    compact?: boolean;
+    /**
+     * Size of paddings for the first and last columns in the table
+     */
+    sideIndents?: 'wide';
+    /**
+     * Flag for showing spinner on table body
+     */
+    loading?: boolean;
+    children?: never;
+    /**
+     * Set of expanded rows (uniq id from them)
+     */
+    expandedRows?: Set<string>;
+    virtualScroll?: VirtualScroll;
+    columns: ColumnsConfig;
+    headerProps?: {
+        /**
+         * Sticky header
+         * @default false
+         */
+        sticky?: boolean;
+        /**
+         * Height of header in px. It's better to set it to improve performance with sticky header.
+         */
+        h?: number;
+        /**
+         * offset for sticky header
+         */
+        top?: number;
+        /** Enable scroll bar element in header */
+        withScrollBar?: boolean;
+    };
+    rowProps?: DataTableBodyProps['rowProps'];
+    renderCell?: DataTableBodyProps['renderCell'];
+    /**
+     * List of selected rows (indexes from data array)
+     */
+    selectedRows?: number[];
+    onSelectedRowsChange?: (selectedRows: number[], event?: React.SyntheticEvent<HTMLElement>, opts?: {
+        selectedRowIndex: number;
+        isSelected: boolean;
+        row: DTRow;
+    }) => void;
+    /**
+     * For custom empty data widget.
+     */
+    renderEmptyData?: () => React.ReactNode;
+};
+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.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.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Component } from '@semcore/core';
+import { ColumnPropsInner, DataTableColumnProps } from './Column.types';
+import type { DataTableData, SortDirection } from '../DataTable/DataTable.types';
+type State = {
+    sortVisible: boolean;
+};
+export declare class Column<D extends DataTableData> extends Component<DataTableColumnProps, {}, {}, [
+], ColumnPropsInner<D>> {
+    static displayName: string;
+    static style: {
+        [key: string]: string;
+    };
+    lockedCell: [HTMLElement | null, boolean];
+    columnRef: React.RefObject<HTMLDivElement>;
+    sortWrapperRef: React.RefObject<HTMLDivElement>;
+    state: State;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: DataTableColumnProps & ColumnPropsInner<D>): void;
+    calculateActiveColumnMinWidth: () => number | null;
+    get defaultDirection(): SortDirection;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    handleBlur: (e: React.FocusEvent<HTMLElement>) => 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,71 @@
+/// <reference types="react" />
+import { ColumnGroupConfig, ColumnItemConfig, DataTableData, DataTableProps, DTUse, SortDirection } 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 | SortDirection;
+    /**
+     * 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 = ColumnItemConfig & CommonColumnType & {
+    /**
+     * Width for grid-template-columns
+     */
+    gtcWidth: string;
+    parent?: DTColumn | ColumnGroupConfig;
+    columns?: DTColumn[];
+    children?: React.ReactNode | React.FC;
+    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;
+};
+export type ColumnPropsInner<D extends DataTableData> = {
+    use: DTUse;
+    borders?: 'both' | 'left' | 'right';
+    sort?: DataTableProps<D>['sort'];
+    onSortChange?: DataTableProps<D>['onSortChange'];
+    uid: string;
+    parent?: DTColumn;
+    sortableColumnDescribeId: string;
+    columnIndex: number;
+    tableRef: React.RefObject<HTMLElement>;
+    gridTemplateColumns: string[];
+    gridTemplateAreas: string[];
+    sticky: boolean;
+};

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

@@ -0,0 +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, {}, {}, 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

@@ -0,0 +1,16 @@
+import { DTUse } from '../DataTable/DataTable.types';
+import { ReactElement } from 'react';
+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;
+    fixedColumnsMap: Map<string, any>;
+    withConfig: boolean;
+};

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

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { Intergalactic } from '@semcore/core';
+import { DataTableHeadProps } from './Head.types';
+import type 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: <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

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { DataTableData, DataTableProps, DTUse } from '../DataTable/DataTable.types';
+import { DTColumn } from './Column.types';
+export type DataTableHeadProps = {
+    /**
+     * Sticky header
+     * @default false
+     */
+    sticky?: boolean;
+    /**
+     * offset for sticky header
+     */
+    top?: number;
+    /**
+     * Height of header in px
+     */
+    h?: number;
+    /** Enable scroll bar element in header */
+    withScrollBar?: boolean;
+};
+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'];
+    getI18nText: (key: string) => string;
+    uid: string;
+    ref: React.RefObject<HTMLDivElement>;
+    gridAreaGroupMap: Map<number, string>;
+    gridTemplateColumns: string[];
+    gridTemplateAreas: string[];
+    sideIndents?: 'wide';
+    totalRows: number;
+    selectedRows?: number[];
+    onChangeSelectAll?: (value: boolean, event?: React.SyntheticEvent<HTMLElement>) => void;
+    getFixedStyle: (cell: Pick<DTColumn, 'name' | 'fixed'>) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];
+};

package/lib/types/index.d.ts

@@ -1,2 +1,10 @@
-export { default } from './DataTable';
-export * from './DataTable';
+import { DataTable, ACCORDION, ROW_GROUP, UNIQ_ROW_KEY } from './components/DataTable/DataTable';
+import type { DataTableSort, DataTableType, DataTableData } from './components/DataTable/DataTable.types';
+import { Intergalactic } from '@semcore/core';
+import React from 'react';
+declare const wrapDataTable: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentPropsNesting<DataTableType>, "tag" | "ref"> & {
+    ref: React.Ref<any>;
+    tag: Intergalactic.InternalTypings.ComponentTag;
+} & PropsExtending) => React.ReactNode) => DataTableType;
+export { DataTable, ACCORDION, ROW_GROUP, UNIQ_ROW_KEY, wrapDataTable };
+export type { DataTableSort, DataTableData };

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

@@ -4,6 +4,11 @@ export declare const localizedMessages: {
     };
     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;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/data-table",
   "description": "Semrush DataTable Component",
-  "version": "16.0.0-prerelease.2",
+  "version": "16.0.0-prerelease.21",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,9 +14,14 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/icon": "16.0.0-prerelease.2",
-    "@semcore/flex-box": "16.0.0-prerelease.2",
-    "@semcore/scroll-area": "16.0.0-prerelease.2"
+    "@semcore/icon": "16.0.0-prerelease.21",
+    "@semcore/button": "16.0.0-prerelease.21",
+    "@semcore/checkbox": "16.0.0-prerelease.21",
+    "@semcore/flex-box": "16.0.0-prerelease.21",
+    "@semcore/scroll-area": "16.0.0-prerelease.21",
+    "@semcore/spin": "16.0.0-prerelease.21",
+    "@semcore/tooltip": "16.0.0-prerelease.21",
+    "@semcore/widget-empty": "16.0.0-prerelease.21"
   },
   "devDependencies": {
     "@types/react": "18.0.21",
@@ -36,7 +41,7 @@
     "csstype": "3.0.8"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0-prerelease.2"
+    "@semcore/base-components": "^16.0.0-prerelease.21"
   },
   "repository": {
     "type": "git",
@@ -44,6 +49,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\/*/],
-      },
     },
   }),
 );