@astral/ui 0.48.4 → 1.0.0-test.1670422830

package/DataGrid/DataGrid.js

@@ -1,66 +1,54 @@
 "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 styled_1 = require("./styled");
-function DataGrid(_a) {
-    var columns = _a.columns, _b = _a.rows, rows = _b === void 0 ? [] : _b, _c = _a.selectedRows, selectedRows = _c === void 0 ? [] : _c, _d = _a.sorting, sorting = _d === void 0 ? [] : _d, maxHeight = _a.maxHeight, _e = _a.minDisplayRows, minDisplayRows = _e === void 0 ? 10 : _e, onRowClick = _a.onRowClick, onSelectRow = _a.onSelectRow, Footer = _a.Footer, 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 lodash_es_1 = require("lodash-es");
+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, disabled, onSort, keyId, emptyCellValue, className, footerHeight = 50, }) {
+    const selectable = Boolean(onSelectRow);
+    const withFooter = Boolean(Footer);
+    const isTableDisabled = loading || disabled;
+    const TableContainer = isTableDisabled
+        ? styles_1.DisabledTableContainer
+        : styles_1.StyledTableContainer;
+    const handleSelectAllRows = (event) => {
         if (!onSelectRow) {
             return;
         }
         if (event.target.checked) {
-            var mergedSelectedRows = __spreadArray(__spreadArray([], selectedRows, true), rows, true);
+            const mergedSelectedRows = (0, lodash_es_1.uniqBy)([...selectedRows, ...rows], keyId);
             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]);
-    return ((0, jsx_runtime_1.jsxs)(styled_1.DataGridContainer, { children: [(0, jsx_runtime_1.jsxs)(styled_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 })] })), (0, jsx_runtime_1.jsx)(DataGridLoader_1.default, { loading: loading })] })), Footer] }));
+    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, Object.assign({ maxHeight: maxHeight, className: className }, { children: [(0, jsx_runtime_1.jsx)(TableContainer, Object.assign({ inert: isTableDisabled ? '' : false }, { 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, { footerHeight: footerHeight, withFooter: withFooter, disabled: disabled, loading: loading }), Footer] })));
 }
 exports.DataGrid = DataGrid;

package/DataGrid/DataGrid.test.js

