@consta/uikit 5.18.0 → 5.19.0

package/__internal__/src/src/components/Table/Table.d.ts

@@ -0,0 +1,153 @@
+import './Table.css';
+import React from 'react';
+import { HorizontalAlign, VerticalAlign } from './Cell/TableCell';
+import { Filters, onSortBy, SelectedFilters } from './filtering';
+import { Header, OrderType, Position } from './helpers';
+import { GetTagLabel } from './SelectedOptionsList/TableSelectedOptionsList';
+export { TableTextFilter } from './TextFilter/TableTextFilter';
+export { TableFilterContainer } from './FilterContainer/TableFilterContainer';
+export { TableNumberFilter } from './NumberFilter/TableNumberFilter';
+export { TableChoiceGroupFilter } from './ChoiceGroupFilter/TableChoiceGroupFilter';
+export declare const sizes: readonly ["s", "m", "l"];
+type Size = typeof sizes[number];
+export declare const zebraStriped: readonly ["odd", "even"];
+type ZebraStriped = typeof zebraStriped[number];
+export declare const headerVerticalAligns: readonly ["center", "bottom"];
+export type HeaderVerticalAlign = typeof headerVerticalAligns[number];
+export type LazyLoad = {
+    maxVisibleRows?: number;
+    scrollableEl?: HTMLDivElement | Window;
+} | undefined;
+type ActiveRow = {
+    id: string | undefined;
+    onChange: ({ id, e, }: {
+        id: string | undefined;
+        e?: React.SyntheticEvent;
+    }) => void;
+};
+type onRowHover = ({ id, e, }: {
+    id: string | undefined;
+    e: React.MouseEvent;
+}) => void;
+type onRowClick = ({ id, e }: {
+    id: string;
+    e: React.MouseEvent;
+}) => void;
+type onRowCreate = ({ id, index, e, }: {
+    id?: string;
+    index: number;
+    e: React.MouseEvent;
+}) => void;
+export type CellClickType = 'click' | 'contextMenu';
+export type onCellClick = ({ e, type, rowId, columnIdx, ref, }: {
+    e: React.SyntheticEvent;
+    type: CellClickType;
+    columnIdx: number;
+    ref: React.RefObject<HTMLDivElement>;
+    rowId?: string;
+}) => void;
+export type TableRow = {
+    id: string;
+    defaultExpand?: boolean;
+    rows?: TableRow[];
+};
+export type TableTreeRow<T extends TableRow> = {
+    options: {
+        level: number;
+    };
+} & T;
+export type TableFilters<T extends TableRow> = Filters<T>;
+export type RowField<T extends TableRow> = Exclude<keyof T, symbol | number>;
+export type ColumnWidth = number | undefined;
+export type ValueOf<T> = T[keyof T];
+type ColumnBase<T extends TableRow> = ValueOf<{
+    [K in keyof T]: {
+        accessor: K extends string ? K : never;
+        sortable?: boolean;
+        colSpan?: number | ((row: T) => number);
+        sortByField?: keyof T;
+        order?: OrderType;
+        sortFn?(a: T[K], b: T[K]): number;
+        renderCell?: (row: T) => React.ReactNode;
+        getComparisonValue?: (cell: T[K]) => number | string;
+    };
+}>;
+type SingleColumnAddition<T extends TableRow> = ColumnBase<T> & {
+    columns?: never;
+};
+type GroupColumnAddition<T extends TableRow> = {
+    columns: TableColumn<T>[];
+} & {
+    [K in keyof ColumnBase<T>]?: never;
+};
+export interface TableControl<T extends TableRow> {
+    column: Header<T> & ColumnMetaData;
+}
+export type SortByProps<T extends TableRow> = {
+    sortingBy: keyof T;
+    sortOrder: 'asc' | 'desc';
+};
+export type TableColumn<T extends TableRow> = {
+    title: React.ReactNode;
+    align?: HorizontalAlign;
+    withoutPadding?: boolean;
+    width?: ColumnWidth;
+    mergeCells?: boolean;
+    position?: Position;
+    hidden?: boolean;
+    control?: ({ column }: TableControl<T>) => React.ReactNode;
+} & (GroupColumnAddition<T> | SingleColumnAddition<T>);
+export type TableProps<T extends TableRow> = {
+    columns: TableColumn<T>[];
+    rows: T[];
+    isResizable?: boolean;
+    filters?: Filters<T>;
+    onSortBy?: onSortBy<T>;
+    size?: Size;
+    stickyHeader?: boolean;
+    stickyColumns?: number;
+    minColumnWidth?: number;
+    activeRow?: ActiveRow;
+    verticalAlign?: VerticalAlign;
+    headerVerticalAlign?: HeaderVerticalAlign;
+    zebraStriped?: ZebraStriped;
+    borderBetweenRows?: boolean;
+    defaultExpandAll?: boolean;
+    borderBetweenColumns?: boolean;
+    emptyRowsPlaceholder?: React.ReactNode;
+    className?: string;
+    onRowHover?: onRowHover;
+    onRowClick?: onRowClick;
+    onRowCreate?: onRowCreate;
+    onCellClick?: onCellClick;
+    getAdditionalClassName?: (props: {
+        column: TableColumn<T>;
+        row: T;
+        isActive: boolean;
+    }) => string;
+    rowCreateText?: string;
+    lazyLoad?: LazyLoad;
+    onFiltersUpdated?: (filters: SelectedFilters) => void;
+    getTagLabel?: GetTagLabel;
+    isExpandedRowsByDefault?: boolean;
+    getCellWrap?: (row: T) => 'truncate' | 'break';
+};
+type Table = <T extends TableRow>(props: TableProps<T> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.ReactElement | null;
+export type ColumnMetaData = {
+    filterable: boolean;
+    isSortingActive: boolean;
+    isFilterActive: boolean;
+    isResized: boolean;
+    isSticky: boolean;
+    showResizer: boolean;
+    columnWidth: number;
+    columnLeftOffset: number;
+};
+export type SortingState<T extends TableRow> = {
+    by: keyof T;
+    order: 'asc' | 'desc';
+    sortFn?: (a: T[keyof T], b: T[keyof T]) => number;
+} | null;
+export declare const Table: Table;

package/__internal__/src/src/components/Table/TextFilter/TableTextFilter.d.ts

@@ -0,0 +1,15 @@
+import './TableTextFilter.css';
+import React from 'react';
+import { FilterComponentProps } from '../filtering';
+type Item = {
+    name: string;
+    value: string;
+};
+type TableTextFilterProps = FilterComponentProps & {
+    items?: Item[];
+    withSearch?: boolean;
+    title?: string;
+    emptySearchText?: string;
+};
+export declare const TableTextFilter: React.FC<TableTextFilterProps>;
+export {};

package/__internal__/src/src/components/Table/__mock__/data.mock.d.ts

@@ -0,0 +1,412 @@
+import React from 'react';
+import { TableFilters as Filters, TableProps } from '../Table';
+export declare const rangeFilterer: (value: number | string, filterValue: {
+    min: number | string;
+    max: number | string;
+}) => boolean;
+export declare const rows: {
+    id: string;
+    field: string;
+    year: number;
+    type: string;
+    estimatedReserves: number;
+    remainingReserves: number;
+    production: number;
+    total: number;
+}[];
+export declare const filters: Filters<typeof rows[number]>;
+export declare const customFilters: Filters<typeof rows[number]>;
+export declare const tableData: TableProps<typeof rows[number]>;
+declare const rowsForMultiLevelHeadersData: {
+    id: string;
+    weightG: string;
+    weightKg: string;
+    year: number;
+    distribution: string;
+    dispatch: string;
+    arrival: string;
+    responsible1: string;
+    responsible2: string;
+}[];
+export declare const tableWithExpandableRowsData: {
+    rows: ({
+        id: string;
+        field: string;
+        year: number;
+        type: string;
+        estimatedReserves: number;
+        remainingReserves: number;
+        production: number;
+        total: number;
+        rows?: undefined;
+    } | {
+        id: string;
+        field: string;
+        year: number;
+        type: string;
+        estimatedReserves: number;
+        remainingReserves: number;
+        production: number;
+        total: number;
+        rows: ({
+            id: string;
+            field: string;
+            year: number;
+            type: string;
+            estimatedReserves: number;
+            remainingReserves: number;
+            production: number;
+            total: number;
+            rows?: undefined;
+        } | {
+            id: string;
+            field: string;
+            year: number;
+            type: string;
+            estimatedReserves: number;
+            remainingReserves: number;
+            production: number;
+            total: number;
+            rows: ({
+                id: string;
+                field: string;
+                year: number;
+                type: string;
+                estimatedReserves: number;
+                remainingReserves: number;
+                production: number;
+                total: number;
+                rows: {
+                    id: string;
+                    field: string;
+                    year: number;
+                    type: string;
+                    estimatedReserves: number;
+                    remainingReserves: number;
+                    production: number;
+                    total: number;
+                }[];
+            } | {
+                id: string;
+                field: string;
+                year: number;
+                type: string;
+                estimatedReserves: number;
+                remainingReserves: number;
+                production: number;
+                total: number;
+                rows?: undefined;
+            })[];
+        })[];
+    })[];
+    borderBetweenRows: boolean;
+};
+export declare const tableWithMultiLevelHeadersData: TableProps<typeof rowsForMultiLevelHeadersData[number]>;
+declare const tableWithTrafficLightDataRows: {
+    id: string;
+    field: string;
+    sum: number;
+    status: JSX.Element;
+    statusOrder: number;
+}[];
+export declare const tableWithBadgeData: TableProps<typeof tableWithTrafficLightDataRows[number]>;
+export declare const COLUMNS: ({
+    title: string;
+    columns: ({
+        title: string;
+        columns: {
+            title: string;
+            accessor: string;
+            align: string;
+        }[];
+        accessor?: undefined;
+        align?: undefined;
+    } | {
+        title: string;
+        accessor: string;
+        align: string;
+        columns?: undefined;
+    })[];
+    accessor?: undefined;
+    align?: undefined;
+} | {
+    title: string;
+    accessor: string;
+    align: string;
+    columns?: undefined;
+} | {
+    title: string;
+    columns: ({
+        title: string;
+        accessor: string;
+        align: string;
+        sortable?: undefined;
+    } | {
+        title: string;
+        accessor: string;
+        align: string;
+        sortable: boolean;
+    })[];
+    accessor?: undefined;
+    align?: undefined;
+})[];
+export declare const TRANSFORMED_COLUMNS: (({
+    title: string;
+    columns: ({
+        title: string;
+        columns: {
+            title: string;
+            accessor: string;
+            align: string;
+        }[];
+        accessor?: undefined;
+        align?: undefined;
+    } | {
+        title: string;
+        accessor: string;
+        align: string;
+        columns?: undefined;
+    })[];
+    colId: number;
+    position: {
+        colSpan: number;
+        topHeaderGridIndex: number;
+        gridIndex: number;
+        level: number;
+        rowSpan?: undefined;
+    };
+    accessor?: undefined;
+    align?: undefined;
+} | {
+    title: string;
+    accessor: string;
+    align: string;
+    colId: number;
+    position: {
+        topHeaderGridIndex: number;
+        gridIndex: number;
+        rowSpan: number;
+        level: number;
+        colSpan?: undefined;
+    };
+    columns?: undefined;
+} | {
+    title: string;
+    colId: number;
+    columns: ({
+        title: string;
+        accessor: string;
+        align: string;
+        sortable?: undefined;
+    } | {
+        title: string;
+        accessor: string;
+        align: string;
+        sortable: boolean;
+    })[];
+    position: {
+        colSpan: number;
+        topHeaderGridIndex: number;
+        gridIndex: number;
+        level: number;
+        rowSpan?: undefined;
+    };
+    accessor?: undefined;
+    align?: undefined;
+})[] | ({
+    title: string;
+    colId: number;
+    columns: {
+        title: string;
+        accessor: string;
+        align: string;
+    }[];
+    parentId: number;
+    position: {
+        colSpan: number;
+        topHeaderGridIndex: number;
+        gridIndex: number;
+        level: number;
+        rowSpan?: undefined;
+    };
+    accessor?: undefined;
+    align?: undefined;
+    sortable?: undefined;
+} | {
+    title: string;
+    accessor: string;
+    align: string;
+    colId: number;
+    parentId: number;
+    position: {
+        topHeaderGridIndex: number;
+        gridIndex: number;
+        rowSpan: number;
+        level: number;
+        colSpan?: undefined;
+    };
+    columns?: undefined;
+    sortable?: undefined;
+} | {
+    title: string;
+    accessor: string;
+    align: string;
+    sortable: boolean;
+    colId: number;
+    parentId: number;
+    position: {
+        topHeaderGridIndex: number;
+        gridIndex: number;
+        rowSpan: number;
+        level: number;
+        colSpan?: undefined;
+    };
+    columns?: undefined;
+})[])[];
+export declare const generateData: (rowsCount: number, columnsCount: number) => {
+    rows: {
+        [key: string]: string;
+        id: string;
+    }[];
+    columns: {
+        title: string;
+        accessor: string;
+    }[];
+};
+export declare const tableWithMergedCellsData: {
+    columns: ({
+        title: string;
+        accessor: string;
+        align: string;
+        mergeCells?: undefined;
+        sortable?: undefined;
+    } | {
+        title: string;
+        accessor: string;
+        align: string;
+        mergeCells: boolean;
+        sortable?: undefined;
+    } | {
+        title: string;
+        accessor: string;
+        align: string;
+        sortable: boolean;
+        mergeCells: boolean;
+    })[];
+    rows: {
+        id: string;
+        weightG: string;
+        weightKg: string;
+        year: number;
+        distribution: string;
+        dispatch: string;
+        arrival: string;
+        responsible1: string;
+        responsible2: string;
+    }[];
+};
+declare const rowsWithObjectFields: {
+    id: string;
+    field: string;
+    year: {
+        value: number;
+    };
+    type: string;
+    estimatedReserves: number;
+    remainingReserves: number;
+    production: number;
+    total: number;
+}[];
+export declare const tableDataWithRenderFn: TableProps<typeof rowsWithObjectFields[number]>;
+export declare const tableDataWithAdditionalClassName: TableProps<typeof rowsWithObjectFields[number]>;
+declare const CustomIDs: {
+    fullName: string;
+    yearOfRegistration: string;
+};
+export { CustomIDs };
+export declare const rowsForCustomTagLabelFunction: {
+    [CustomIDs.fullName]: string;
+    [CustomIDs.yearOfRegistration]: number;
+    id: string;
+    phone: number;
+}[];
+export declare const partOfTableDataForCustomTagLabelFunction: {
+    columns: {
+        title: string;
+        accessor: string;
+        sortable: boolean;
+    }[];
+    rows: {
+        [CustomIDs.fullName]: string;
+        [CustomIDs.yearOfRegistration]: number;
+        id: string;
+        phone: number;
+    }[];
+    filters: ({
+        id: string;
+        name: string;
+        field: string;
+        filterer: (value: any, filterValue?: unknown) => boolean;
+        component: {
+            name: React.FC<{
+                onConfirm: (value: unknown) => void;
+                onCancel: () => void;
+                filterValue?: unknown;
+            } & Record<string, unknown> & {
+                items?: {
+                    name: string;
+                    value: string;
+                }[];
+                withSearch?: boolean;
+                title?: string;
+                emptySearchText?: string;
+            }>;
+            props: {
+                withSearch: boolean;
+                items: {
+                    name: string | number;
+                    value: string | number;
+                }[];
+            };
+        };
+    } | {
+        id: string;
+        name: string;
+        field: string;
+        filterer: (value: number | string, filterValue: {
+            min: number | string;
+            max: number | string;
+        }) => boolean;
+        component: {
+            name: React.FC<{
+                onConfirm: (value: unknown) => void;
+                onCancel: () => void;
+                filterValue?: unknown;
+            } & Record<string, unknown> & {
+                title?: string;
+            }>;
+            props?: undefined;
+        };
+    })[];
+};
+export declare const withControlTableMock: TableProps<typeof rowsForCustomTagLabelFunction[number]>;
+export declare const withHiddenColumnTableMock: TableProps<typeof rowsForCustomTagLabelFunction[number]>;
+declare const rowsWithColSpan: {
+    id: string;
+    name: string;
+    street: undefined;
+    building: undefined;
+    age: undefined;
+    number: undefined;
+    gender: undefined;
+    rows: {
+        id: string;
+        name: string;
+        street: string;
+        building: number;
+        age: number;
+        number: number;
+        gender: string;
+    }[];
+}[];
+export declare const withColSpan: TableProps<typeof rowsWithColSpan[number]>;

package/__internal__/src/src/components/Table/filtering.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import { SortByProps, TableColumn, TableRow, ValueOf } from './Table';
+export type FilterComponentProps = {
+    onConfirm: (value: unknown) => void;
+    onCancel: () => void;
+    filterValue?: unknown;
+} & Record<string, unknown>;
+export type Filters<T extends TableRow> = ValueOf<{
+    [K in keyof T]: {
+        id: string;
+        name: string;
+        field: K extends string ? K : never;
+        filterer(value: any, filterValue?: unknown): boolean;
+    } & ({
+        component?: never;
+    } | {
+        component: {
+            name: React.FC<FilterComponentProps>;
+            props?: Omit<FilterComponentProps, 'onConfirm' | 'filterValue'>;
+        };
+    });
+}>[];
+export type onSortBy<T extends TableRow> = (props: SortByProps<T> | null) => void;
+export type FieldSelectedValues = string[];
+type SelectedFilter = {
+    selected: FieldSelectedValues;
+    value?: any;
+};
+export type SelectedFilters = {
+    [field: string]: SelectedFilter;
+};
+type SelectedFiltersList = Array<{
+    id: string;
+    name: string;
+}>;
+export declare const getOptionsForFilters: <T extends TableRow>(filters: Filters<T>, field: string) => {
+    value: string;
+    label: string;
+}[];
+export declare const getSelectedFiltersInitialState: <T extends TableRow>(filters?: Filters<T>) => SelectedFilters;
+export declare const fieldFiltersPresent: <T extends TableRow>(tableFilters: Filters<T>, field: string) => boolean;
+export declare const isSelectedFiltersPresent: (selectedFilters: SelectedFilters) => boolean;
+export declare const getSelectedFiltersList: <T extends TableRow>({ filters, selectedFilters, columns, }: {
+    filters: Filters<T>;
+    selectedFilters: SelectedFilters;
+    columns: Array<TableColumn<T>>;
+}) => SelectedFiltersList;
+export declare const filterTableData: <T extends TableRow>({ data, filters, selectedFilters, }: {
+    data: T[];
+    filters: Filters<T>;
+    selectedFilters: SelectedFilters;
+}) => T[];
+export declare const useSelectedFilters: <T extends TableRow>(filters?: Filters<T>, onFiltersUpdated?: (filters: SelectedFilters) => void) => {
+    selectedFilters: SelectedFilters;
+    updateSelectedFilters: (field: string, tooltipSelectedFilters: FieldSelectedValues, value?: unknown) => void;
+    removeOneSelectedFilter: (availableFilters: Filters<T>, filter: string) => void;
+    removeAllSelectedFilters: (availableFilters: Filters<T>) => void;
+};
+export {};