@astral/ui 1.16.2 → 1.17.0

package/esm/DashboardLayout/Sidebar/SidebarToggler/SidebarToggleButton/styles.js

@@ -1,11 +1,13 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { styled } from '../../../../styles';
 import { Button } from '../../../../Button';
-export var SidebarTogglerButtonRoot = styled(Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  gap: 0;\n  justify-content: flex-start;\n  width: 100%;\n  min-width: 0;\n  padding: ", ";\n\n  &.MuiButton-root .MuiButton-startIcon {\n    margin: 0;\n  }\n"], ["\n  gap: 0;\n  justify-content: flex-start;\n  width: 100%;\n  min-width: 0;\n  padding: ", ";\n\n  &.MuiButton-root .MuiButton-startIcon {\n    margin: 0;\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(2);
-});
-var templateObject_1;
+export const SidebarTogglerButtonRoot = styled(Button) `
+  gap: 0;
+  justify-content: flex-start;
+  width: 100%;
+  min-width: 0;
+  padding: ${({ theme }) => theme.spacing(2)};
+
+  &.MuiButton-root .MuiButton-startIcon {
+    margin: 0;
+  }
+`;

package/esm/DashboardLayout/Sidebar/SidebarToggler/SidebarToggler.js

@@ -1,22 +1,11 @@
-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 } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Collapse } from '../../../Collapse';
 import { SidebarTogglerContent, SidebarTogglerRoot } from './styled';
-export var SidebarToggler = forwardRef(function (props, ref) {
-    var collapsedIn = props.collapsedIn, onToggle = props.onToggle;
-    var handleButtonClick = function () {
+export const SidebarToggler = forwardRef((props, ref) => {
+    const { collapsedIn, onToggle } = props;
+    const handleButtonClick = () => {
         onToggle();
     };
-    return (_jsx(SidebarTogglerRoot, __assign({ ref: ref, collapsedIn: collapsedIn, onClick: handleButtonClick }, { children: _jsx(Collapse, __assign({ orientation: "horizontal", in: collapsedIn }, { children: _jsx(SidebarTogglerContent, { children: "\u0421\u0432\u0435\u0440\u043D\u0443\u0442\u044C \u043C\u0435\u043D\u044E" }) })) })));
+    return (_jsx(SidebarTogglerRoot, Object.assign({ ref: ref, collapsedIn: collapsedIn, onClick: handleButtonClick }, { children: _jsx(Collapse, Object.assign({ orientation: "horizontal", in: collapsedIn }, { children: _jsx(SidebarTogglerContent, { children: "\u0421\u0432\u0435\u0440\u043D\u0443\u0442\u044C \u043C\u0435\u043D\u044E" }) })) })));
 });

package/esm/DashboardLayout/Sidebar/SidebarToggler/styled.js

@@ -1,12 +1,11 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { styled } from '../../../styles';
 import { SidebarTogglerButton } from './SidebarToggleButton';
-export var SidebarTogglerRoot = styled(SidebarTogglerButton)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 40px;\n  margin-top: auto;\n"], ["\n  height: 40px;\n  margin-top: auto;\n"])));
-export var SidebarTogglerContent = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-left: ", ";\n\n  white-space: nowrap;\n"], ["\n  margin-left: ", ";\n\n  white-space: nowrap;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(4);
-});
-var templateObject_1, templateObject_2;
+export const SidebarTogglerRoot = styled(SidebarTogglerButton) `
+  height: 40px;
+  margin-top: auto;
+`;
+export const SidebarTogglerContent = styled.span `
+  margin-left: ${({ theme }) => theme.spacing(4)};
+
+  white-space: nowrap;
+`;

package/esm/DashboardLayout/Sidebar/styles.js

@@ -1,27 +1,19 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { styled } from '../../styles';
-export var SidebarRoot = styled.aside(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: ", ";\n\n  display: flex;\n  flex-direction: column;\n  grid-area: sidebar;\n  min-width: ", ";\n  padding: ", ";\n\n  background-color: ", ";\n  border-right: 1px solid ", ";\n\n  transition: ", ";\n"], ["\n  z-index: ", ";\n\n  display: flex;\n  flex-direction: column;\n  grid-area: sidebar;\n  min-width: ", ";\n  padding: ", ";\n\n  background-color: ", ";\n  border-right: 1px solid ", ";\n\n  transition: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.zIndex.appBar - 1;
-}, function (_a) {
-    var collapsedIn = _a.collapsedIn;
-    return (collapsedIn ? '240px' : '100%');
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(2);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.background.element;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[300];
-}, function (_a) {
-    var theme = _a.theme;
+export const SidebarRoot = styled.aside `
+  z-index: ${({ theme }) => theme.zIndex.appBar - 1};
+
+  display: flex;
+  flex-direction: column;
+  grid-area: sidebar;
+  min-width: ${({ collapsedIn }) => (collapsedIn ? '240px' : '100%')};
+  padding: ${({ theme }) => theme.spacing(2)};
+
+  background-color: ${({ theme }) => theme.palette.background.element};
+  border-right: 1px solid ${({ theme }) => theme.palette.grey[300]};
+
+  transition: ${({ theme }) => {
     return theme.transitions.create('min-width', {
         duration: theme.transitions.duration.standard,
     });
-});
-var templateObject_1;
+}};
+`;

package/esm/DashboardLayout/styles.js

@@ -1,9 +1,11 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { styled } from '../styles';
-export var DashboardLayoutRoot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template: ", ";\n  height: 100vh;\n"], ["\n  display: grid;\n  grid-template: ", ";\n  height: 100vh;\n"])), function () {
-    return "\n\n      [header-start]  \"header header\"     [header-end]\n      [main-start]    \"sidebar main\" 1fr  [main-end] / auto 1fr\n    ";
-});
-var templateObject_1;
+export const DashboardLayoutRoot = styled.div `
+  display: grid;
+  grid-template: ${() => {
+    return `\n
+      [header-start]  "header header"     [header-end]
+      [main-start]    "sidebar main" 1fr  [main-end] / auto 1fr
+    `;
+}};
+  height: 100vh;
+`;

