@mdtl/uikit 0.0.50 → 0.0.52

package/dist/components/Table/AddingRowTemplate.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { AddingButtonRowTemplateProps } from './interfaces/interfaces';
+declare const AddingButtonRowTemplate: <TData>({ text, onClick, colSpan, infoTooltip, overflowShadow, isNewRowCreated, setIsNewRowCreated, dataUpdateCallback, columns, tableData, setEditedRow, onStartRowEdit, itemActions, }: AddingButtonRowTemplateProps<TData>) => React.JSX.Element;
+export default AddingButtonRowTemplate;

package/dist/components/Table/BasicTable.d.ts

@@ -0,0 +1,34 @@
+import { JSX } from 'react';
+import { ITableProps, IHashMap, THeadCellType } from './interfaces/interfaces';
+import { Row, RowData } from '@tanstack/react-table';
+declare module '@tanstack/table-core' {
+    interface ColumnDefBase<TData extends RowData, TValue = unknown> {
+        editTemplate?: (row: TData, props: IHashMap) => JSX.Element;
+        editable: boolean;
+        template?: (row: Row<TData>, props: IHashMap) => JSX.Element;
+        footerTemplate?: (row: IHashMap) => JSX.Element;
+        field: string;
+        type?: THeadCellType;
+        sorting: boolean;
+        width: number;
+        colSizeVarId: string;
+        backgroundColorCallback?: (row: TData) => string | undefined;
+        accessorKey?: string;
+        folder?: any;
+    }
+}
+export interface AdditionalRowFields {
+    hasChildren?: boolean;
+    parentId?: string;
+    level?: number;
+    subRows?: any;
+    isDragDisabled?: boolean;
+    nodeType?: number;
+    field?: string;
+}
+/**
+ * Содержимое таблицы
+ * @param props
+ * @returns {JSX.Element}
+ */
+export declare const BasicTable: <TData extends AdditionalRowFields>({ columns, keyProperty, addingRowTemplate, onSettingsClick, viewMode, adaptive, hiddenHeader, root, data, itemActions, operations, multiselectVisibility, disableSelectAll, singleSelect, onItemClick, onRootChanged, itemActionsVisibilityCallback, editable, rowDraggable, onItemActionClick, onAcceptRowEdit, onStartRowEdit, onCancelRowEdit, emptyText, emptyTemplate, itemsPerPage, selectedKeysChangedCallback, expandedKeysChangedCallback, selectedItems, errorMessage, minWidth, treeSearchTypeChildren, dataUpdateCallback, sx, selectedRow, selectable, expandable, virtualization, localDataMode, multipleSortEnabled, rowBackgroundCallback, columnSizeChangedCallback, columnPinningChangedCallback, columnPinning: columnPinningProps, addingRowText, showTransposedTooltip, itemActionsDisabledTooltip, columnOrderChangedCallback, expandAllMethod, enableDrop, enableRowDragCallback, highlightDragOverRow, isFetchingMore, loading, hasMore, inSearch, inSelect, totalSumValues, getExpandData, loadMore, handleRequestSort, handleMultipleSort, getSortOrder, getSortDirection, order, orderBy, tableViewMode, name, changeRootCallback, loadedRows, ...props }: ITableProps<TData>) => JSX.Element;

package/dist/components/Table/Cell/Cell.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { ICellProps } from '../interfaces/interfaces';
+/**
+ * Перетаскиваемая строка
+ * @param props
+ * @returns {JSX.Element}
+ */
+export declare const Cell: <TData>(props: ICellProps<TData>) => React.JSX.Element;

package/dist/components/Table/Cell/CellColumnContent.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { ICellColumnProps, THeadCellType } from '../interfaces/interfaces';
+declare module '@mui/material/OutlinedInput' {
+    interface OutlinedInputProps {
+        type?: THeadCellType;
+    }
+}
+/**
+ * Отрисовка шаблона / текста в ячейке
+ */
+export declare const CellColumnContent: <TData>(props: ICellColumnProps<TData>) => React.JSX.Element;

package/dist/components/Table/Cell/ItemActions.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { IItemActionsProps } from '../interfaces/interfaces';
+import { AdditionalRowFields } from '../BasicTable';
+/**
+ * Действия над записью
+ * @param props
+ * @returns
+ */
+export declare const ItemActions: <TData extends AdditionalRowFields>(props: IItemActionsProps<TData>) => React.JSX.Element;

package/dist/components/Table/Cell/RowCell.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { IRowCellProps } from '../interfaces/interfaces';
+import { AdditionalRowFields } from '../BasicTable';
+/**
+ * Ячейки таблицы, образующие строку
+ * @param props
+ * @returns
+ */
+export declare const RowCell: <TData extends AdditionalRowFields>(props: IRowCellProps<TData>) => React.JSX.Element;

package/dist/components/Table/Cell/TileCell.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ITillCellProps } from '../interfaces/interfaces';
+import { AdditionalRowFields } from '../BasicTable';
+/**
+ * Плоская ячейка-плитка
+ * @param props
+ * @returns {JSX.Element}
+ */
+export declare const TillCell: <TData extends AdditionalRowFields>(props: ITillCellProps<TData>) => React.JSX.Element;

package/dist/components/Table/DraggableTableHeaderCell.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ITableHeaderCell } from './interfaces/interfaces';
+declare const _default: React.MemoExoticComponent<(<TData>(props: ITableHeaderCell<TData>) => React.JSX.Element)>;
+export default _default;

