@astral/ui 1.16.2 → 1.17.0

package/DataGrid/DataGrid.js

@@ -1,73 +1,48 @@
 "use strict";
-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));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGrid = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var Table_1 = require("../Table");
-var DataGridHead_1 = require("./DataGridHead");
-var DataGridBody_1 = require("./DataGridBody");
-var DataGridLoader_1 = __importDefault(require("./DataGridLoader/DataGridLoader"));
-var DataGridNoData_1 = require("./DataGridNoData");
-var styles_1 = require("./styles");
-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) {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Table_1 = require("../Table");
+const DataGridHead_1 = require("./DataGridHead");
+const DataGridBody_1 = require("./DataGridBody");
+const DataGridLoader_1 = __importDefault(require("./DataGridLoader/DataGridLoader"));
+const DataGridNoData_1 = require("./DataGridNoData");
+const styles_1 = require("./styles");
+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 = (0, react_1.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 = (0, react_1.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 = (0, react_1.useMemo)(function () {
-        return rows.filter(function (row) {
-            return !selectedRows.find(function (selectedRow) { return selectedRow[keyId] === row[keyId]; });
-        }).length;
+    const uncheckedRowsCount = (0, react_1.useMemo)(() => {
+        return rows.filter((row) => !selectedRows.find((selectedRow) => selectedRow[keyId] === row[keyId])).length;
     }, [rows, selectedRows, keyId]);
-    var renderedPlaceholder = (0, react_1.useCallback)(function () {
+    const renderedPlaceholder = (0, react_1.useCallback)(() => {
         if (!loading) {
             return noDataPlaceholder || (0, jsx_runtime_1.jsx)(DataGridNoData_1.DataGridNoData, {});
         }
         return null;
     }, [noDataPlaceholder, loading]);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.DataGridContainer, { children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledTableContainer, __assign({ maxHeight: maxHeight }, { children: [(0, jsx_runtime_1.jsxs)(Table_1.Table, __assign({ stickyHeader: true }, { children: [(0, jsx_runtime_1.jsx)(DataGridHead_1.DataGridHead, { onSort: onSort, rowsCount: rows.length, uncheckedRowsCount: uncheckedRowsCount, onSelectAllRows: handleSelectAllRows, selectable: selectable, sorting: sorting, columns: columns }), (0, jsx_runtime_1.jsx)(DataGridBody_1.DataGridBody, { keyId: keyId, selectedRows: selectedRows, minDisplayRows: minDisplayRows, onRowClick: onRowClick, onSelectRow: handleSelectRow, selectable: selectable, rows: rows, columns: columns, emptyCellValue: emptyCellValue, noDataPlaceholder: renderedPlaceholder() })] })), (0, jsx_runtime_1.jsx)(DataGridLoader_1.default, { loading: loading })] })), rows.length ? Footer : null] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.DataGridContainer, { children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledTableContainer, Object.assign({ maxHeight: maxHeight }, { children: [(0, jsx_runtime_1.jsxs)(Table_1.Table, Object.assign({ stickyHeader: true }, { children: [(0, jsx_runtime_1.jsx)(DataGridHead_1.DataGridHead, { onSort: onSort, rowsCount: rows.length, uncheckedRowsCount: uncheckedRowsCount, onSelectAllRows: handleSelectAllRows, selectable: selectable, sorting: sorting, columns: columns }), (0, jsx_runtime_1.jsx)(DataGridBody_1.DataGridBody, { keyId: keyId, selectedRows: selectedRows, minDisplayRows: minDisplayRows, onRowClick: onRowClick, onSelectRow: handleSelectRow, selectable: selectable, rows: rows, columns: columns, emptyCellValue: emptyCellValue, noDataPlaceholder: renderedPlaceholder() })] })), (0, jsx_runtime_1.jsx)(DataGridLoader_1.default, { loading: loading })] })), rows.length ? Footer : null] }));
 }
 exports.DataGrid = DataGrid;

package/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/DataGrid/DataGridBody/DataGridBody.js

@@ -1,44 +1,32 @@
 "use strict";
-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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridBody = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var Table_1 = require("../../Table");
-var DataGridCell_1 = require("../DataGridCell");
-var Checkbox_1 = require("../../Checkbox");
-var styles_1 = require("./styles");
-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 = (0, react_1.useCallback)(function (row, rowId) {
-        return columns.map(function (cell, index) {
-            var cellId = "".concat(rowId, "-").concat(index);
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Table_1 = require("../../Table");
+const DataGridCell_1 = require("../DataGridCell");
+const Checkbox_1 = require("../../Checkbox");
+const styles_1 = require("./styles");
+function DataGridBody({ rows, columns, selectable, onRowClick, onSelectRow, selectedRows = [], minDisplayRows, keyId, emptyCellValue, noDataPlaceholder, }) {
+    const renderCells = (0, react_1.useCallback)((row, rowId) => {
+        return columns.map((cell, index) => {
+            const cellId = `${rowId}-${index}`;
             return ((0, jsx_runtime_1.jsx)(DataGridCell_1.DataGridCell, { row: row, cell: cell, emptyCellValue: emptyCellValue }, cellId));
         });
     }, [columns]);
-    var handleRowClick = function (row) { return function () {
+    const handleRowClick = (row) => () => {
         if (onRowClick) {
             onRowClick(row);
         }
-    }; };
-    var renderedRows = (0, react_1.useMemo)(function () {
-        return rows.map(function (row) {
-            var rowId = row[keyId];
-            var checked = selectable &&
-                Boolean(selectedRows.find(function (selectedRow) { return selectedRow[keyId] === rowId; }));
-            return ((0, jsx_runtime_1.jsxs)(Table_1.TableRow, __assign({ hover: Boolean(onRowClick), onClick: handleRowClick(row) }, { children: [selectable && ((0, jsx_runtime_1.jsx)(Table_1.TableCell, __assign({ padding: "checkbox", onClick: function (event) { return event.stopPropagation(); } }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: checked, onChange: onSelectRow(row) }) }))), renderCells(row, rowId)] }), rowId));
+    };
+    const renderedRows = (0, react_1.useMemo)(() => {
+        return rows.map((row) => {
+            const rowId = row[keyId];
+            const checked = selectable &&
+                Boolean(selectedRows.find((selectedRow) => selectedRow[keyId] === rowId));
+            return ((0, jsx_runtime_1.jsxs)(Table_1.TableRow, Object.assign({ hover: Boolean(onRowClick), onClick: handleRowClick(row) }, { children: [selectable && ((0, jsx_runtime_1.jsx)(Table_1.TableCell, Object.assign({ padding: "checkbox", onClick: (event) => event.stopPropagation() }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: checked, onChange: onSelectRow(row) }) }))), renderCells(row, rowId)] }), rowId));
         });
     }, [rows, keyId, selectable, selectedRows, onSelectRow, onRowClick, columns]);
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTableBody, __assign({ empty: !rows.length, minDisplayRows: minDisplayRows }, { children: rows.length ? renderedRows : noDataPlaceholder })));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTableBody, Object.assign({ empty: !rows.length, minDisplayRows: minDisplayRows }, { children: rows.length ? renderedRows : noDataPlaceholder })));
 }
 exports.DataGridBody = DataGridBody;