@@ -0,0 +1,118 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const tests_1 = require("@astral/tests");
+const react_1 = require("react");
+const vitest_1 = require("vitest");
+const DataGrid_1 = require("./DataGrid");
+describe('DataGrid', () => {
+    it('Props:columns: отображаются названия колонок', () => {
+        const columns = [
+            {
+                field: 'name',
+                label: 'Наименование',
+            },
+        ];
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(DataGrid_1.DataGrid, { keyId: "id", rows: [], columns: columns }));
+        const title = tests_1.screen.getByText('Наименование');
+        expect(title).toBeVisible();
+    });
+    it('Props:columns:sortable: отображается иконка сортировки', () => {
+        const columns = [
+            {
+                field: 'name',
+                label: 'Наименование',
+                sortable: true,
+            },
+        ];
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(DataGrid_1.DataGrid, { keyId: "id", rows: [], columns: columns }));
+        const icon = tests_1.screen.getByText('Наименование').querySelector('svg');
+        expect(icon).not.toBeNull();
+    });
+    it('Props:columns:sortable: по клику на head cell вызывается onSort', () => __awaiter(void 0, void 0, void 0, function* () {
+        const columns = [
+            {
+                field: 'name',
+                label: 'Наименование',
+                sortable: true,
+            },
+        ];
+        let currentSort;
+        const TestComponent = () => {
+            const [sorting, setSorting] = (0, react_1.useState)();
+            const handleSort = (sort) => {
+                currentSort = sort;
+                setSorting(sort);
+            };
+            return ((0, jsx_runtime_1.jsx)(DataGrid_1.DataGrid, { keyId: "name", rows: [], sorting: sorting, onSort: handleSort, columns: columns }));
+        };
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(TestComponent, {}));
+        expect(currentSort).toBe(undefined);
+        yield tests_1.userEvents.click(tests_1.screen.getByText('Наименование'));
+        expect(currentSort).toEqual({ fieldId: 'name', sort: 'asc' });
+        yield tests_1.userEvents.click(tests_1.screen.getByText('Наименование'));
+        expect(currentSort).toEqual({ fieldId: 'name', sort: 'desc' });
+        yield tests_1.userEvents.click(tests_1.screen.getByText('Наименование'));
+        expect(currentSort).toBe(undefined);
+    }));
+    it('Props:columns:field: отображает в строке данные по field', () => __awaiter(void 0, void 0, void 0, function* () {
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(DataGrid_1.DataGrid, { keyId: "name", rows: [{ name: 'Vasya' }], columns: [
+                {
+                    field: 'name',
+                    label: 'Наименование',
+                },
+            ] }));
+        const title = tests_1.screen.getByText('Vasya');
+        expect(title).toBeVisible();
+    }));
+    it('Props:options=[]: отображается placeholder', () => __awaiter(void 0, void 0, void 0, function* () {
+        const columns = [
+            {
+                field: 'name',
+                label: 'Наименование',
+            },
+        ];
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(DataGrid_1.DataGrid, { keyId: "id", rows: [], columns: columns }));
+        const title = tests_1.screen.getByText('Нет данных');
+        expect(title).toBeVisible();
+    }));
+    it('Props:onRowClick: по клику на строку получаем данные row', () => __awaiter(void 0, void 0, void 0, function* () {
+        const onRowClick = vitest_1.vi.fn();
+        (0, tests_1.renderWithTheme)((0, jsx_runtime_1.jsx)(DataGrid_1.DataGrid, { keyId: "name", rows: [{ name: 'Vasya' }], onRowClick: onRowClick, columns: [
+                {
+                    field: 'name',
+                    label: 'Наименование',
+                },
+            ] }));
+        yield tests_1.userEvents.click(tests_1.screen.getByText('Vasya'));
+        expect(onRowClick.mock.calls[0][0]).toEqual({ name: 'Vasya' });
+    }));
+    // TODO: https://astraltrack.atlassian.net/browse/UIKIT-309
+    // it('Props:emptyCellValue: по дефолту для пустого значения отображается -', async () => {
+    //   renderWithTheme(
+    //     <DataGrid<{ name?: string }>
+    //       keyId="name"
+    //       rows={[{}]}
+    //       columns={[
+    //         {
+    //           field: 'name',
+    //           label: 'Наименование',
+    //         },
+    //       ]}
+    //     />,
+    //   );
+    //
+    //   const emptySymbol = screen.getByText('-');
+    //
+    //   expect(emptySymbol).toBeVisible();
+    // });
+});

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 type DataGridBodyProps<Data extends object> = {
     columns: DataGridColumns<Data>[];
     keyId: keyof DataGridRow;
     onRowClick?: (row: Data) => void;
@@ -10,5 +10,6 @@ export declare type DataGridBodyProps<Data> = {
     onSelectRow: (row: Data) => (event: ChangeEvent<HTMLInputElement>) => void;
     minDisplayRows: number;
     emptyCellValue?: ReactNode;
+    noDataPlaceholder?: ReactNode;
 };
-export declare function DataGridBody<Data>({ rows, columns, selectable, onRowClick, onSelectRow, selectedRows, minDisplayRows, keyId, emptyCellValue, }: 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 styled_1 = require("./styled");
-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 = (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)(styled_1.StyledTableBody, __assign({ empty: !rows.length, minDisplayRows: minDisplayRows }, { children: renderedRows })));
+    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.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/DataGrid/DataGridBody/styles.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTableBody = void 0;
+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: (prop) => prop !== 'empty' && prop !== 'minDisplayRows',
+}) `
+  height: ${({ empty, minDisplayRows }) => empty ? `${TABLE_ROW_HEIGHT * minDisplayRows}px` : '100%'};
+
+  /* Без этого в FF не применяется height */
+  &::after {
+    content: '';
+  }
+`;

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