package/dist/components/Table/Row/DraggableRow.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ITableRowProps } from '../interfaces/interfaces';
+import { AdditionalRowFields } from '../BasicTable';
+/**
+ * Перетаскиваемая строка
+ * @param props
+ * @returns {JSX.Element}
+ */
+export declare const DraggableRow: <TData extends AdditionalRowFields>(props: ITableRowProps<TData>) => React.JSX.Element;

package/dist/components/Table/Row/Row.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ITableRowProps } from '../interfaces/interfaces';
+import { AdditionalRowFields } from '../BasicTable';
+export declare const Row: <TData extends AdditionalRowFields>(props: ITableRowProps<TData>) => React.JSX.Element;

package/dist/components/Table/Row/TableRowWrapper.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ITableRowWrapperProps } from '../interfaces/interfaces';
+import { AdditionalRowFields } from '../BasicTable';
+/**
+ * Обертка для строки, которая определяет будет строка draggable или обычной
+ * @param props
+ * @returns {JSX.Element}
+ */
+export declare const TableRowWrapper: <TData extends AdditionalRowFields>(props: ITableRowWrapperProps<TData>) => React.JSX.Element;

package/dist/components/Table/TableBody.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ITableBodyProps } from './interfaces/interfaces';
+import { AdditionalRowFields } from './BasicTable';
+/**
+ * Тело таблицы
+ * @param props
+ * @returns {JSX.Element}
+ */
+export declare function TableBody<TData extends AdditionalRowFields>(props: ITableBodyProps<TData>): React.JSX.Element;

package/dist/components/Table/TableFooter.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { IHashMap } from './interfaces/interfaces';
+import { HeaderGroup } from '@tanstack/react-table';
+interface ITableFooterProps<TData> {
+    footerGroups: HeaderGroup<TData>[];
+    totalValues: IHashMap[];
+}
+export declare const TableFooterContent: <TData>(props: ITableFooterProps<TData>) => React.JSX.Element;
+export {};

package/dist/components/Table/TableHeader.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ITableHeaderProps } from './interfaces/interfaces';
+import { AdditionalRowFields } from './BasicTable';
+/**
+ * Шапка таблицы
+ * @param props
+ * @returns {JSX.Element}
+ */
+export declare function TableHeader<TData extends AdditionalRowFields>(props: Readonly<ITableHeaderProps<TData>>): React.JSX.Element;

package/dist/components/Table/TableHeaderCell.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { ITableHeaderCell } from './interfaces/interfaces';
+import { AdditionalRowFields } from './BasicTable';
+export declare const TableHeaderCell: <TData extends AdditionalRowFields>(props: ITableHeaderCell<TData>) => React.JSX.Element;

package/dist/components/Table/TableLoader.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface ITableLoaderProps {
+    loadingIconRef: React.MutableRefObject<any>;
+    colSpan: number;
+}
+declare const _default: React.MemoExoticComponent<(props: ITableLoaderProps) => React.JSX.Element>;
+export default _default;

package/dist/components/Table/controls/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const ITEM_ACTIONS_COLUMN_ID = "itemActions";
+export declare const DRAG_ICON_COLUMN_ID = "dragIcon";
+export declare const MULTISELECT_COLUMN_ID = "multiselect";
+export declare const EXPAND_ICON_COLUMN_ID = "expandIcon";
+export declare const PLACEHOLDER_ID = "placeholderId";
+export declare const MOUSE_ENTER_TIME_BEFORE_HINT_ACTIVATED = 750;

package/dist/components/Table/interfaces/interfaces.d.ts