package/DataGrid/DataGridBody/styles.js

@@ -1,17 +1,13 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledTableBody = void 0;
-var styles_1 = require("../../styles");
-var Table_1 = require("../../Table");
-var TABLE_ROW_HEIGHT = 44;
+const styles_1 = require("../../styles");
+const Table_1 = require("../../Table");
+const TABLE_ROW_HEIGHT = 44;
 exports.StyledTableBody = (0, styles_1.styled)(Table_1.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;
+    shouldForwardProp: (prop) => prop !== 'empty' && prop !== 'minDisplayRows',
+}) `
+  position: relative;
+
+  height: ${({ empty, minDisplayRows }) => empty ? `${TABLE_ROW_HEIGHT * minDisplayRows}px` : 'auto'};
+`;

package/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/DataGrid/DataGridCell/DataGridCell.js

@@ -1,24 +1,12 @@
 "use strict";
-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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridCell = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var Table_1 = require("../../Table");
-var Typography_1 = require("../../Typography");
-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 = (0, react_1.useMemo)(function () {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Table_1 = require("../../Table");
+const Typography_1 = require("../../Typography");
+function DataGridCell({ row, cell: { field, renderCell, format, align = 'left' }, emptyCellValue = '-', }) {
+    const formattedValue = (0, react_1.useMemo)(() => {
         if (format) {
             return format(row);
         }
@@ -27,6 +15,6 @@ function DataGridCell(_a) {
         }
         return emptyCellValue;
     }, [field, format, row, emptyCellValue]);
-    return ((0, jsx_runtime_1.jsxs)(Table_1.TableCell, __assign({ align: align }, { children: [renderCell && renderCell(row), !renderCell && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedValue }) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Table_1.TableCell, Object.assign({ align: align }, { children: [renderCell && renderCell(row), !renderCell && ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: formattedValue }) }))] })));
 }
 exports.DataGridCell = DataGridCell;

