@astral/ui 0.48.4 → 1.0.0-test.1670405759

package/esm/DataGrid/DataGridBody/DataGridBody.js

@@ -1,40 +1,28 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
 import { TableCell, TableRow } from '../../Table';
 import { DataGridCell } from '../DataGridCell';
 import { Checkbox } from '../../Checkbox';
-import { StyledTableBody } from './styled';
-export function DataGridBody(_a) {
-    var rows = _a.rows, columns = _a.columns, selectable = _a.selectable, onRowClick = _a.onRowClick, onSelectRow = _a.onSelectRow, _b = _a.selectedRows, selectedRows = _b === void 0 ? [] : _b, minDisplayRows = _a.minDisplayRows, keyId = _a.keyId, emptyCellValue = _a.emptyCellValue;
-    var renderCells = useCallback(function (row, rowId) {
-        return columns.map(function (cell, index) {
-            var cellId = "".concat(rowId, "-").concat(index);
+import { StyledTableBody } from './styles';
+export function DataGridBody({ rows, columns, selectable, onRowClick, onSelectRow, selectedRows = [], minDisplayRows, keyId, emptyCellValue, noDataPlaceholder, }) {
+    const renderCells = useCallback((row, rowId) => {
+        return columns.map((cell, index) => {
+            const cellId = `${rowId}-${index}`;
             return (_jsx(DataGridCell, { row: row, cell: cell, emptyCellValue: emptyCellValue }, cellId));
         });
     }, [columns]);
-    var handleRowClick = function (row) { return function () {
+    const handleRowClick = (row) => () => {
         if (onRowClick) {
             onRowClick(row);
         }
-    }; };
-    var renderedRows = useMemo(function () {
-        return rows.map(function (row) {
-            var rowId = row[keyId];
-            var checked = selectable &&
-                Boolean(selectedRows.find(function (selectedRow) { return selectedRow[keyId] === rowId; }));
-            return (_jsxs(TableRow, __assign({ hover: Boolean(onRowClick), onClick: handleRowClick(row) }, { children: [selectable && (_jsx(TableCell, __assign({ padding: "checkbox", onClick: function (event) { return event.stopPropagation(); } }, { children: _jsx(Checkbox, { checked: checked, onChange: onSelectRow(row) }) }))), renderCells(row, rowId)] }), rowId));
+    };
+    const renderedRows = useMemo(() => {
+        return rows.map((row) => {
+            const rowId = row[keyId];
+            const checked = selectable &&
+                Boolean(selectedRows.find((selectedRow) => selectedRow[keyId] === rowId));
+            return (_jsxs(TableRow, Object.assign({ hover: Boolean(onRowClick), onClick: handleRowClick(row) }, { children: [selectable && (_jsx(TableCell, Object.assign({ padding: "checkbox", onClick: (event) => event.stopPropagation() }, { children: _jsx(Checkbox, { checked: checked, onChange: onSelectRow(row) }) }))), renderCells(row, rowId)] }), rowId));
         });
     }, [rows, keyId, selectable, selectedRows, onSelectRow, onRowClick, columns]);
-    return (_jsx(StyledTableBody, __assign({ empty: !rows.length, minDisplayRows: minDisplayRows }, { children: renderedRows })));
+    return (_jsx(StyledTableBody, Object.assign({ empty: !rows.length, minDisplayRows: minDisplayRows }, { children: rows.length ? renderedRows : noDataPlaceholder })));
 }

package/esm/DataGrid/DataGridBody/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const StyledTableBody: import("@emotion/styled").StyledComponent<import("../../Table").TableBodyProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    empty: boolean;
+    minDisplayRows: number;
+}, {}, {}>;

package/esm/DataGrid/DataGridBody/styles.js

@@ -0,0 +1,13 @@
+import { styled } from '../../styles';
+import { TableBody } from '../../Table';
+const TABLE_ROW_HEIGHT = 44;
+export const StyledTableBody = styled(TableBody, {
+    shouldForwardProp: (prop) => prop !== 'empty' && prop !== 'minDisplayRows',
+}) `
+  height: ${({ empty, minDisplayRows }) => empty ? `${TABLE_ROW_HEIGHT * minDisplayRows}px` : '100%'};
+
+  /* Без этого в FF не применяется height */
+  &::after {
+    content: '';
+  }
+`;

package/esm/DataGrid/DataGridCell/DataGridCell.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 import { DataGridColumns } from '../types';
-export declare type CellProps<Data> = {
+export type CellProps<Data extends object> = {
     row: Data;
     cell: DataGridColumns<Data>;
     emptyCellValue?: ReactNode;
 };
-export declare function DataGridCell<Data>({ row, cell: { field, renderCell, format, align }, emptyCellValue, }: CellProps<Data>): JSX.Element;
+export declare function DataGridCell<Data extends object>({ row, cell: { field, renderCell, format, align }, emptyCellValue, }: CellProps<Data>): JSX.Element;

package/esm/DataGrid/DataGridCell/DataGridCell.js

@@ -1,21 +1,9 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { TableCell } from '../../Table';
 import { Typography } from '../../Typography';
-export function DataGridCell(_a) {
-    var row = _a.row, _b = _a.cell, field = _b.field, renderCell = _b.renderCell, format = _b.format, _c = _b.align, align = _c === void 0 ? 'left' : _c, _d = _a.emptyCellValue, emptyCellValue = _d === void 0 ? '-' : _d;
-    var formattedValue = useMemo(function () {
+export function DataGridCell({ row, cell: { field, renderCell, format, align = 'left' }, emptyCellValue = '-', }) {
+    const formattedValue = useMemo(() => {
         if (format) {
             return format(row);
         }
@@ -24,5 +12,5 @@ export function DataGridCell(_a) {
         }
         return emptyCellValue;
     }, [field, format, row, emptyCellValue]);
-    return (_jsxs(TableCell, __assign({ align: align }, { children: [renderCell && renderCell(row), !renderCell && (_jsx(Typography, { children: _jsx(_Fragment, { children: formattedValue }) }))] })));
+    return (_jsxs(TableCell, Object.assign({ align: align }, { children: [renderCell && renderCell(row), !renderCell && (_jsx(Typography, { children: _jsx(_Fragment, { children: formattedValue }) }))] })));
 }

package/esm/DataGrid/DataGridHead/DataGridHead.d.ts

@@ -1,12 +1,12 @@
 import { ChangeEvent } from 'react';
 import { DataGridColumns, DataGridRow, DataGridSort } from '../types';
-export declare type DataGridHeadProps<Data = DataGridRow, SortField extends keyof Data = keyof Data> = {
+export type DataGridHeadProps<Data extends object = DataGridRow, SortField extends keyof Data = keyof Data> = {
     columns: DataGridColumns<Data>[];
     selectable: boolean;
     onSelectAllRows: (event: ChangeEvent<HTMLInputElement>) => void;
-    sorting: DataGridSort<SortField>[];
-    onSort?: (sorting: DataGridSort<SortField>[]) => void;
+    sorting?: DataGridSort<SortField>;
+    onSort?: (sorting: DataGridSort<SortField> | undefined) => void;
     uncheckedRowsCount: number;
     rowsCount: number;
 };
-export declare function DataGridHead<Data, SortField extends keyof Data>({ columns, selectable, onSelectAllRows, rowsCount, onSort, sorting, uncheckedRowsCount, }: DataGridHeadProps<Data, SortField>): JSX.Element;
+export declare function DataGridHead<Data extends object, SortField extends keyof Data>({ columns, selectable, onSelectAllRows, rowsCount, onSort, sorting, uncheckedRowsCount, }: DataGridHeadProps<Data, SortField>): JSX.Element;

package/esm/DataGrid/DataGridHead/DataGridHead.js

@@ -1,68 +1,33 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
 import { TableHead } from '../../Table/TableHead';
 import { TableCell, TableRow } from '../../Table';
 import { Checkbox } from '../../Checkbox';
-import { SortStates } from '../constants';
+import { SortStates } from '../enums';
 import { DataGridHeadColumn } from '../DataGridHeadColumn';
-export function DataGridHead(_a) {
-    var columns = _a.columns, selectable = _a.selectable, onSelectAllRows = _a.onSelectAllRows, rowsCount = _a.rowsCount, onSort = _a.onSort, _b = _a.sorting, sorting = _b === void 0 ? [] : _b, uncheckedRowsCount = _a.uncheckedRowsCount;
-    var checked = useMemo(function () { return !Boolean(uncheckedRowsCount) && rowsCount > 0; }, [uncheckedRowsCount, rowsCount]);
-    var indeterminate = useMemo(function () { return uncheckedRowsCount > 0 && uncheckedRowsCount < rowsCount; }, [uncheckedRowsCount, rowsCount]);
-    var handleSort = useCallback(function (field) {
+export function DataGridHead({ columns, selectable, onSelectAllRows, rowsCount, onSort, sorting, uncheckedRowsCount, }) {
+    const checked = useMemo(() => !Boolean(uncheckedRowsCount) && rowsCount > 0, [uncheckedRowsCount, rowsCount]);
+    const indeterminate = useMemo(() => uncheckedRowsCount > 0 && uncheckedRowsCount < rowsCount, [uncheckedRowsCount, rowsCount]);
+    const handleSort = useCallback((field) => {
         if (!onSort) {
             return;
         }
-        var currentSort = sorting.find(function (_a) {
-            var fieldId = _a.fieldId;
-            return fieldId === field;
-        });
+        const isCurrentField = (sorting === null || sorting === void 0 ? void 0 : sorting.fieldId) === field;
         // если для выбранного столбца текущая сортировка ASC - меняем на DESC
-        if (currentSort && currentSort.sort === SortStates.ASC) {
-            var newSorting = __spreadArray(__spreadArray([], sorting.filter(function (_a) {
-                var fieldId = _a.fieldId;
-                return fieldId !== field;
-            }), true), [
-                { fieldId: field, sort: SortStates.DESC },
-            ], false);
-            return onSort(newSorting);
-            // если для выбранного столбца текущая сортировка DESC - убираем сортировку
+        if (isCurrentField && sorting.sort === SortStates.ASC) {
+            return onSort({ fieldId: field, sort: SortStates.DESC });
         }
-        else if (currentSort && currentSort.sort === SortStates.DESC) {
-            var newSorting = sorting.filter(function (_a) {
-                var fieldId = _a.fieldId;
-                return fieldId !== field;
-            });
-            return onSort(newSorting);
+        // если для выбранного столбца текущая сортировка DESC - убираем сортировку
+        if (isCurrentField && sorting.sort === SortStates.DESC) {
+            return onSort(undefined);
         }
         // если для выбранного столбца нет сортировки - добавляем сортировку ASC
-        onSort(__spreadArray(__spreadArray([], sorting, true), [{ fieldId: field, sort: SortStates.ASC }], false));
+        onSort({ fieldId: field, sort: SortStates.ASC });
     }, [sorting, onSort]);
-    var renderColumns = useMemo(function () {
-        return columns.map(function (_a) {
-            var field = _a.field, label = _a.label, sortable = _a.sortable, align = _a.align, width = _a.width;
+    const renderColumns = useMemo(() => {
+        return columns.map(({ field, label, sortable, align, width }) => {
             return (_jsx(DataGridHeadColumn, { sorting: sorting, field: field, onSort: handleSort, label: label, sortable: sortable, align: align, width: width }, label));
         });
     }, [columns, handleSort, sorting]);
-    return (_jsx(TableHead, { children: _jsxs(TableRow, { children: [selectable && (_jsx(TableCell, __assign({ padding: "checkbox" }, { children: _jsx(Checkbox, { checked: checked, indeterminate: indeterminate, onChange: onSelectAllRows }) }))), renderColumns] }) }));
+    return (_jsx(TableHead, { children: _jsxs(TableRow, { children: [selectable && (_jsx(TableCell, Object.assign({ padding: "checkbox" }, { children: _jsx(Checkbox, { checked: checked, indeterminate: indeterminate, onChange: onSelectAllRows }) }))), renderColumns] }) }));
 }

package/esm/DataGrid/DataGridHeadColumn/DataGridHeadColumn.d.ts

@@ -1,9 +1,9 @@
 import { CSSProperties } from 'react';
 import { TableCellProps } from '@mui/material';
 import { DataGridRow, DataGridSort } from '../types';
-export declare type DataGridHeadColumnProps<Data = DataGridRow, SortField extends keyof Data = keyof Data> = {
+export type DataGridHeadColumnProps<Data = DataGridRow, SortField extends keyof Data = keyof Data> = {
     onSort: (field: SortField) => void;
-    sorting: DataGridSort<SortField>[];
+    sorting?: DataGridSort<SortField>;
     label?: string;
     sortable?: boolean;
     align?: TableCellProps['align'];

package/esm/DataGrid/DataGridHeadColumn/DataGridHeadColumn.js

@@ -1,31 +1,29 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { Typography } from '../../Typography/Typography';
-import { SortStates } from '../constants';
-import { StyledTableCell, StyledTableSortLabel } from './styled';
-export function DataGridHeadColumn(_a) {
-    var onSort = _a.onSort, field = _a.field, sortable = _a.sortable, align = _a.align, label = _a.label, sorting = _a.sorting, width = _a.width;
-    var sortParams = useMemo(function () { return sorting.find(function (_a) {
-        var fieldId = _a.fieldId;
-        return field === fieldId;
-    }); }, [sorting, field]);
-    var hideSortIcon = useMemo(function () { return !Boolean(sortParams); }, [sortParams]);
-    var sortDirection = useMemo(function () { return (sortParams ? sortParams.sort : SortStates.ASC); }, [sortParams]);
-    var handleSortClick = function () {
+import { SortDownFillSm, SortFillSm, SortUpFillSm } from '@astral/icons';
+import { SortStates } from '../enums';
+import { StyledTableCell, TableCellTitle } from './styles';
+export function DataGridHeadColumn({ onSort, field, sortable, align, label, sorting, width, }) {
+    const sortIcon = useMemo(() => {
+        if (!sortable) {
+            return null;
+        }
+        if ((sorting === null || sorting === void 0 ? void 0 : sorting.fieldId) !== field) {
+            return _jsx(SortFillSm, {});
+        }
+        switch (sorting === null || sorting === void 0 ? void 0 : sorting.sort) {
+            case SortStates.ASC:
+                return _jsx(SortUpFillSm, { color: "primary" });
+            case SortStates.DESC:
+                return _jsx(SortDownFillSm, { color: "primary" });
+            default:
+                return _jsx(SortFillSm, {});
+        }
+    }, [sorting, sortable, field]);
+    const handleSortClick = () => {
         if (field && sortable) {
             onSort(field);
         }
     };
-    return (_jsxs(StyledTableCell, __assign({ onClick: handleSortClick, align: align, width: width, sortable: sortable }, { children: [_jsx(Typography, __assign({ variant: "pointer" }, { children: label })), sortable && (_jsx(StyledTableSortLabel, { hideSortIcon: hideSortIcon, direction: sortDirection, active: true }))] })));
+    return (_jsx(StyledTableCell, Object.assign({ onClick: handleSortClick, align: align, width: width, sortable: sortable }, { children: _jsxs(TableCellTitle, Object.assign({ variant: "pointer" }, { children: [label, sortIcon] })) })));
 }

package/esm/DataGrid/DataGridHeadColumn/styles.d.ts

@@ -0,0 +1,11 @@
+import { TableCellProps } from '@mui/material';
+import { CSSProperties } from 'react';
+export declare const StyledTableCell: import("@emotion/styled").StyledComponent<import("../../Table").TableCellProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & TableCellProps & {
+    width?: CSSProperties['width'];
+    sortable?: boolean | undefined;
+}, {}, {}>;
+export declare const TableCellTitle: import("@emotion/styled").StyledComponent<Pick<import("react").PropsWithChildren<import("../../Typography").TypographyProps>, string | number | symbol> & import("react").RefAttributes<HTMLElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/esm/DataGrid/DataGridHeadColumn/styles.js

@@ -0,0 +1,24 @@
+import { styled } from '../../styles';
+import { TableCell } from '../../Table';
+import { Typography } from '../../Typography';
+export const StyledTableCell = styled(TableCell, {
+    shouldForwardProp: (prop) => prop !== 'width' && prop !== 'sortable',
+}) `
+  width: ${({ width = 'auto' }) => width};
+  padding: ${({ theme }) => theme.spacing(3, 4)};
+
+  color: ${({ theme }) => theme.palette.grey[700]};
+
+  cursor: ${({ sortable }) => (sortable ? 'pointer' : 'initial')};
+
+  user-select: none;
+`;
+export const TableCellTitle = styled(Typography) `
+  display: flex;
+  align-items: center;
+
+  > svg {
+    width: 16px;
+    height: 16px;
+  }
+`;

package/esm/DataGrid/DataGridLoader/DataGridLoader.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
-export declare type DataGridLoaderProps = {
+export type DataGridLoaderProps = {
     loading?: boolean;
+    disabled?: boolean;
+    withFooter: boolean;
+    footerHeight: number;
 };
-declare const DataGridLoader: ({ loading }: DataGridLoaderProps) => JSX.Element;
+declare const DataGridLoader: ({ loading, disabled, withFooter, footerHeight, }: DataGridLoaderProps) => JSX.Element;
 export default DataGridLoader;

package/esm/DataGrid/DataGridLoader/DataGridLoader.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Backdrop, LoaderWrapper, StyledDivider, StyledLinearProgress, } from './styled';
-var DataGridLoader = function (_a) {
-    var _b = _a.loading, loading = _b === void 0 ? false : _b;
-    return (_jsxs(LoaderWrapper, { children: [loading && _jsx(Backdrop, {}), loading ? _jsx(StyledLinearProgress, {}) : _jsx(StyledDivider, {})] }));
+import { Backdrop, LoaderWrapper, StyledDivider, StyledLinearProgress, } from './styles';
+const DataGridLoader = ({ loading = false, disabled = false, withFooter, footerHeight, }) => {
+    return (_jsxs(LoaderWrapper, { children: [(loading || disabled) && (_jsx(Backdrop, { withFooter: withFooter, footerHeight: footerHeight })), loading && _jsx(StyledLinearProgress, {}), !loading && _jsx(StyledDivider, {})] }));
 };
 export default DataGridLoader;

package/esm/DataGrid/DataGridLoader/index.d.ts

@@ -1 +1 @@
-export * from './styled';
+export * from './styles';

package/esm/DataGrid/DataGridLoader/index.js

@@ -1 +1 @@
-export * from './styled';
+export * from './styles';

package/esm/DataGrid/DataGridLoader/styles.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+type BackdropProps = {
+    withFooter: boolean;
+    footerHeight: number;
+};
+export declare const Backdrop: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & BackdropProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledDivider: import("@emotion/styled").StyledComponent<import("../../Divider").DividerProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const LoaderWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledLinearProgress: import("@emotion/styled").StyledComponent<import("@mui/material").LinearProgressProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export {};

package/esm/DataGrid/DataGridLoader/styles.js

@@ -0,0 +1,24 @@
+import { LinearProgress } from '@mui/material';
+import { Divider } from '../../Divider';
+import { styled } from '../../styles';
+export const Backdrop = styled.div `
+  position: absolute;
+  top: 0;
+
+  width: 100%;
+
+  /* Если в DataGrid передан Footer, нужно чтобы Backdrop не перекрывал его в состоянии loading, поэтому тут его высота вычитается из всей высоты бэкдропа */
+  height: ${({ withFooter, footerHeight }) => withFooter ? `calc(100% - ${footerHeight}px) ` : '100%'};
+
+  background-color: ${({ theme }) => theme.palette.background.element};
+  opacity: 0.3;
+`;
+export const StyledDivider = styled(Divider) `
+  border-width: 1px;
+`;
+export const LoaderWrapper = styled.div `
+  height: 2px;
+`;
+export const StyledLinearProgress = styled(LinearProgress) `
+  height: 2px;
+`;

package/esm/DataGrid/DataGridNoData/DataGridNoData.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export type DataGridNoDataProps = {
+    /**
+     * @default 'Нет данных'
+     * @example <DataGridNoData title='Нет данных' />
+     * @description Заголовок
+     */
+    title?: string;
+    /**
+     * @default BaseNoDataIcon()
+     * @example <DataGridNoData noDataIcon={BaseNoDataIcon()} />
+     * @description Иконка
+     */
+    noDataIcon?: ReactNode;
+    /**
+     * @default 250
+     * @example <DataGridNoData noDataIconWidth={250} />
+     * @description Ширина иконки (высота рассчитывается пропорционально ширине)
+     */
+    noDataIconWidth?: number;
+};
+export declare const DataGridNoData: ({ title, noDataIcon, noDataIconWidth, }: DataGridNoDataProps) => JSX.Element;

package/esm/DataGrid/DataGridNoData/DataGridNoData.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DataGridNoDataFigcaption, DataGridNoDataFigure, DataGridNoDataIcon, DataGridNoDataWrapper, } from './styles';
+const BaseNoDataIcon = () => (_jsxs("svg", Object.assign({ viewBox: "0 0 124 124", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { fill: "#EBEEF1", stroke: "#B7C2CE", d: "M106.5 62a43.5 43.5 0 1 1-87 0 43.5 43.5 0 0 1 87 0Z" }), _jsx("path", { fill: "#B7C2CE", fillRule: "evenodd", d: "m48.3 74 22.5-44.7a5.3 5.3 0 0 1 7-2.3l23.7 12a5 5 0 0 1 2.7 3l4.7 14.8c.4 1.3.3 2.7-.3 4L91 95.4a5.3 5.3 0 0 1-7.1 2.3L50.6 81a5.3 5.3 0 0 1-2.3-7Zm.9.4 22.5-44.6c1-2.1 3.6-3 5.7-1.9l23.7 12c.7.3 1.2.8 1.6 1.4l-3.3 6.5a5.3 5.3 0 0 0 2.4 7l6.3 3.3c0 .7 0 1.5-.4 2.2L90.2 95a4.4 4.4 0 0 1-5.8 1.8L51.1 80.1c-2.1-1-3-3.6-2-5.7Z", clipRule: "evenodd" }), _jsx("path", { fill: "#fff", d: "M71.7 29.8 49.2 74.4c-1 2-.2 4.7 1.9 5.7L84.4 97c2.1 1.1 4.7.3 5.8-1.8l17.5-34.8c.3-.7.5-1.5.4-2.2l-6.3-3.2a5.3 5.3 0 0 1-2.4-7l3.3-6.6c-.4-.6-1-1.1-1.6-1.4L77.4 28c-2.1-1-4.7-.2-5.7 1.9Z" }), _jsx("path", { fill: "#B7C2CE", fillRule: "evenodd", d: "M77 33.9c.1-.4.6-.5 1-.3l17.5 8.8a.7.7 0 0 1-.6 1.3l-17.6-8.9a.7.7 0 0 1-.3-1Zm-2.4 4.6c.2-.3.6-.5 1-.3l6.1 3.1a.7.7 0 0 1-.6 1.3l-6.2-3.1a.7.7 0 0 1-.3-1Z", clipRule: "evenodd" }), _jsx("path", { stroke: "#B7C2CE", strokeLinecap: "round", strokeWidth: "2.1", d: "m57.1 74 5.6 2.8m4.6 2.3 2.4 1.2" }), _jsx("path", { fill: "#B7C2CE", fillRule: "evenodd", d: "M67.8 50.5a2.6 2.6 0 0 1 3.5-1.1l25.5 12.8c1.3.6 1.8 2.2 1.1 3.5l-7.5 15a2.6 2.6 0 0 1-3.6 1.2L61.4 69a2.6 2.6 0 0 1-1.2-3.5l7.6-15Zm3-.3 25.5 12.9c.8.4 1.2 1.4.7 2.2l-1 2.3-28.5-14.3 1.2-2.3c.4-.8 1.4-1.2 2.2-.8Zm-3.7 4-1.8 3.5L93.6 72l1.9-3.6L67 54.1Zm26.1 18.7L64.8 58.6 62.6 63l28.3 14.3 2.3-4.4Zm-2.6 5.3h-.2L62.2 63.8l-1 2c-.5.9-.2 1.8.6 2.3L87.3 81c.8.4 1.8 0 2.2-.7l1-2.1Z", clipRule: "evenodd" }), _jsx("path", { fill: "#fff", d: "M41.1 30.7c.7-.3 1.4-.5 2.1-.5l3.7 6.3a5.3 5.3 0 0 0 7.2 2l6.1-3.7c.7.4 1.2 1 1.6 1.6l19.5 33.7c1.2 2 .5 4.7-1.6 5.9L47.4 94.6c-2 1.2-4.7.5-5.9-1.5l-25-43.3c-1.1-2-.4-4.6 1.6-5.8l23-13.3Z" }), _jsx("path", { fill: "#B7C2CE", fillRule: "evenodd", d: "M61.2 34.3c-.5-.4-1-.7-1.7-.8l-14.8-4.1a5.3 5.3 0 0 0-4 .5L17.6 43a5.3 5.3 0 0 0-2 7.2l25 43.3a5.3 5.3 0 0 0 7.2 2l32.3-18.8a5.3 5.3 0 0 0 2-7.2L62.7 36c-.4-.6-.9-1.2-1.5-1.6Zm-18-4.1c-.7 0-1.4.2-2 .5L18.1 44a4.3 4.3 0 0 0-1.6 5.8l25 43.3c1.1 2 3.7 2.7 5.8 1.5L79.7 76c2-1.2 2.8-3.8 1.6-5.9L61.8 36.4c-.4-.7-.9-1.2-1.6-1.6l-6.1 3.6a5.3 5.3 0 0 1-7.2-2l-3.7-6.2Z", clipRule: "evenodd" }), _jsx("path", { fill: "#B7C2CE", fillRule: "evenodd", d: "M23 47.8c-.2-.4-.2-1 .2-1.1l17-9.9c.4-.2.8 0 1.1.5.3.4.2 1-.1 1.1l-17 9.9c-.4.2-1 0-1.2-.5Zm2.6 4.5c-.2-.4-.2-1 .2-1.1l6-3.5c.3-.2.8 0 1 .5.3.4.2 1-.1 1.2l-6 3.4c-.3.2-.8 0-1-.5ZM45 87.2c-.2-.2-.1-.5.1-.6l6.4-3.7a.5.5 0 0 1 .5.8l-6.4 3.7c-.2.1-.5 0-.7-.2Zm9.8-5.7c-.1-.2 0-.5.2-.6l3.3-2c.2 0 .5 0 .6.2.1.3 0 .6-.2.7l-3.3 1.9c-.2.1-.5 0-.6-.2Zm-23-17.1a2.6 2.6 0 0 1 1-3.6l26.4-15.2c1.3-.8 2.9-.3 3.6 1L71.2 61c.7 1.2.3 2.8-1 3.6L43.8 79.9c-1.3.8-2.9.3-3.6-1l-8.4-14.5Zm1.5-2.7 26.4-15.3c.8-.4 1.8-.1 2.2.6l8.4 14.6c.5.8.2 1.8-.6 2.2L43.3 79.1c-.8.4-1.8.2-2.2-.6l-1.2-2 29.3-17-.5-.8-29.3 16.9-2.5-4.3 29.3-16.9-.5-.9-29.3 17-2-3.5 29.3-17-.5-.8-29.3 17-1.2-2.3c-.5-.7-.2-1.7.6-2.2Z", clipRule: "evenodd" }), _jsx("path", { fill: "#fff", d: "M34.7 30.1v64.1c0 3 2.4 5.4 5.4 5.4h45.4c3 0 5.4-2.4 5.4-5.4v-50c0-.6-.1-1.2-.3-1.7h-9.2A6.4 6.4 0 0 1 75 36V25.4c-.8-.4-1.8-.7-2.7-.7H40c-3 0-5.4 2.4-5.4 5.4Z" }), _jsx("path", { fill: "#B7C2CE", fillRule: "evenodd", d: "M75 24.3c-.9-.4-1.8-.6-2.7-.6H40a6.4 6.4 0 0 0-6.4 6.4v64.1c0 3.6 2.9 6.4 6.4 6.4h45.4c3.5 0 6.4-2.8 6.4-6.4v-50a6.4 6.4 0 0 0-1.8-4.4l-13-14a6.4 6.4 0 0 0-2-1.5Zm-40.3 70V30c0-3 2.4-5.4 5.4-5.4h32.2c1 0 1.9.3 2.7.7V36c0 3.5 2.9 6.4 6.4 6.4h9.2c.2.5.3 1 .3 1.7v50c0 3-2.4 5.4-5.4 5.4H40c-3 0-5.4-2.4-5.4-5.4Z", clipRule: "evenodd" }), _jsx("path", { fill: "#B7C2CE", fillRule: "evenodd", d: "M43 34c0-.5.5-1 1-1h20.7c.5 0 1 .5 1 1s-.5 1-1 1H44a1 1 0 0 1-1-1Zm0 3.8c0-.5.5-1 1-1h7.6c.5 0 .9.5.9 1s-.4 1-.9 1H44a1 1 0 0 1-1-1Zm-.8 52c0-.2.1-.4.4-.4H52c.3 0 .5.2.5.4 0 .3-.2.5-.5.5h-9.4c-.3 0-.4-.2-.4-.5Zm14 0c0-.2.2-.4.5-.4h4.7c.3 0 .5.2.5.4 0 .3-.2.5-.5.5h-4.7c-.3 0-.5-.2-.5-.5Zm-15-34.9c0-1.2 1-2.1 2.1-2.1h39c1.1 0 2 1 2 2v24a2 2 0 0 1-2 2.1h-39a2 2 0 0 1-2-2v-24Zm2.1-1.1h39c.6 0 1 .5 1 1v4.6h-41V55c0-.6.4-1.1 1-1.1Zm-1 20.6v4.4c0 .6.4 1.1 1 1.1h39c.6 0 1-.5 1-1v-4.5h-41Zm41-1h-41V67h41v6.6Zm0-13.1V66h-41v-5.7h41Z", clipRule: "evenodd" }), _jsx("circle", { cx: "19.8", cy: "35.9", r: "2", fill: "#F0F4F7" }), _jsx("circle", { cx: "101.2", cy: "28.3", r: "2.7", fill: "#F0F4F7" }), _jsx("circle", { cx: "29.5", cy: "98.4", r: "1.9", fill: "#DDE2E8" }), _jsx("circle", { cx: "24.3", cy: "29.7", r: "1.3", fill: "#DDE2E8" }), _jsx("circle", { cx: "96.7", cy: "23.1", r: "1.3", fill: "#DDE2E8" }), _jsx("circle", { cx: "103.9", cy: "86.3", r: "1.3", fill: "#EBEEF1" })] })));
+export const DataGridNoData = ({ title = 'Нет данных', noDataIcon = BaseNoDataIcon(), noDataIconWidth = 250, }) => {
+    return (_jsx(DataGridNoDataWrapper, { children: _jsxs(DataGridNoDataFigure, { children: [_jsx(DataGridNoDataIcon, Object.assign({ noDataIconWidth: noDataIconWidth }, { children: noDataIcon })), _jsx(DataGridNoDataFigcaption, Object.assign({ component: "figcaption", variant: "h4" }, { children: title }))] }) }));
+};

package/esm/DataGrid/DataGridNoData/index.d.ts

@@ -0,0 +1 @@
+export * from './DataGridNoData';

package/esm/DataGrid/DataGridNoData/index.js

@@ -0,0 +1 @@
+export * from './DataGridNoData';

package/esm/DataGrid/DataGridNoData/styles.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { TypographyProps } from '../../Typography';
+export declare const DataGridNoDataWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
+export declare const DataGridNoDataFigure: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const DataGridNoDataIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    noDataIconWidth: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DataGridNoDataFigcaption: import("@emotion/styled").StyledComponent<Pick<import("react").PropsWithChildren<TypographyProps>, string | number | symbol> & import("react").RefAttributes<HTMLElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Omit<import("@mui/material/OverridableComponent").OverrideProps<import("../../types").WithoutEmotionSpecific<import("@mui/material").TypographyTypeMap<{}, "span">>, import("react").ElementType<any>>, "color" | "variant"> & {
+    variant?: import("@mui/material").TypographyVariant | keyof import("@mui/material").TypographyPropsVariantOverrides | undefined;
+    component?: import("react").ElementType<any> | undefined;
+    color?: "primary" | "secondary" | "red" | "green" | "yellow" | "grey" | "error" | "warning" | "info" | "success" | "text" | "textSecondary" | ((theme: import("@mui/material").Theme) => string) | undefined;
+    colorIntensity?: ("900" | "100" | "700" | "800" | "200" | "500" | "400" | "300" | "600") | undefined;
+}, {}, {}>;

package/esm/DataGrid/DataGridNoData/styles.js

@@ -0,0 +1,29 @@
+import { Typography } from '../../Typography';
+import { styled } from '../../styles';
+export const DataGridNoDataWrapper = styled.tr `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  transform: translate(-50%, -50%);
+`;
+export const DataGridNoDataFigure = styled.figure `
+  position: absolute;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+export const DataGridNoDataIcon = styled.div `
+  svg {
+    width: ${({ noDataIconWidth }) => `${noDataIconWidth}px`};
+    height: auto;
+  }
+`;
+export const DataGridNoDataFigcaption = styled(Typography) `
+  color: ${({ theme }) => theme.palette.grey[600]};
+`;

package/esm/DataGrid/styles.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+export declare const DataGridContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TableContainerClasses> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "css" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "sx" | "children" | keyof import("@mui/material/OverridableComponent").CommonProps> & {
+    maxHeight?: number | undefined;
+    inert?: false | "" | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTableContainer: import("@emotion/styled").StyledComponent<import("../Table").TableContainerProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TableContainerClasses> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "css" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "sx" | "children" | keyof import("@mui/material/OverridableComponent").CommonProps> & {
+    maxHeight?: number | undefined;
+    inert?: false | "" | undefined;
+}, {}, {}>;
+export declare const DisabledTableContainer: import("@emotion/styled").StyledComponent<import("../Table").TableContainerProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TableContainerClasses> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "css" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "sx" | "children" | keyof import("@mui/material/OverridableComponent").CommonProps> & {
+    maxHeight?: number | undefined;
+    inert?: false | "" | undefined;
+}, {}, {}>;

package/esm/DataGrid/styles.js

@@ -0,0 +1,23 @@
+import { styled } from '../styles';
+import { TableContainer } from '../Table';
+export const DataGridContainer = styled.div `
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : 'initial')};
+  overflow: hidden;
+`;
+export const StyledTableContainer = styled(TableContainer, {
+    shouldForwardProp: (prop) => prop !== 'maxHeight',
+}) `
+  height: 100%;
+`;
+export const DisabledTableContainer = styled(StyledTableContainer) `
+  background: ${({ theme }) => theme.palette.background.element};
+  mix-blend-mode: luminosity;
+
+  pointer-events: none;
+`;

package/esm/DataGrid/types.d.ts

@@ -1,11 +1,11 @@
 import { CSSProperties, ReactNode } from 'react';
 import { TableCellProps } from '@mui/material';
-import { SortStates } from './constants';
-export declare type CellValue = string | number | boolean | Date | undefined | object;
-export declare type SortState = `${SortStates}`;
-export declare type RenderCell<Data> = (params: Data) => ReactNode;
-export declare type DataGridRow = Record<string, any>;
-export declare type DataGridSort<SortField> = {
+import { SortStates } from './enums';
+export type CellValue = string | number | boolean | Date | undefined | object;
+export type SortState = `${SortStates}`;
+export type RenderCell<Data> = (params: Data) => ReactNode;
+export type DataGridRow = Record<string, any>;
+export type DataGridSort<SortField> = {
     /**
      * @example {fieldId: 'test'}
      * Значение поля сортируемой колонки
@@ -17,7 +17,7 @@ export declare type DataGridSort<SortField> = {
      */
     sort: SortState;
 };
-export declare type DataGridColumns<Data extends {}> = {
+export type DataGridColumns<Data extends object> = {
     /**
      * @example {field: 'test'}
      * Значение ключа поля данных для колонки