@@ -1,72 +1,37 @@
 "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));
-};
 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, _b = _a.sorting, sorting = _b === void 0 ? [] : _b, 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 enums_1 = require("../enums");
+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 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 === constants_1.SortStates.ASC) {
-            var newSorting = __spreadArray(__spreadArray([], sorting.filter(function (_a) {
-                var fieldId = _a.fieldId;
-                return fieldId !== field;
-            }), true), [
-                { fieldId: field, sort: constants_1.SortStates.DESC },
-            ], false);
-            return onSort(newSorting);
-            // если для выбранного столбца текущая сортировка DESC - убираем сортировку
+        if (isCurrentField && sorting.sort === enums_1.SortStates.ASC) {
+            return onSort({ fieldId: field, sort: enums_1.SortStates.DESC });
         }
-        else if (currentSort && currentSort.sort === constants_1.SortStates.DESC) {
-            var newSorting = sorting.filter(function (_a) {
-                var fieldId = _a.fieldId;
-                return fieldId !== field;
-            });
-            return onSort(newSorting);
+        // если для выбранного столбца текущая сортировка DESC - убираем сортировку
+        if (isCurrentField && sorting.sort === enums_1.SortStates.DESC) {
+            return onSort(undefined);
         }
         // если для выбранного столбца нет сортировки - добавляем сортировку ASC
-        onSort(__spreadArray(__spreadArray([], sorting, true), [{ fieldId: field, sort: constants_1.SortStates.ASC }], false));
+        onSort({ fieldId: field, sort: enums_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.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/DataGrid/DataGridHeadColumn/DataGridHeadColumn.js

@@ -1,35 +1,33 @@
 "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 Typography_1 = require("../../Typography/Typography");
-var constants_1 = require("../constants");
-var styled_1 = require("./styled");
-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 = (0, react_1.useMemo)(function () { return sorting.find(function (_a) {
-        var fieldId = _a.fieldId;
-        return field === fieldId;
-    }); }, [sorting, field]);
-    var hideSortIcon = (0, react_1.useMemo)(function () { return !Boolean(sortParams); }, [sortParams]);
-    var sortDirection = (0, react_1.useMemo)(function () { return (sortParams ? sortParams.sort : constants_1.SortStates.ASC); }, [sortParams]);
-    var handleSortClick = function () {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const icons_1 = require("@astral/icons");
+const enums_1 = require("../enums");
+const styles_1 = require("./styles");
+function DataGridHeadColumn({ onSort, field, sortable, align, label, sorting, width, }) {
+    const sortIcon = (0, react_1.useMemo)(() => {
+        if (!sortable) {
+            return null;
+        }
+        if ((sorting === null || sorting === void 0 ? void 0 : sorting.fieldId) !== field) {
+            return (0, jsx_runtime_1.jsx)(icons_1.SortFillSm, {});
+        }
+        switch (sorting === null || sorting === void 0 ? void 0 : sorting.sort) {
+            case enums_1.SortStates.ASC:
+                return (0, jsx_runtime_1.jsx)(icons_1.SortUpFillSm, { color: "primary" });
+            case enums_1.SortStates.DESC:
+                return (0, jsx_runtime_1.jsx)(icons_1.SortDownFillSm, { color: "primary" });
+            default:
+                return (0, jsx_runtime_1.jsx)(icons_1.SortFillSm, {});
+        }
+    }, [sorting, sortable, field]);
+    const handleSortClick = () => {
         if (field && sortable) {
             onSort(field);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(styled_1.StyledTableCell, __assign({ onClick: handleSortClick, align: align, width: width, sortable: sortable }, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, __assign({ variant: "pointer" }, { children: label })), sortable && ((0, jsx_runtime_1.jsx)(styled_1.StyledTableSortLabel, { hideSortIcon: hideSortIcon, direction: sortDirection, active: true }))] })));
+    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.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/DataGrid/DataGridHeadColumn/styles.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCellTitle = exports.StyledTableCell = void 0;
+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: (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.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;