package/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/DataGrid/DataGridHead/DataGridHead.js

@@ -1,33 +1,21 @@
 "use strict";
-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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridHead = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var TableHead_1 = require("../../Table/TableHead");
-var Table_1 = require("../../Table");
-var Checkbox_1 = require("../../Checkbox");
-var constants_1 = require("../constants");
-var DataGridHeadColumn_1 = require("../DataGridHeadColumn");
-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 = (0, react_1.useMemo)(function () { return !Boolean(uncheckedRowsCount) && rowsCount > 0; }, [uncheckedRowsCount, rowsCount]);
-    var indeterminate = (0, react_1.useMemo)(function () { return uncheckedRowsCount > 0 && uncheckedRowsCount < rowsCount; }, [uncheckedRowsCount, rowsCount]);
-    var handleSort = (0, react_1.useCallback)(function (field) {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TableHead_1 = require("../../Table/TableHead");
+const Table_1 = require("../../Table");
+const Checkbox_1 = require("../../Checkbox");
+const constants_1 = require("../constants");
+const DataGridHeadColumn_1 = require("../DataGridHeadColumn");
+function DataGridHead({ columns, selectable, onSelectAllRows, rowsCount, onSort, sorting, uncheckedRowsCount, }) {
+    const checked = (0, react_1.useMemo)(() => !Boolean(uncheckedRowsCount) && rowsCount > 0, [uncheckedRowsCount, rowsCount]);
+    const indeterminate = (0, react_1.useMemo)(() => uncheckedRowsCount > 0 && uncheckedRowsCount < rowsCount, [uncheckedRowsCount, rowsCount]);
+    const handleSort = (0, react_1.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 === constants_1.SortStates.ASC) {
             return onSort({ fieldId: field, sort: constants_1.SortStates.DESC });
@@ -39,12 +27,11 @@ function DataGridHead(_a) {
         // если для выбранного столбца нет сортировки - добавляем сортировку ASC
         onSort({ fieldId: field, sort: constants_1.SortStates.ASC });
     }, [sorting, onSort]);
-    var renderColumns = (0, react_1.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 = (0, react_1.useMemo)(() => {
+        return columns.map(({ field, label, sortable, align, width }) => {
             return ((0, jsx_runtime_1.jsx)(DataGridHeadColumn_1.DataGridHeadColumn, { sorting: sorting, field: field, onSort: handleSort, label: label, sortable: sortable, align: align, width: width }, label));
         });
     }, [columns, handleSort, sorting]);
-    return ((0, jsx_runtime_1.jsx)(TableHead_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(Table_1.TableRow, { children: [selectable && ((0, jsx_runtime_1.jsx)(Table_1.TableCell, __assign({ padding: "checkbox" }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: checked, indeterminate: indeterminate, onChange: onSelectAllRows }) }))), renderColumns] }) }));
+    return ((0, jsx_runtime_1.jsx)(TableHead_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(Table_1.TableRow, { children: [selectable && ((0, jsx_runtime_1.jsx)(Table_1.TableCell, Object.assign({ padding: "checkbox" }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: checked, indeterminate: indeterminate, onChange: onSelectAllRows }) }))), renderColumns] }) }));
 }
 exports.DataGridHead = DataGridHead;

package/DataGrid/DataGridHeadColumn/DataGridHeadColumn.js

@@ -1,25 +1,13 @@
 "use strict";
