@astral/ui 1.2.0-dev.2 → 1.3.0

package/DataGrid/DataGrid.d.ts

@@ -33,15 +33,15 @@ export declare type DataGridProps<Data extends object = DataGridRow, SortField e
      */
     onSelectRow?: (row: Data[]) => void;
     /**
-     * @example <DataGrid sorting={[{fieldId: 'test', sort: 'asc'}]} />
-     * Массив сортируемых колонок
+     * @example <DataGrid sorting={{fieldId: 'test', sort: 'asc'}} />
+     * Параметры сортируемой колонки
      */
-    sorting?: DataGridSort<SortField>[];
+    sorting?: DataGridSort<SortField>;
     /**
      * @example <DataGrid onSort={({fieldId: 'test', sort: 'asc'}) => console.log('sorted')} />
      * Обработчик сортировки
      */
-    onSort?: (sorting: DataGridSort<SortField>[]) => void;
+    onSort?: (sorting: DataGridSort<SortField> | undefined) => void;
     /**
      * @example <DataGrid  Footer={<DataGridPagination />} />
      * Компонент кастомного футера (н-р Pagination)
@@ -66,7 +66,7 @@ export declare type DataGridProps<Data extends object = DataGridRow, SortField e
     /**
      * @default 10
      * @example <DataGrid  minDisplayRows{10} />
-     *  используется для отображения переданного кол-ва строк при отсутствии данных
+     *  Используется для отображения переданного кол-ва строк при отсутствии данных
      */
     minDisplayRows?: number;
 };

package/DataGrid/DataGrid.js

@@ -30,9 +30,9 @@ 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");
+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, _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 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, loading = _a.loading, onSort = _a.onSort, keyId = _a.keyId, emptyCellValue = _a.emptyCellValue;
     var selectable = Boolean(onSelectRow);
     var handleSelectAllRows = function (event) {
         if (!onSelectRow) {
@@ -61,6 +61,6 @@ function DataGrid(_a) {
             return !selectedRows.find(function (selectedRow) { return 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] }));
+    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 })] })), (0, jsx_runtime_1.jsx)(DataGridLoader_1.default, { loading: loading })] })), Footer] }));
 }
 exports.DataGrid = DataGrid;

package/DataGrid/DataGridBody/DataGridBody.js

@@ -17,7 +17,7 @@ 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");
+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;
     var renderCells = (0, react_1.useCallback)(function (row, rowId) {
@@ -39,6 +39,6 @@ function DataGridBody(_a) {
             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));
         });
     }, [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, __assign({ empty: !rows.length, minDisplayRows: minDisplayRows }, { children: renderedRows })));
 }
 exports.DataGridBody = DataGridBody;

package/DataGrid/DataGridHead/DataGridHead.d.ts

@@ -4,8 +4,8 @@ export declare type DataGridHeadProps<Data = DataGridRow, SortField extends keyo
     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;
 };

package/DataGrid/DataGridHead/DataGridHead.js