package/esm/DataGrid/DataGrid.js

@@ -1,23 +1,3 @@
-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 { Table } from '../Table';
@@ -26,41 +6,36 @@ import { DataGridBody } from './DataGridBody';
 import DataGridLoader from './DataGridLoader/DataGridLoader';
 import { DataGridNoData } from './DataGridNoData';
 import { DataGridContainer, StyledTableContainer } from './styles';
-export function DataGrid(_a) {
-    var columns = _a.columns, _b = _a.rows, rows = _b === void 0 ? [] : _b, _c = _a.selectedRows, selectedRows = _c === void 0 ? [] : _c, sorting = _a.sorting, maxHeight = _a.maxHeight, _d = _a.minDisplayRows, minDisplayRows = _d === void 0 ? 10 : _d, onRowClick = _a.onRowClick, onSelectRow = _a.onSelectRow, Footer = _a.Footer, noDataPlaceholder = _a.noDataPlaceholder, loading = _a.loading, onSort = _a.onSort, keyId = _a.keyId, emptyCellValue = _a.emptyCellValue;
-    var selectable = Boolean(onSelectRow);
-    var handleSelectAllRows = function (event) {
+export function DataGrid({ columns, rows = [], selectedRows = [], sorting, maxHeight, minDisplayRows = 10, onRowClick, onSelectRow, Footer, noDataPlaceholder, loading, onSort, keyId, emptyCellValue, }) {
+    const selectable = Boolean(onSelectRow);
+    const handleSelectAllRows = (event) => {
         if (!onSelectRow) {
             return;
         }
         if (event.target.checked) {
-            var mergedSelectedRows = __spreadArray(__spreadArray([], selectedRows, true), rows, true);
+            const mergedSelectedRows = [...selectedRows, ...rows];
             return onSelectRow(mergedSelectedRows);
         }
-        var filteredRows = selectedRows.filter(function (selectedRow) { return !rows.find(function (row) { return row[keyId] === selectedRow[keyId]; }); });
+        const filteredRows = selectedRows.filter((selectedRow) => !rows.find((row) => row[keyId] === selectedRow[keyId]));
         onSelectRow(filteredRows);
     };
-    var handleSelectRow = useCallback(function (row) {
-        return function (event) {
-            if (!onSelectRow) {
-                return;
-            }
-            if (event.target.checked) {
-                return onSelectRow(__spreadArray(__spreadArray([], selectedRows, true), [row], false));
-            }
-            return onSelectRow(selectedRows.filter(function (selectedRow) { return selectedRow[keyId] !== row[keyId]; }));
-        };
+    const handleSelectRow = useCallback((row) => (event) => {
+        if (!onSelectRow) {
+            return;
+        }
+        if (event.target.checked) {
+            return onSelectRow([...selectedRows, row]);
+        }
+        return onSelectRow(selectedRows.filter((selectedRow) => selectedRow[keyId] !== row[keyId]));
     }, [selectedRows, onSelectRow, keyId]);
-    var uncheckedRowsCount = useMemo(function () {
-        return rows.filter(function (row) {
-            return !selectedRows.find(function (selectedRow) { return selectedRow[keyId] === row[keyId]; });
-        }).length;
+    const uncheckedRowsCount = useMemo(() => {
+        return rows.filter((row) => !selectedRows.find((selectedRow) => selectedRow[keyId] === row[keyId])).length;
     }, [rows, selectedRows, keyId]);
-    var renderedPlaceholder = useCallback(function () {
+    const renderedPlaceholder = useCallback(() => {
         if (!loading) {
             return noDataPlaceholder || _jsx(DataGridNoData, {});
         }
         return null;
     }, [noDataPlaceholder, loading]);
-    return (_jsxs(DataGridContainer, { children: [_jsxs(StyledTableContainer, __assign({ maxHeight: maxHeight }, { children: [_jsxs(Table, __assign({ stickyHeader: true }, { children: [_jsx(DataGridHead, { onSort: onSort, rowsCount: rows.length, uncheckedRowsCount: uncheckedRowsCount, onSelectAllRows: handleSelectAllRows, selectable: selectable, sorting: sorting, columns: columns }), _jsx(DataGridBody, { keyId: keyId, selectedRows: selectedRows, minDisplayRows: minDisplayRows, onRowClick: onRowClick, onSelectRow: handleSelectRow, selectable: selectable, rows: rows, columns: columns, emptyCellValue: emptyCellValue, noDataPlaceholder: renderedPlaceholder() })] })), _jsx(DataGridLoader, { loading: loading })] })), rows.length ? Footer : null] }));
+    return (_jsxs(DataGridContainer, { children: [_jsxs(StyledTableContainer, Object.assign({ maxHeight: maxHeight }, { children: [_jsxs(Table, Object.assign({ stickyHeader: true }, { children: [_jsx(DataGridHead, { onSort: onSort, rowsCount: rows.length, uncheckedRowsCount: uncheckedRowsCount, onSelectAllRows: handleSelectAllRows, selectable: selectable, sorting: sorting, columns: columns }), _jsx(DataGridBody, { keyId: keyId, selectedRows: selectedRows, minDisplayRows: minDisplayRows, onRowClick: onRowClick, onSelectRow: handleSelectRow, selectable: selectable, rows: rows, columns: columns, emptyCellValue: emptyCellValue, noDataPlaceholder: renderedPlaceholder() })] })), _jsx(DataGridLoader, { loading: loading })] })), rows.length ? Footer : null] }));
 }

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

@@ -1,6 +1,6 @@
 import { ChangeEvent, ReactNode } from 'react';
 import { DataGridColumns, DataGridRow } from '../types';
-export declare type DataGridBodyProps<Data> = {
+export declare type DataGridBodyProps<Data extends object> = {
     columns: DataGridColumns<Data>[];
     keyId: keyof DataGridRow;
     onRowClick?: (row: Data) => void;
@@ -12,4 +12,4 @@ export declare type DataGridBodyProps<Data> = {
     emptyCellValue?: ReactNode;
     noDataPlaceholder?: ReactNode;
 };
-export declare function DataGridBody<Data>({ rows, columns, selectable, onRowClick, onSelectRow, selectedRows, minDisplayRows, keyId, emptyCellValue, noDataPlaceholder, }: DataGridBodyProps<Data>): JSX.Element;
+export declare function DataGridBody<Data extends object>({ rows, columns, selectable, onRowClick, onSelectRow, selectedRows, minDisplayRows, keyId, emptyCellValue, noDataPlaceholder, }: DataGridBodyProps<Data>): JSX.Element;

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 './styles';
-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, noDataPlaceholder = _a.noDataPlaceholder;
-    var renderCells = useCallback(function (row, rowId) {
-        return columns.map(function (cell, index) {
-            var cellId = "".concat(rowId, "-").concat(index);
+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: rows.length ? renderedRows : noDataPlaceholder })));
+    return (_jsx(StyledTableBody, Object.assign({ empty: !rows.length, minDisplayRows: minDisplayRows }, { children: rows.length ? renderedRows : noDataPlaceholder })));
 }

package/esm/DataGrid/DataGridBody/styles.js

@@ -1,14 +1,10 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { styled } from '../../styles';
 import { TableBody } from '../../Table';
-var TABLE_ROW_HEIGHT = 44;
-export var StyledTableBody = styled(TableBody, {
-    shouldForwardProp: function (prop) { return prop !== 'empty' && prop !== 'minDisplayRows'; },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  height: ", ";\n"], ["\n  position: relative;\n\n  height: ", ";\n"])), function (_a) {
-    var empty = _a.empty, minDisplayRows = _a.minDisplayRows;
-    return empty ? "".concat(TABLE_ROW_HEIGHT * minDisplayRows, "px") : 'auto';
-});
-var templateObject_1;
+const TABLE_ROW_HEIGHT = 44;
+export const StyledTableBody = styled(TableBody, {
+    shouldForwardProp: (prop) => prop !== 'empty' && prop !== 'minDisplayRows',
+}) `
+  position: relative;
+
+  height: ${({ empty, minDisplayRows }) => empty ? `${TABLE_ROW_HEIGHT * minDisplayRows}px` : 'auto'};
+`;

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 declare 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,6 +1,6 @@
 import { ChangeEvent } from 'react';
 import { DataGridColumns, DataGridRow, DataGridSort } from '../types';
-export declare type DataGridHeadProps<Data = DataGridRow, SortField extends keyof Data = keyof Data> = {
+export declare type DataGridHeadProps<Data extends object = DataGridRow, SortField extends keyof Data = keyof Data> = {
     columns: DataGridColumns<Data>[];
     selectable: boolean;
     onSelectAllRows: (event: ChangeEvent<HTMLInputElement>) => void;
@@ -9,4 +9,4 @@ export declare type DataGridHeadProps<Data = DataGridRow, SortField extends keyo
     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,14 +1,3 @@
-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 { TableHead } from '../../Table/TableHead';
@@ -16,15 +5,14 @@ import { TableCell, TableRow } from '../../Table';
 import { Checkbox } from '../../Checkbox';
 import { SortStates } from '../constants';
 import { DataGridHeadColumn } from '../DataGridHeadColumn';
-export function DataGridHead(_a) {
-    var columns = _a.columns, selectable = _a.selectable, onSelectAllRows = _a.onSelectAllRows, rowsCount = _a.rowsCount, onSort = _a.onSort, sorting = _a.sorting, 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 isCurrentField = (sorting === null || sorting === void 0 ? void 0 : sorting.fieldId) === field;
+        const isCurrentField = (sorting === null || sorting === void 0 ? void 0 : sorting.fieldId) === field;
         // если для выбранного столбца текущая сортировка ASC - меняем на DESC
         if (isCurrentField && sorting.sort === SortStates.ASC) {
             return onSort({ fieldId: field, sort: SortStates.DESC });
@@ -36,11 +24,10 @@ export function DataGridHead(_a) {
         // если для выбранного столбца нет сортировки - добавляем сортировку ASC
         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.js

@@ -1,22 +1,10 @@
-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 { SortDownFillSm, SortFillSm, SortUpFillSm } from '@astral/icons';
 import { SortStates } from '../constants';
 import { StyledTableCell, TableCellTitle } from './styles';
-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 sortIcon = useMemo(function () {
+export function DataGridHeadColumn({ onSort, field, sortable, align, label, sorting, width, }) {
+    const sortIcon = useMemo(() => {
         if (!sortable) {
             return null;
         }
@@ -32,10 +20,10 @@ export function DataGridHeadColumn(_a) {
                 return _jsx(SortFillSm, {});
         }
     }, [sorting, sortable, field]);
-    var handleSortClick = function () {
+    const handleSortClick = () => {
         if (field && sortable) {
             onSort(field);
         }
     };
-    return (_jsx(StyledTableCell, __assign({ onClick: handleSortClick, align: align, width: width, sortable: sortable }, { children: _jsxs(TableCellTitle, __assign({ variant: "pointer" }, { children: [label, sortIcon] })) })));
+    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.js

@@ -1,24 +1,24 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { styled } from '../../styles';
 import { TableCell } from '../../Table';
 import { Typography } from '../../Typography';
-export var StyledTableCell = styled(TableCell, {
-    shouldForwardProp: function (prop) { return prop !== 'width' && prop !== 'sortable'; },
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  padding: ", ";\n\n  color: ", ";\n\n  cursor: ", ";\n\n  user-select: none;\n"], ["\n  width: ", ";\n  padding: ", ";\n\n  color: ", ";\n\n  cursor: ", ";\n\n  user-select: none;\n"])), function (_a) {
-    var _b = _a.width, width = _b === void 0 ? 'auto' : _b;
-    return width;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing(3, 4);
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[700];
-}, function (_a) {
-    var sortable = _a.sortable;
-    return (sortable ? 'pointer' : 'initial');
-});
-export var TableCellTitle = styled(Typography)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  > svg {\n    width: 16px;\n    height: 16px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  > svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));
-var templateObject_1, templateObject_2;
+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.js

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

package/esm/DataGrid/DataGridLoader/styles.js

@@ -1,15 +1,22 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { LinearProgress } from '@mui/material';
 import { Divider } from '../../Divider';
 import { styled } from '../../styles';
-export var Backdrop = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n\n  width: 100%;\n  height: 100%;\n\n  background-color: ", ";\n  opacity: 0.6;\n"], ["\n  position: absolute;\n  top: 0;\n\n  width: 100%;\n  height: 100%;\n\n  background-color: ", ";\n  opacity: 0.6;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey['100'];
-});
-export var StyledDivider = styled(Divider)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-width: 1px;\n"], ["\n  border-width: 1px;\n"])));
-export var LoaderWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 2px;\n"], ["\n  height: 2px;\n"])));
-export var StyledLinearProgress = styled(LinearProgress)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 2px;\n"], ["\n  height: 2px;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+export const Backdrop = styled.div `
+  position: absolute;
+  top: 0;
+
+  width: 100%;
+  height: 100%;
+
+  background-color: ${({ theme }) => theme.palette.grey['100']};
+  opacity: 0.6;
+`;
+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.js

@@ -1,18 +1,6 @@
-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 { DataGridNoDataFigcaption, DataGridNoDataFigure, DataGridNoDataIcon, DataGridNoDataWrapper, } from './styles';
-var BaseNoDataIcon = function () { return (_jsxs("svg", __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 var DataGridNoData = function (_a) {
-    var _b = _a.title, title = _b === void 0 ? 'Нет данных' : _b, _c = _a.noDataIcon, noDataIcon = _c === void 0 ? BaseNoDataIcon() : _c, _d = _a.noDataIconWidth, noDataIconWidth = _d === void 0 ? 250 : _d;
-    return (_jsx(DataGridNoDataWrapper, { children: _jsxs(DataGridNoDataFigure, { children: [_jsx(DataGridNoDataIcon, __assign({ noDataIconWidth: noDataIconWidth }, { children: noDataIcon })), _jsx(DataGridNoDataFigcaption, __assign({ component: "figcaption", variant: "h4" }, { children: title }))] }) }));
+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 }))] }) }));
 };