-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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridHeadColumn = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var icons_1 = require("@astral/icons");
-var constants_1 = require("../constants");
-var styles_1 = require("./styles");
-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 = (0, react_1.useMemo)(function () {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const icons_1 = require("@astral/icons");
+const constants_1 = require("../constants");
+const styles_1 = require("./styles");
+function DataGridHeadColumn({ onSort, field, sortable, align, label, sorting, width, }) {
+    const sortIcon = (0, react_1.useMemo)(() => {
         if (!sortable) {
             return null;
         }
@@ -35,11 +23,11 @@ function DataGridHeadColumn(_a) {
                 return (0, jsx_runtime_1.jsx)(icons_1.SortFillSm, {});
         }
     }, [sorting, sortable, field]);
-    var handleSortClick = function () {
+    const handleSortClick = () => {
         if (field && sortable) {
             onSort(field);
         }
     };
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTableCell, __assign({ onClick: handleSortClick, align: align, width: width, sortable: sortable }, { children: (0, jsx_runtime_1.jsxs)(styles_1.TableCellTitle, __assign({ variant: "pointer" }, { children: [label, sortIcon] })) })));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTableCell, Object.assign({ onClick: handleSortClick, align: align, width: width, sortable: sortable }, { children: (0, jsx_runtime_1.jsxs)(styles_1.TableCellTitle, Object.assign({ variant: "pointer" }, { children: [label, sortIcon] })) })));
 }
 exports.DataGridHeadColumn = DataGridHeadColumn;

package/DataGrid/DataGridHeadColumn/styles.js