@@ -0,0 +1,614 @@
+import { JSX, MemoExoticComponent, CSSProperties, Ref, default as React } from 'react';
+import { default as SvgIcon } from '@mui/material/SvgIcon';
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
+import { VirtualItem } from '@tanstack/react-virtual';
+import { Cell, Column, ExpandedState, Header, Row, Table } from '@tanstack/react-table';
+import { Over } from '@dnd-kit/core';
+export type THeadCellType = number | undefined | 'text' | 'date' | 'dateShortTime';
+export interface ICellFolderCfg {
+    colSpan?: number;
+}
+export interface IHeadCell<TData> {
+    /** название столбца, который будет выведен в шапке */
+    label: string;
+    /** поле в ответе с бека */
+    field: string;
+    /** можно ли редактировать ячейку */
+    editable?: boolean;
+    /** шаблон для отображения ячейки в режиме редактирования */
+    editTemplate?: (row: TData, props: IHashMap) => JSX.Element;
+    /** можно ли скрыть столбец */
+    fixed?: boolean;
+    /** флаг отображения столбца для выбора (костыль) */
+    hiddenSelect?: boolean;
+    /** флаг видимости столбца в таблице */
+    hidden?: boolean;
+    /** тип, от которого зависит форматирование в template */
+    type?: THeadCellType;
+    /** возможность сортировки колонки */
+    sorting?: boolean;
+    /** ширина колонки */
+    width?: number;
+    /** если столбец - папка (используется в дереве) */
+    folder?: ICellFolderCfg;
+    /** выключение отступов */
+    disablePadding?: boolean;
+    /** кастомный шаблон ячейки */
+    template?: (row: TData, props: TData) => JSX.Element;
+    /** цвет ячейки */
+    backgroundColorCallback?: (row: TData) => string | undefined;
+    /** используется в базовых колонках таблиц с шаблонами, чтобы поместить их в конец таблицы */
+    isLast?: boolean;
+}
+export interface IOperation {
+    id: string;
+    icon: MemoExoticComponent<(props: any) => JSX.Element> | typeof SvgIcon;
+    title: string;
+    /**
+     * коллбэк для операций над выделенными записями
+     * @param selectedKeys массив уникальных идентификаторов строки
+     */
+    callback: (selectedKeys: string[]) => void;
+}
+export type MultiSelectType = 'all' | 'parent';
+export declare enum ViewMode {
+    DEFAULT = "default",
+    SEARCH = "search",
+    SELECTED = "selected"
+}
+export interface IHashMap {
+    [key: string]: any;
+}
+export type Order = 'asc' | 'desc';
+type TActionVisibleTypes = 'folder' | 'node' | 'all' | 'none' | 'menu' | 'icon';
+type TActionVisible<TData> = (item: TData) => TActionVisibleTypes;
+export interface IItemAction<TData> {
+    id: string;
+    icon?: MemoExoticComponent<(props: any) => JSX.Element> | typeof SvgIcon;
+    tooltip: string;
+    info?: JSX.Element;
+    visible?: TActionVisible<TData>;
+    children?: IItemAction<TData>[];
+    clickCallback?: (data: unknown) => void;
+    color?: string;
+}
+export interface ITableProps<TData> {
+    /** колонки, которые будут отображаться в таблице */
+    columns: IHeadCell<TData>[];
+    /**
+     * коллбэк, вызывающийся при изменении порядка колонок
+     * @param columnOrder порядковый массив названий колонок(field)
+     */
+    columnOrderChangedCallback?: (columnOrder: string[]) => void;
+    /** айди кликнутой строки */
+    clickedRow?: string;
+    /** конфиг сгруппированных колонок */
+    grouping?: string[];
+    /**
+     * коллбэк, вызывающийся при изменении размеров колонки
+     * @param colSizeState ключ - название колонки(field), значение - размер колонки
+     */
+    columnSizeChangedCallback?: (colSizeState: Record<string, number>) => void;
+    /**
+     * коллбэк, вызывающийся при запинивании колонки
+     * @param colPinState массив уникальных названий колонок(field)
+     */
+    columnPinningChangedCallback?: (colPinState: string[]) => void;
+    /** конфиг айди закрепленных колонок */
+    columnPinning?: string[];
+    /** запрет выбора всех записей (пока что нет способов выбрать все записи на беке без костылей) */
+    disableSelectAll?: boolean;
+    /** сообщение, показывающееся при ошибке получения данных */
+    errorMessage?: string;
+    /** могут ли строки раскрываться (иметь подстроки), опция работает с любым видом таблицы */
+    expandable?: boolean;
+    /** метод для получения всех строк на всех уровнях вложенности */
+    expandAllMethod?: (isAllRowsExpanded: boolean) => void;
+    /** раскрытые строки */
+    expandedKeys?: Record<string, boolean>;
+    /** коллбэк при изменении массива айди раскрытых записей */
+    expandedKeysChangedCallback?: (expandedIds: Record<string, boolean>) => void;
+    /** спрятать заголовок таблицы */
+    hiddenHeader?: boolean;
+    /** кол-во строк на одной странице */
+    itemsPerPage?: number;
+    /** уникальный ключ для строки(по умолчанию id) */
+    keyProperty: string;
+    minWidth?: string | number;
+    /** имя таблицы */
+    name: string;
+    /** обработчик клика по строке */
+    onItemClick?: (row: TData) => void;
+    /** коллбэк если поменялся корень таблицы(провалились в какую-то запись) */
+    onRootChanged?: (rootItem: TData) => void;
+    /** действие при нажатии на иконку настроек таблицы  */
+    onSettingsClick?: () => void;
+    /** массовые операции над выделенными записями */
+    operations?: IOperation[];
+    /** корень дерева в мастере в адаптиве для построения дерева с определенного узла */
+    root?: string;
+    /** колбэк для смены бэкграунда строки */
+    rowBackgroundCallback?: (row: TData) => string;
+    /** Можно ли выбирать элементы */
+    selectable?: boolean;
+    /** идентификаторы выбранных чекбоксом строк */
+    selectedKeys?: string[];
+    /** коллбэк при изменении массива выбранных записей */
+    selectedKeysChangedCallback?: (selectedKeys: string[], selectedItems?: TData[]) => void;
+    /** выбранные строки */
+    selectedItems?: TData[];
+    /** выбранная строка */
+    selectedRow?: (row: TData) => boolean;
+    /** показывает тултип для строки с выводом всех ее ячеек в транспонированном виде */
+    showTransposedTooltip?: boolean;
+    /** доп стили */
+    sx?: SxProps<Theme>;
+    /** вид отображения таблицы */
+    tableViewMode?: TableViewMode;
+    /** опция для поиска и работы только с листьями */
+    treeSearchTypeChildren?: boolean;
+    /** опция для функционала виртуализации(и колонок и строк). По умолчанию false*/
+    virtualization?: boolean;
+    /** коллбэк смены корня таблицы(если проваливаемся в запись) */
+    changeRootCallback?: (activeItem: Row<TData>) => void;
+    /** режим просмотра */
+    viewMode: ViewMode;
+    /** адаптируемая ли таблица(при true колонки с полем hidden скрываются и уменьшаются паддинги) */
+    adaptive?: boolean;
+    /** коллбэк для обновления данных */
+    dataUpdateCallback?: (data: IHashMap[]) => void;
+    /** состояние подгрузки доп элементов(next page) */
+    isFetchingMore: boolean;
+    /** состояние загрузки */
+    loading: boolean;
+    /** есть ли еще страницы */
+    hasMore: boolean;
+    /** включен режим поиска */
+    inSearch: boolean;
+    /** включен режим выбора */
+    inSelect: boolean;
+    /** значения в колонках для футера */
+    totalSumValues: TData[];
+    /** функция для подгрузки детей элемента */
+    getExpandData: (item: TData) => void;
+    /** функция подгрузки след страницы */
+    loadMore: (currentTable: string) => void;
+    /** коллбэк для сортировки */
+    handleRequestSort: (event: React.MouseEvent<unknown, MouseEvent>, property: string, isParameter: boolean) => void;
+    /** коллбэк для множественной сортировки */
+    handleMultipleSort: (property: string, isParameter: boolean) => void;
+    /** коллбэк получения порядка сортировки */
+    getSortOrder: (field: string) => void;
+    /** коллбэк получения направления сортировки */
+    getSortDirection: (field: string) => void;
+    /** порядок колонок для сортировки */
+    order: Order;
+    /** название сортируемой колонки */
+    orderBy: string;
+    /** коллбэк показывать ли действия над записью */
+    itemActionsVisibilityCallback?: (row: TData) => boolean;
+    /** есть ли в таблице возможность редактировать записи */
+    editable?: boolean;
+    /** одиночный выбор записи чекбоксом(можно выбрать только одну) */
+    singleSelect?: boolean;
+    /** множественный выбор записей чекбоксом(можно выбрать несколько) */
+    multiselectVisibility?: MultiSelectType;
+    /** шаблон для доп строки над таблицей для добавления новой строки
+     * для базового функционала добавления доп строки достаточно передать только addingRowText
+     */
+    addingRowTemplate?: JSX.Element;
+    /** текст для строки над таблицей для добавления новой строки */
+    addingRowText?: string;
+    /** данные для таблицы(строки) */
+    data?: TData[] | null;
+    /** коллбэк начала редактирования строки(запускается при нажатии на кнопку редактировать) */
+    onStartRowEdit?: (item: TData) => void;
+    /** коллбэк сохранения редактируемой строки(вызывается при нажатии на галку сохранить) */
+    onAcceptRowEdit?: (item: TData, callback: () => void) => void;
+    /** коллбэк отмены редактирования строки, вызывается при нажатии на крестик */
+    onCancelRowEdit?: () => void;
+    /** коллбэк для показа тултипа в случае если нет действий над записью */
+    itemActionsDisabledTooltip?: (row: TData) => string;
+    /** коллбэк при нажатии на действия над записью */
+    onItemActionClick?: (actionId: string, item: TData, data?: unknown) => void;
+    /** редактируемая строка */
+    editedRow?: TData | null;
+    /** действия над записью */
+    itemActions?: IItemAction<TData>[];
+    /** режим dnd для строк */
+    rowDraggable?: boolean;
+    /** режим dnd для колонок */
+    columnDraggable?: boolean;
+    /** коллбэк определяющий можно ли перетаскивать строку */
+    enableRowDragCallback?: (row: TData) => boolean;
+    /** можно ли дропать строки в таблицу(для dnd между таблицами) */
+    enableDrop?: boolean;
+    /** менять ли цвет для over-строки при dnd */
+    highlightDragOverRow?: boolean;
+    /** режим сортировки на фронте */
+    localDataMode?: boolean;
+    /** режим множественной сортировки */
+    multipleSortEnabled?: boolean;
+    /** текст показывающийся при пустых данных */
+    emptyText?: string;
+    /** шаблон показывающийся при пустых данных */
+    emptyTemplate?: React.ReactElement;
+    /** подгруженные фронтом строки(если надо точечно подгружать строки в таблицу) */
+    loadedRows: Record<string, any>[];
+}
+export interface ITableBodyProps<TData> {
+    name: string;
+    rows: Row<TData>[];
+    rowDraggable: boolean;
+    columnDraggable?: boolean;
+    emptyText: string;
+    viewMode: ViewMode;
+    editedRow: TData;
+    tableViewMode: TableViewMode;
+    adaptive: boolean;
+    inSearch: boolean;
+    inSelect: boolean;
+    selectedRow: (row: TData) => boolean;
+    resultColumns: IHeadCell<TData>[];
+    root: string;
+    editable: boolean;
+    onClick: (item: Row<TData>) => void;
+    multiselectVisibility: MultiSelectType;
+    itemActions: IItemAction<TData>[];
+    keyProperty: string;
+    expanded: ExpandedState;
+    expandable: boolean;
+    selected: string[];
+    handleSelect: (item: TData) => void;
+    handleExpand: (item: Row<TData>, expandedState: Record<string, boolean>) => void;
+    itemActionsVisibilityCallback: (item: TData) => boolean;
+    rowBackgroundCallback: (row: TData) => string;
+    onItemActionClick: (actionId: string, item: TData, data?: unknown) => void;
+    onStartRowEdit: (item: TData) => void;
+    onAcceptRowEdit: (event: React.MouseEvent<unknown>, item: TData) => void;
+    virtualization: boolean;
+    hasMore: boolean;
+    loadingIconRef: React.MutableRefObject<any>;
+    virtualRows: VirtualItem[];
+    virtualizerTotalSize: number;
+    virtualColumns?: VirtualItem[];
+    virtualIndexes: number[];
+    columnVirtualizerTotalSize?: number;
+    leftPinnedColumns: Column<TData, unknown>[];
+    rightPinnedColumns: Column<TData, unknown>[];
+    clickedRow?: string | null;
+    overflowShadow: boolean;
+    colSpan: number;
+    resetNewRow: () => void;
+    isNewRowCreated: boolean;
+    setIsNewRowCreated: React.Dispatch<React.SetStateAction<boolean>>;
+    showTransposedTooltip?: boolean;
+    itemActionsDisabledTooltip?: (row: TData) => string;
+    itemActionsIcon?: JSX.Element;
+    enableRowDragCallback?: (row: TData) => boolean;
+    enableDrop: boolean;
+    onItemClick?: (row: TData) => void;
+    highlightDragOverRow?: boolean;
+    columnOrder: string[];
+}
+export interface ITableRowProps<TData> {
+    name: string;
+    selected: boolean;
+    determinate: boolean;
+    level: number;
+    viewMode: ViewMode;
+    tableViewMode?: TableViewMode;
+    root?: string | null;
+    adaptive: boolean;
+    inSearch: boolean;
+    inSelect: boolean;
+    onItemActionClick?: ITableProps<TData>['onItemActionClick'];
+    onStartRowEdit?: (item: TData | null) => void;
+    onAcceptRowEdit?: (event: React.MouseEvent<unknown>, item: TData | null) => void;
+    isEditedRow?: boolean;
+    expanded: ExpandedState;
+    onExpanded: (item: Row<TData>, expandedState?: TData) => void;
+    selectedRow: (row: TData) => boolean;
+    itemActionsVisibilityCallback: (row: TData) => boolean;
+    multiselectVisibility: MultiSelectType;
+    editable?: boolean;
+    columns: IHeadCell<TData>[];
+    onClick?: (item: Row<TData>) => void;
+    onSelect?: (item: TData) => void;
+    rowIndex: number;
+    keyProperty: string;
+    itemActions: IItemAction<TData>[];
+    row: Row<TData>;
+    dragOptions?: IRowDragOptions;
+    rowDraggable?: boolean;
+    columnDraggable?: boolean;
+    expandable?: boolean;
+    virtualized?: boolean;
+    rowBackgroundCallback?: ITableProps<TData>['rowBackgroundCallback'];
+    virtualization?: boolean;
+    virtualColumns?: VirtualItem[];
+    virtualIndexes: number[];
+    columnVirtualizerTotalSize?: number;
+    leftPinnedColumns: Column<TData, unknown>[];
+    rightPinnedColumns: Column<TData, unknown>[];
+    isClickHighlighted?: boolean;
+    overflowShadow: boolean;
+    virtualPaddingLeft?: number;
+    virtualPaddingRight?: number;
+    resetNewRow: () => void;
+    isNewRowCreated: boolean;
+    setIsNewRowCreated: React.Dispatch<React.SetStateAction<boolean>>;
+    showTransposedTooltip?: boolean;
+    itemActionsDisabledTooltip?: (row: TData) => string;
+    enableRowDragCallback?: (row: TData) => boolean;
+    enableDrop: boolean;
+    highlightDragOverRow?: boolean;
+    onItemClick?: (row: TData) => void;
+    columnOrder: string[];
+}
+export interface IRowCellProps<TData> {
+    cells: Cell<TData, unknown>[];
+    row: Row<TData>;
+    rowIndex: number;
+    expandable: boolean;
+    adaptive: boolean;
+    viewMode: ViewMode;
+    tableViewMode?: TableViewMode;
+    expanded: ExpandedState;
+    onExpanded: (item: Row<TData>, expandedState?: TData) => void;
+    keyProperty: string;
+    multiselectVisibility: MultiSelectType;
+    determinate: boolean;
+    selected: boolean;
+    onSelect: (item: TData) => void;
+    getBorderBottomStyle: () => string;
+    onClick: (item: Row<TData>) => void;
+    itemActions?: IItemAction<TData>[];
+    actionsVisible: boolean;
+    parentTreeTileItem: boolean;
+    editable: boolean;
+    onStartRowEdit?: (item: TData | null) => void;
+    onAcceptRowEdit?: (event: React.MouseEvent<unknown>, item: TData | null) => void;
+    onItemActionClick?: (actionId: string, item: TData, data?: TData[]) => void;
+    isEditedRow: boolean;
+    rowBackgroundCallback?: (row: TData) => string;
+    virtualization?: boolean;
+    virtualColumns?: VirtualItem[];
+    columnVirtualizerTotalSize?: number;
+    overflowShadow: boolean;
+    resetNewRow?: () => void;
+    isNewRowCreated?: boolean;
+    setIsNewRowCreated?: React.Dispatch<React.SetStateAction<boolean>>;
+    showTransposedTooltip?: boolean;
+    columnDraggable?: boolean;
+    itemActionsDisabledTooltip?: (row: TData) => string;
+    enableRowDragCallback?: (row: TData) => boolean;
+    isDragOver: boolean;
+}
+export interface ITableRowWrapperProps<TData> {
+    rowDraggable: boolean;
+    columnDraggable?: boolean;
+    itemKey: string;
+    row: Row<TData>;
+    rowIndex: number;
+    viewMode: ViewMode;
+    isEditedRow: boolean;
+    onStartRowEdit: (item: TData | null) => void;
+    onAcceptRowEdit: (event: React.MouseEvent<unknown>, item: TData) => void;
+    selected: boolean;
+    tableViewMode: TableViewMode;
+    adaptive: boolean;
+    inSearch: boolean;
+    inSelect: boolean;
+    selectedRow: (row: TData) => boolean;
+    resultColumns: IHeadCell<TData>[];
+    root: string;
+    editable: boolean;
+    level: number;
+    onClick: (TData: any) => void;
+    handleSelect: (item: any) => void;
+    rowBackgroundCallback: (row: TData) => string;
+    multiselectVisibility: MultiSelectType;
+    itemActions: IItemAction<TData>[];
+    keyProperty: string;
+    expanded: ExpandedState;
+    expandable: boolean;
+    handleExpand: (item: any, expandedState: any) => void;
+    itemActionsVisibilityCallback: (TData: any) => boolean;
+    onItemActionClick: (actionId: string, item: TData, data?: TData[]) => void;
+    isNodeDeterminate: boolean;
+    virtualization?: boolean;
+    virtualColumns?: VirtualItem[];
+    virtualIndexes: number[];
+    columnVirtualizerTotalSize?: number;
+    leftPinnedColumns: Column<TData, unknown>[];
+    rightPinnedColumns: Column<TData, unknown>[];
+    isClickHighlighted?: boolean;
+    overflowShadow: boolean;
+    virtualPaddingLeft?: number;
+    virtualPaddingRight?: number;
+    resetNewRow: () => void;
+    isNewRowCreated: boolean;
+    setIsNewRowCreated: React.Dispatch<React.SetStateAction<boolean>>;
+    showTransposedTooltip?: boolean;
+    itemActionsDisabledTooltip?: (row: TData) => string;
+    enableRowDragCallback?: (row: TData) => boolean;
+    enableDrop: boolean;
+    onItemClick?: (row: TData) => void;
+    highlightDragOverRow?: boolean;
+    name: string;
+    columnOrder: string[];
+}
+export interface IItemActionsProps<TData> {
+    actionsVisible: boolean;
+    row: Row<TData>;
+    editable: boolean;
+    onStartRowEdit: (item: TData | null) => void;
+    onAcceptRowEdit: (event: React.MouseEvent<unknown>, item: TData | null) => void;
+    itemActions: IItemAction<TData>[];
+    onItemActionClick: (actionId: string, item: TData, data?: TData[]) => void;
+    editedRow: boolean;
+    resetNewRow: () => void;
+    isNewRowCreated: boolean;
+    setIsNewRowCreated: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export interface ITableHeaderProps<TData> {
+    table: Table<TData>;
+    selectedKeys: string[];
+    data: TData[];
+    keyProperty: string;
+    onSettingsClick: () => void;
+    disableSelectAll: boolean;
+    singleSelect: boolean;
+    multiselectVisibility: MultiSelectType;
+    itemActions: IItemAction<TData>[];
+    hiddenHeader: boolean;
+    multipleSortEnabled: boolean;
+    setSelected: React.Dispatch<React.SetStateAction<string[]>>;
+    virtualization?: boolean;
+    virtualColumns?: VirtualItem[];
+    virtualIndexes: number[];
+    columnVirtualizerTotalSize?: number;
+    inSearch: boolean;
+    leftPinnedColumns: Column<TData, unknown>[];
+    rightPinnedColumns: Column<TData, unknown>[];
+    overflowShadow: boolean;
+    isNewRowCreated: boolean;
+    setIsNewRowCreated: React.Dispatch<React.SetStateAction<boolean>>;
+    addingRowTemplate: React.JSX.Element;
+    resultColumns: IHeadCell<TData>[];
+    tableData: TData[];
+    addingRowText?: string;
+    colSpan: number;
+    setEditedRow: (value: React.SetStateAction<TData>) => void;
+    onStartRowEdit?: (item: TData | null) => void;
+    columnDraggable?: boolean;
+    expandAllMethod?: (isAllRowsExpanded: boolean) => void;
+    isAllRowsExpanded: boolean;
+    setExpanded: React.Dispatch<React.SetStateAction<ExpandedState>>;
+    handleRequestSort: (event: React.MouseEvent<unknown, MouseEvent>, property: string, isParameter: boolean) => void;
+    handleMultipleSort: (property: string, isParameter: boolean) => void;
+    getSortOrder: (field: string) => void;
+    getSortDirection: (field: string) => void;
+    dataUpdateCallback?: (data: IHashMap[]) => void;
+    order: Order;
+    orderBy: string;
+    handleAutoFitWidth: (columnId: string) => void;
+    dragStartHandler: (event: any) => void;
+    dragEndHandler: (event: any) => void;
+    name: string;
+}
+export interface ITableHeaderCell<TData> {
+    header: Header<TData, unknown>;
+    multiselectVisibility: MultiSelectType;
+    colIndex: number;
+    handleRequestSort: (event: React.MouseEvent<unknown, MouseEvent>, property: string, isParameter: boolean) => void;
+    order: Order;
+    orderBy: string;
+    stickyStyle: Record<string, any>;
+    width: string | number;
+    columnDraggable: boolean;
+    dragOptions?: {
+        setNodeRef: Ref<HTMLTableRowElement>;
+        dragProps: Record<string, any>;
+        over: Over;
+    };
+    getSortOrder: (field: string) => number;
+    getSortDirection: (field: string) => 'asc' | 'desc';
+    handleAutoFitWidth: (columnId: string) => void;
+    dragStartHandler: (event: any) => void;
+    dragEndHandler: (event: any) => void;
+    tableName: string;
+}
+export interface ICellProps<TData> {
+    cell: Cell<TData, unknown>;
+    colSpan: number;
+    colIndex: number;
+    labelId: string;
+    cellKey: string;
+    row: Row<TData>;
+    keyProperty: string;
+    getBorderBottomStyle: () => string;
+    adaptive: boolean;
+    editable: boolean;
+    isEditedRow: boolean;
+    onExpanded: (item: Row<TData>, expandedState?: TData) => void;
+    levelPadding: number;
+    cellBg: string;
+    multiselectVisibility: MultiSelectType;
+    parentTreeTileItem: boolean;
+    colDraggableStyle?: TData;
+    nodeRef?: (node: HTMLElement) => void;
+    tooltipTitle?: React.JSX.Element | string;
+    isExpanded: boolean;
+    isLastColumn?: boolean;
+}
+export interface ICellColumnProps<TData> {
+    cell: Cell<TData, unknown>;
+    keyProperty: string;
+    row: Row<TData>;
+    editable: boolean;
+    isEditedRow: boolean;
+    isLastColumn?: boolean;
+}
+export interface ITillCellProps<TData> {
+    isEditedRow: boolean;
+    cells: Cell<TData, unknown>[];
+    row: Row<TData>;
+    selectedRow: boolean;
+    keyProperty: string;
+    multiselectVisibility: MultiSelectType;
+    determinate: boolean;
+    selected: boolean;
+    onExpanded: (item: Row<TData>, expandedState?: IHashMap) => void;
+    expandable: boolean;
+    parentTreeTileItem: boolean;
+    getBorderBottomStyle: () => string;
+    itemActions: IItemAction<TData>[];
+    actionsVisible: boolean;
+    editable: boolean;
+    onStartRowEdit: (item: TData | null) => void;
+    onAcceptRowEdit: (event: React.MouseEvent<unknown>, item: TData | null) => void;
+    onItemActionClick: (actionId: string, item: TData, data?: TData[]) => void;
+    resetNewRow: () => void;
+    isNewRowCreated: boolean;
+    setIsNewRowCreated: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare enum TableViewMode {
+    TABLE = 0,
+    TREE = 1,
+    TILE = 2
+}
+interface IRowDragOptions {
+    setNodeRef: Ref<HTMLTableRowElement>;
+    dragProps: Record<string, any>;
+    dragStyle: CSSProperties;
+    isOver: boolean;
+}
+export interface AddingButtonRowTemplateProps<TData> {
+    text: string;
+    colSpan?: number;
+    onClick?: () => Promise<void> | void;
+    infoTooltip?: string;
+    overflowShadow?: boolean;
+    isNewRowCreated?: boolean;
+    setIsNewRowCreated?: React.Dispatch<React.SetStateAction<boolean>>;
+    dataUpdateCallback?: (data: IHashMap[]) => void;
+    columns?: IHeadCell<TData>[];
+    tableData?: IHashMap[];
+    setEditedRow?: (value: React.SetStateAction<TData>) => void;
+    onStartRowEdit?: (item: IHashMap | null) => void;
+    itemActions?: IItemAction<TData>[];
+}
+export declare enum ConstantType {
+    Undefined = 0,
+    Number = 1,
+    Strings = 2,
+    Date = 3,
+    Boolean = 4,
+    Enum = 5,
+    DateTime = 6,
+    NotNullNumber = 7
+}
+export {};

package/dist/components/Table/utils/DataFormat.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Форматирует дату в формате дд.мм.гггг чч:мм
+ * @param date
+ */
+export declare const formatDateShortTime: (date: any) => string;
+/**
+ * Форматирует дату в формате дд.мм.гггг
+ * @param date
+ */
+export declare const formatDate: (date: any) => string;
+/**
+ * Форматирует дату для передачи в TextField для type datetime-local
+ * @param date
+ */
+export declare const formatDateToDateTimeLocalTextfield: (date: any) => string;
+/**
+ * Форматирует дату в формате 3 м. назад date-fns
+ * @param date
+ */
+export declare const formatTimeAgo: (date: any) => string;

package/dist/components/Table/utils/Drag.d.ts

@@ -0,0 +1,4 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSSProperties } from 'react';
+declare function getDragStyles(sortable: ReturnType<typeof useSortable>, isDraggable: boolean): CSSProperties;
+export { getDragStyles };

package/dist/components/Table/utils/hooks/useOverflowShadow.d.ts

@@ -0,0 +1,7 @@
+/**
+ * хук для отображения тени у элементов. Тень есть, если можно скроллить
+ * @param containerRef
+ * @returns
+ */
+declare const useOverflowShadow: (containerRef: React.MutableRefObject<HTMLDivElement>) => boolean;
+export default useOverflowShadow;

package/dist/components/Table/utils/util.d.ts

@@ -0,0 +1,77 @@
+import { CSSProperties } from '@mui/material/styles';
+import { default as React } from 'react';
+import { IHashMap, IHeadCell, THeadCellType } from '../interfaces/interfaces';
+export declare function getCellContentByType<T>(type: THeadCellType, value: T): string | T | React.JSX.Element;
+export declare const actionsShadow: {
+    content: string;
+    width: number;
+    height: string;
+    position: string;
+    right: string;
+    top: number;
+    background: string;
+};
+export declare const itemActionsStyle: {
+    position: string;
+    right: number;
+    top: number;
+    display: string;
+    alignItems: string;
+    justifyContent: string;
+    zIndex: number;
+    '&:before': {
+        content: string;
+        width: number;
+        height: string;
+        position: string;
+        right: string;
+        top: number;
+        background: string;
+    };
+};
+export declare const stickyStyle: {
+    position: string;
+    top: number;
+    background: string;
+};
+/**
+ * Обработка колонок для таблицы десктоп/адаптив
+ * @param columns
+ * @param adaptive
+ */
+export declare const getTableColumns: <TData>(columns: IHeadCell<TData>[], adaptive: boolean) => {
+    columns: unknown;
+    header: string;
+    label: string;
+    field: string;
+    editable?: boolean;
+    editTemplate?: (row: TData, props: IHashMap) => React.JSX.Element;
+    fixed?: boolean;
+    hiddenSelect?: boolean;
+    hidden?: boolean;
+    type?: THeadCellType;
+    sorting?: boolean;
+    width?: number;
+    folder?: import('../interfaces/interfaces').ICellFolderCfg;
+    disablePadding?: boolean;
+    template?: (row: TData, props: TData) => React.JSX.Element;
+    backgroundColorCallback?: (row: TData) => string | undefined;
+    isLast?: boolean;
+}[];
+export declare const getCommonPinningStyles: (column: any, isHeader?: boolean, hasShadow?: boolean) => CSSProperties;
+export declare const dragOverlayStyle: {
+    padding: string;
+    background: string;
+    borderRadius: string;
+    height: number;
+    boxShadow: (theme: any) => any;
+    cursor: string;
+    whiteSpace: string;
+    opacity: number;
+};
+/**
+ * Получение элемента таблицы по id. Работает с плоским списком/деревом
+ * @param data
+ * @param id
+ */
+export declare function getTableItemById(data: IHashMap[], id: string): IHashMap;

package/dist/components/Tabs/Tabs.d.ts

@@ -7,10 +7,10 @@ interface TabProps {
     endTemplate?: React.ReactNode;
     count?: number;
 }
-interface CustomTabsProps {
+interface ITabsProps {
     tabs: TabProps[];
     activeTab: number;
     onChange: (tab: number) => void;
 }
-export declare const Tabs: React.FC<CustomTabsProps>;
+export declare const Tabs: React.FC<ITabsProps>;
 export {};

package/dist/uikit.js

@@ -10472,15 +10472,15 @@ process.env.NODE_ENV !== "production" && (jo.propTypes = {
 });
 const m1 = ({ tabs: e, activeTab: t, onChange: n }) => {
   const r = bp(), i = () => {
-    const d = location.pathname + location.search;
-    return e.find((f) => f.to === d)?.id ?? t;
-  }, [a, s] = ct(i()), l = (d, u) => {
+    const d = location.pathname + location.search, u = e.find((g) => g.to === d), f = u?.id ?? t;
+    return { foundTab: u, newActiveTabId: f };
+  }, [a, s] = ct(i()?.newActiveTabId), l = (d, u) => {
     const f = e.find((g) => g.id === u);
     f && (s(u), f.to && r(f.to), n?.(u));
   };
   Co(() => {
-    const d = i();
-    a !== d && (s(d), n?.(d));
+    const { foundTab: d, newActiveTabId: u } = i();
+    a !== u && (s(u), n?.(u)), document.title = d?.label || "JSA APS";
   }, [location.pathname, location.search]);
   const c = ({ label: d, startTemplate: u, endTemplate: f, count: g }) => /* @__PURE__ */ ie(
     Kt,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdtl/uikit",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "type": "module",
   "main": "./dist/uikit.js",
   "types": "./dist/index.d.ts",
@@ -30,7 +30,14 @@
     "react-router-dom": "6.16.0",
     "react-dom": "18.2.0",
     "re-resizable": "^6.11.2",
-    "react-infinite-scroll-hook": "5.0.2"
+    "react-infinite-scroll-hook": "5.0.2",
+    "date-fns": "^4.1.0",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.10",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
@@ -45,7 +52,6 @@
     "react-dom": "18.2.0",
     "re-resizable": "^6.11.2",
     "react-infinite-scroll-hook": "5.0.2",
-
     "@eslint/js": "^9.36.0",
     "@types/node": "^24.5.2",
     "@types/react": "^19.1.13",
@@ -72,6 +78,13 @@
     "vite-plugin-checker": "^0.6.2",
     "vite-plugin-circular-dependency": "^0.2.1",
     "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-html": "^3.2.0"
+    "vite-plugin-html": "^3.2.0",
+    "date-fns": "^4.1.0",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.10",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2"
   }
 }