@@ -10,15 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     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");
@@ -29,37 +20,24 @@ 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 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) {
         if (!onSort) {
             return;
         }
-        var currentSort = sorting.find(function (_a) {
-            var fieldId = _a.fieldId;
-            return fieldId === field;
-        });
+        var 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 === constants_1.SortStates.ASC) {
+            return onSort({ fieldId: field, sort: constants_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 === constants_1.SortStates.DESC) {
+            return onSort(undefined);
         }
         // если для выбранного столбца нет сортировки - добавляем сортировку ASC
-        onSort(__spreadArray(__spreadArray([], sorting, true), [{ fieldId: field, sort: constants_1.SortStates.ASC }], false));
+        onSort({ fieldId: field, sort: constants_1.SortStates.ASC });
     }, [sorting, onSort]);
     var renderColumns = (0, react_1.useMemo)(function () {
         return columns.map(function (_a) {

package/DataGrid/DataGridHeadColumn/DataGridHeadColumn.d.ts

@@ -3,7 +3,7 @@ import { TableCellProps } from '@mui/material';
 import { DataGridRow, DataGridSort } from '../types';
 export declare 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

@@ -14,22 +14,32 @@ 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 icons_1 = require("@astral/icons");
 var constants_1 = require("../constants");
-var styled_1 = require("./styled");
+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 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 sortIcon = (0, react_1.useMemo)(function () {
+        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 constants_1.SortStates.ASC:
+                return (0, jsx_runtime_1.jsx)(icons_1.SortUpFillSm, { color: "primary" });
+            case constants_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]);
     var handleSortClick = function () {
         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, __assign({ onClick: handleSortClick, align: align, width: width, sortable: sortable }, { children: (0, jsx_runtime_1.jsxs)(styles_1.TableCellTitle, __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<TableCellProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    width?: CSSProperties['width'];
+    sortable?: boolean | undefined;
+}, {}, {}>;
+export declare const TableCellTitle: import("@emotion/styled").StyledComponent<Pick<import("../../Typography").TypographyProps, string | number | symbol> & import("react").RefAttributes<HTMLElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/DataGrid/DataGridHeadColumn/{styled.js → styles.js}

@@ -4,16 +4,13 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledTableCell = exports.StyledTableSortLabel = void 0;
+exports.TableCellTitle = exports.StyledTableCell = void 0;
 var styles_1 = require("../../styles");
 var Table_1 = require("../../Table");
-exports.StyledTableSortLabel = (0, styles_1.styled)(Table_1.TableSortLabel)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  visibility: ", ";\n"], ["\n  visibility: ", ";\n"])), function (_a) {
-    var hideSortIcon = _a.hideSortIcon;
-    return hideSortIcon && 'hidden';
-});
+var Typography_1 = require("../../Typography");
 exports.StyledTableCell = (0, styles_1.styled)(Table_1.TableCell, {
-    shouldForwardProp: function (prop) { return prop !== 'width'; },
-})(templateObject_2 || (templateObject_2 = __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) {
+    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) {
@@ -26,4 +23,5 @@ exports.StyledTableCell = (0, styles_1.styled)(Table_1.TableCell, {
     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;

package/DataGrid/DataGridLoader/DataGridLoader.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_1 = require("./styled");
+var styles_1 = require("./styles");
 var DataGridLoader = function (_a) {
     var _b = _a.loading, loading = _b === void 0 ? false : _b;
-    return ((0, jsx_runtime_1.jsxs)(styled_1.LoaderWrapper, { children: [loading && (0, jsx_runtime_1.jsx)(styled_1.Backdrop, {}), loading ? (0, jsx_runtime_1.jsx)(styled_1.StyledLinearProgress, {}) : (0, jsx_runtime_1.jsx)(styled_1.StyledDivider, {})] }));
+    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/index.d.ts

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

package/DataGrid/DataGridLoader/index.js

@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./styled"), exports);
+__exportStar(require("./styles"), exports);

package/esm/DataGrid/DataGrid.d.ts

@@ -33,15 +33,15 @@ export declare type DataGridProps<Data extends object = DataGridRow, SortField e
      */
     onSelectRow?: (row: Data[]) => void;
     /**
-     * @example <DataGrid sorting={[{fieldId: 'test', sort: 'asc'}]} />
-     * Массив сортируемых колонок
+     * @example <DataGrid sorting={{fieldId: 'test', sort: 'asc'}} />
+     * Параметры сортируемой колонки
      */
-    sorting?: DataGridSort<SortField>[];
+    sorting?: DataGridSort<SortField>;
     /**
      * @example <DataGrid onSort={({fieldId: 'test', sort: 'asc'}) => console.log('sorted')} />
      * Обработчик сортировки
      */
-    onSort?: (sorting: DataGridSort<SortField>[]) => void;
+    onSort?: (sorting: DataGridSort<SortField> | undefined) => void;
     /**
      * @example <DataGrid  Footer={<DataGridPagination />} />
      * Компонент кастомного футера (н-р Pagination)
@@ -66,7 +66,7 @@ export declare type DataGridProps<Data extends object = DataGridRow, SortField e
     /**
      * @default 10
      * @example <DataGrid  minDisplayRows{10} />
-     *  используется для отображения переданного кол-ва строк при отсутствии данных
+     *  Используется для отображения переданного кол-ва строк при отсутствии данных
      */
     minDisplayRows?: number;
 };

package/esm/DataGrid/DataGrid.js

@@ -24,9 +24,9 @@ import { Table } from '../Table';
 import { DataGridHead } from './DataGridHead';
 import { DataGridBody } from './DataGridBody';
 import DataGridLoader from './DataGridLoader/DataGridLoader';
-import { DataGridContainer, StyledTableContainer } from './styled';
+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, _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 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, loading = _a.loading, onSort = _a.onSort, keyId = _a.keyId, emptyCellValue = _a.emptyCellValue;
     var selectable = Boolean(onSelectRow);
     var handleSelectAllRows = function (event) {
         if (!onSelectRow) {

package/esm/DataGrid/DataGridBody/DataGridBody.js

@@ -14,7 +14,7 @@ import { useCallback, useMemo } from 'react';
 import { TableCell, TableRow } from '../../Table';
 import { DataGridCell } from '../DataGridCell';
 import { Checkbox } from '../../Checkbox';
-import { StyledTableBody } from './styled';
+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;
     var renderCells = useCallback(function (row, rowId) {

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

@@ -4,8 +4,8 @@ export declare type DataGridHeadProps<Data = DataGridRow, SortField extends keyo
     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;
 };

package/esm/DataGrid/DataGridHead/DataGridHead.js

@@ -9,15 +9,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
 import { TableHead } from '../../Table/TableHead';
@@ -26,37 +17,24 @@ 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, _b = _a.sorting, sorting = _b === void 0 ? [] : _b, uncheckedRowsCount = _a.uncheckedRowsCount;
+    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) {
         if (!onSort) {
             return;
         }
-        var currentSort = sorting.find(function (_a) {
-            var fieldId = _a.fieldId;
-            return fieldId === field;
-        });
+        var isCurrentField = (sorting === null || sorting === void 0 ? void 0 : sorting.fieldId) === field;
         // если для выбранного столбца текущая сортировка ASC - меняем на DESC
-        if (currentSort && currentSort.sort === SortStates.ASC) {
-            var newSorting = __spreadArray(__spreadArray([], sorting.filter(function (_a) {
-                var fieldId = _a.fieldId;
-                return fieldId !== field;
-            }), true), [
-                { fieldId: field, sort: SortStates.DESC },
-            ], false);
-            return onSort(newSorting);
-            // если для выбранного столбца текущая сортировка DESC - убираем сортировку
+        if (isCurrentField && sorting.sort === SortStates.ASC) {
+            return onSort({ fieldId: field, sort: SortStates.DESC });
         }
-        else if (currentSort && currentSort.sort === SortStates.DESC) {
-            var newSorting = sorting.filter(function (_a) {
-                var fieldId = _a.fieldId;
-                return fieldId !== field;
-            });
-            return onSort(newSorting);
+        // если для выбранного столбца текущая сортировка DESC - убираем сортировку
+        if (isCurrentField && sorting.sort === SortStates.DESC) {
+            return onSort(undefined);
         }
         // если для выбранного столбца нет сортировки - добавляем сортировку ASC
-        onSort(__spreadArray(__spreadArray([], sorting, true), [{ fieldId: field, sort: SortStates.ASC }], false));
+        onSort({ fieldId: field, sort: SortStates.ASC });
     }, [sorting, onSort]);
     var renderColumns = useMemo(function () {
         return columns.map(function (_a) {

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

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

package/esm/DataGrid/DataGridHeadColumn/DataGridHeadColumn.js

@@ -11,21 +11,31 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { Typography } from '../../Typography/Typography';
+import { SortDownFillSm, SortFillSm, SortUpFillSm } from '@astral/icons';
 import { SortStates } from '../constants';
-import { StyledTableCell, StyledTableSortLabel } from './styled';
+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 sortParams = useMemo(function () { return sorting.find(function (_a) {
-        var fieldId = _a.fieldId;
-        return field === fieldId;
-    }); }, [sorting, field]);
-    var hideSortIcon = useMemo(function () { return !Boolean(sortParams); }, [sortParams]);
-    var sortDirection = useMemo(function () { return (sortParams ? sortParams.sort : SortStates.ASC); }, [sortParams]);
+    var sortIcon = useMemo(function () {
+        if (!sortable) {
+            return null;
+        }
+        if ((sorting === null || sorting === void 0 ? void 0 : sorting.fieldId) !== field) {
+            return _jsx(SortFillSm, {});
+        }
+        switch (sorting === null || sorting === void 0 ? void 0 : sorting.sort) {
+            case SortStates.ASC:
+                return _jsx(SortUpFillSm, { color: "primary" });
+            case SortStates.DESC:
+                return _jsx(SortDownFillSm, { color: "primary" });
+            default:
+                return _jsx(SortFillSm, {});
+        }
+    }, [sorting, sortable, field]);
     var handleSortClick = function () {
         if (field && sortable) {
             onSort(field);
         }
     };
-    return (_jsxs(StyledTableCell, __assign({ onClick: handleSortClick, align: align, width: width, sortable: sortable }, { children: [_jsx(Typography, __assign({ variant: "pointer" }, { children: label })), sortable && (_jsx(StyledTableSortLabel, { hideSortIcon: hideSortIcon, direction: sortDirection, active: true }))] })));
+    return (_jsx(StyledTableCell, __assign({ onClick: handleSortClick, align: align, width: width, sortable: sortable }, { children: _jsxs(TableCellTitle, __assign({ variant: "pointer" }, { children: [label, sortIcon] })) })));
 }

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

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

package/esm/DataGrid/DataGridHeadColumn/{styled.js → styles.js}

@@ -3,14 +3,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { styled } from '../../styles';
-import { TableCell, TableSortLabel } from '../../Table';
-export var StyledTableSortLabel = styled(TableSortLabel)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  visibility: ", ";\n"], ["\n  visibility: ", ";\n"])), function (_a) {
-    var hideSortIcon = _a.hideSortIcon;
-    return hideSortIcon && 'hidden';
-});
+import { TableCell } from '../../Table';
+import { Typography } from '../../Typography';
 export var StyledTableCell = styled(TableCell, {
-    shouldForwardProp: function (prop) { return prop !== 'width'; },
-})(templateObject_2 || (templateObject_2 = __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) {
+    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) {
@@ -23,4 +20,5 @@ export var StyledTableCell = styled(TableCell, {
     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;

package/esm/DataGrid/DataGridLoader/DataGridLoader.js

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

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

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

package/esm/DataGrid/DataGridLoader/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "1.2.0-dev.2",
+  "version": "1.3.0",
   "browser": "./src/index.ts",
   "jest": {
     "moduleNameMapper": {
@@ -8,7 +8,7 @@
     }
   },
   "dependencies": {
-    "@astral/icons": "^1.2.0-dev.2",
+    "@astral/icons": "^1.3.0",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.9.0",
     "@emotion/server": "11.4.0",

package/DataGrid/DataGridHeadColumn/styled.d.ts

@@ -1,39 +0,0 @@
-import { TableCellProps } from '@mui/material';
-import { CSSProperties } from 'react';
-export declare const StyledTableSortLabel: import("@emotion/styled").StyledComponent<{
-    active?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").TableSortLabelClasses> | undefined;
-    direction?: "desc" | "asc" | undefined;
-    hideSortIcon?: boolean | undefined;
-    IconComponent?: import("react").JSXElementConstructor<{
-        className: string;
-    }> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | "css" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "disabled" | "active" | "onFocusVisible" | "tabIndex" | "action" | "children" | "direction" | keyof import("@mui/material/OverridableComponent").CommonProps | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "sx" | "TouchRippleProps" | "touchRippleRef" | "hideSortIcon" | "IconComponent"> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const StyledTableCell: import("@emotion/styled").StyledComponent<TableCellProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & {
-    width?: CSSProperties['width'];
-    sortable?: boolean | undefined;
-}, {}, {}>;

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

@@ -1,39 +0,0 @@
-import { TableCellProps } from '@mui/material';
-import { CSSProperties } from 'react';
-export declare const StyledTableSortLabel: import("@emotion/styled").StyledComponent<{
-    active?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").TableSortLabelClasses> | undefined;
-    direction?: "desc" | "asc" | undefined;
-    hideSortIcon?: boolean | undefined;
-    IconComponent?: import("react").JSXElementConstructor<{
-        className: string;
-    }> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | "css" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "disabled" | "active" | "onFocusVisible" | "tabIndex" | "action" | "children" | "direction" | keyof import("@mui/material/OverridableComponent").CommonProps | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "sx" | "TouchRippleProps" | "touchRippleRef" | "hideSortIcon" | "IconComponent"> & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;
-export declare const StyledTableCell: import("@emotion/styled").StyledComponent<TableCellProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-} & {
-    width?: CSSProperties['width'];
-    sortable?: boolean | undefined;
-}, {}, {}>;