@semcore/data-table 16.0.0-prerelease.9 → 16.0.0

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

@@ -0,0 +1,82 @@
+/// <reference types="react" />
+import { ColumnGroupConfig, 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 = 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 | ColumnGroupConfig;
+    columns?: DTColumn[];
+    children: React.ReactNode;
+    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 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?: "warning" | "default" | "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?: "warning" | "default" | "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,35 @@
+/// <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;
+    /** 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?: 'l';
+    totalRows: number;
+    selectedRows?: number[];
+    onChangeSelectAll?: (value: boolean, event?: React.SyntheticEvent<HTMLElement>) => void;
+};

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/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.9",
+  "version": "16.0.0",
   "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.9",
-    "@semcore/flex-box": "16.0.0-prerelease.9",
-    "@semcore/scroll-area": "16.0.0-prerelease.9"
+    "@semcore/icon": "16.0.0",
+    "@semcore/button": "16.0.0",
+    "@semcore/checkbox": "16.0.0",
+    "@semcore/flex-box": "16.0.0",
+    "@semcore/scroll-area": "16.0.0",
+    "@semcore/spin": "16.0.0",
+    "@semcore/tooltip": "16.0.0",
+    "@semcore/widget-empty": "16.0.0"
   },
   "devDependencies": {
     "@types/react": "18.0.21",
@@ -36,7 +41,7 @@
     "csstype": "3.0.8"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0-prerelease.9"
+    "@semcore/base-components": "^16.0.0"
   },
   "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\/*/],
-      },
     },
   }),
 );