@@ -1,27 +1,27 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableCellTitle = exports.StyledTableCell = void 0;
-var styles_1 = require("../../styles");
-var Table_1 = require("../../Table");
-var Typography_1 = require("../../Typography");
+const styles_1 = require("../../styles");
+const Table_1 = require("../../Table");
+const Typography_1 = require("../../Typography");
 exports.StyledTableCell = (0, styles_1.styled)(Table_1.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');
-});
-exports.TableCellTitle = (0, styles_1.styled)(Typography_1.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;
+    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;
+`;
+exports.TableCellTitle = (0, styles_1.styled)(Typography_1.Typography) `
+  display: flex;
+  align-items: center;
+
+  > svg {
+    width: 16px;
+    height: 16px;
+  }
+`;

package/DataGrid/DataGridLoader/DataGridLoader.js

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styles_1 = require("./styles");
-var DataGridLoader = function (_a) {
-    var _b = _a.loading, loading = _b === void 0 ? false : _b;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("./styles");
+const DataGridLoader = ({ loading = false }) => {
     return ((0, jsx_runtime_1.jsxs)(styles_1.LoaderWrapper, { children: [loading && (0, jsx_runtime_1.jsx)(styles_1.Backdrop, {}), loading ? (0, jsx_runtime_1.jsx)(styles_1.StyledLinearProgress, {}) : (0, jsx_runtime_1.jsx)(styles_1.StyledDivider, {})] }));
 };
 exports.default = DataGridLoader;

package/DataGrid/DataGridLoader/styles.js

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

package/DataGrid/DataGridNoData/DataGridNoData.js

@@ -1,22 +1,10 @@
 "use strict";
-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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridNoData = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styles_1 = require("./styles");
-var BaseNoDataIcon = function () { return ((0, jsx_runtime_1.jsxs)("svg", __assign({ viewBox: "0 0 124 124", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)("path", { stroke: "#B7C2CE", strokeLinecap: "round", strokeWidth: "2.1", d: "m57.1 74 5.6 2.8m4.6 2.3 2.4 1.2" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)("circle", { cx: "19.8", cy: "35.9", r: "2", fill: "#F0F4F7" }), (0, jsx_runtime_1.jsx)("circle", { cx: "101.2", cy: "28.3", r: "2.7", fill: "#F0F4F7" }), (0, jsx_runtime_1.jsx)("circle", { cx: "29.5", cy: "98.4", r: "1.9", fill: "#DDE2E8" }), (0, jsx_runtime_1.jsx)("circle", { cx: "24.3", cy: "29.7", r: "1.3", fill: "#DDE2E8" }), (0, jsx_runtime_1.jsx)("circle", { cx: "96.7", cy: "23.1", r: "1.3", fill: "#DDE2E8" }), (0, jsx_runtime_1.jsx)("circle", { cx: "103.9", cy: "86.3", r: "1.3", fill: "#EBEEF1" })] }))); };
-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 ((0, jsx_runtime_1.jsx)(styles_1.DataGridNoDataWrapper, { children: (0, jsx_runtime_1.jsxs)(styles_1.DataGridNoDataFigure, { children: [(0, jsx_runtime_1.jsx)(styles_1.DataGridNoDataIcon, __assign({ noDataIconWidth: noDataIconWidth }, { children: noDataIcon })), (0, jsx_runtime_1.jsx)(styles_1.DataGridNoDataFigcaption, __assign({ component: "figcaption", variant: "h4" }, { children: title }))] }) }));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("./styles");
+const BaseNoDataIcon = () => ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ viewBox: "0 0 124 124", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)("path", { stroke: "#B7C2CE", strokeLinecap: "round", strokeWidth: "2.1", d: "m57.1 74 5.6 2.8m4.6 2.3 2.4 1.2" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.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" }), (0, jsx_runtime_1.jsx)("circle", { cx: "19.8", cy: "35.9", r: "2", fill: "#F0F4F7" }), (0, jsx_runtime_1.jsx)("circle", { cx: "101.2", cy: "28.3", r: "2.7", fill: "#F0F4F7" }), (0, jsx_runtime_1.jsx)("circle", { cx: "29.5", cy: "98.4", r: "1.9", fill: "#DDE2E8" }), (0, jsx_runtime_1.jsx)("circle", { cx: "24.3", cy: "29.7", r: "1.3", fill: "#DDE2E8" }), (0, jsx_runtime_1.jsx)("circle", { cx: "96.7", cy: "23.1", r: "1.3", fill: "#DDE2E8" }), (0, jsx_runtime_1.jsx)("circle", { cx: "103.9", cy: "86.3", r: "1.3", fill: "#EBEEF1" })] })));
+const DataGridNoData = ({ title = 'Нет данных', noDataIcon = BaseNoDataIcon(), noDataIconWidth = 250, }) => {
+    return ((0, jsx_runtime_1.jsx)(styles_1.DataGridNoDataWrapper, { children: (0, jsx_runtime_1.jsxs)(styles_1.DataGridNoDataFigure, { children: [(0, jsx_runtime_1.jsx)(styles_1.DataGridNoDataIcon, Object.assign({ noDataIconWidth: noDataIconWidth }, { children: noDataIcon })), (0, jsx_runtime_1.jsx)(styles_1.DataGridNoDataFigcaption, Object.assign({ component: "figcaption", variant: "h4" }, { children: title }))] }) }));
 };
 exports.DataGridNoData = DataGridNoData;

package/DataGrid/DataGridNoData/styles.js

@@ -1,20 +1,32 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridNoDataFigcaption = exports.DataGridNoDataIcon = exports.DataGridNoDataFigure = exports.DataGridNoDataWrapper = void 0;
-var Typography_1 = require("../../Typography");
-var styles_1 = require("../../styles");
-exports.DataGridNoDataWrapper = styles_1.styled.tr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: sticky;\n  top: 50%;\n  left: 50%;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  transform: translate(-50%, -50%);\n"], ["\n  position: sticky;\n  top: 50%;\n  left: 50%;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  transform: translate(-50%, -50%);\n"])));
-exports.DataGridNoDataFigure = styles_1.styled.figure(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n"], ["\n  position: absolute;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n"])));
-exports.DataGridNoDataIcon = styles_1.styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  svg {\n    width: ", ";\n    height: auto;\n  }\n"], ["\n  svg {\n    width: ", ";\n    height: auto;\n  }\n"])), function (_a) {
-    var noDataIconWidth = _a.noDataIconWidth;
-    return "".concat(noDataIconWidth, "px");
-});
-exports.DataGridNoDataFigcaption = (0, styles_1.styled)(Typography_1.Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.palette.grey[600];
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+const Typography_1 = require("../../Typography");
+const styles_1 = require("../../styles");
+exports.DataGridNoDataWrapper = styles_1.styled.tr `
+  position: sticky;
+  top: 50%;
+  left: 50%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  transform: translate(-50%, -50%);
+`;
+exports.DataGridNoDataFigure = styles_1.styled.figure `
+  position: absolute;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+exports.DataGridNoDataIcon = styles_1.styled.div `
+  svg {
+    width: ${({ noDataIconWidth }) => `${noDataIconWidth}px`};
+    height: auto;
+  }
+`;
+exports.DataGridNoDataFigcaption = (0, styles_1.styled)(Typography_1.Typography) `
+  color: ${({ theme }) => theme.palette.grey[600]};
+`;