@astral/ui 0.19.0 → 0.22.0

package/Autocomplete/Autocomplete.js

@@ -23,6 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Autocomplete = void 0;
+var react_1 = require("react");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var material_1 = require("@mui/material");
 var icons_1 = require("@astral/icons");
@@ -41,7 +42,9 @@ var Autocomplete = function (_a) {
     var renderInput = function (inputParams) { return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, __assign({}, inputParams, { placeholder: placeholder, label: label, success: success, error: error, helperText: helperText, size: size }), void 0)); };
     var renderOption = function (option) {
         var selected = Boolean(option['aria-selected']);
-        return ((0, jsx_runtime_1.jsxs)(MenuItem_1.MenuItem, __assign({}, option, { children: [multiple && ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: selected }, void 0) }, void 0)), option.key] }), void 0));
+        return ((0, react_1.createElement)(MenuItem_1.MenuItem, __assign({}, option, { key: option.id }),
+            multiple && ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: selected }, void 0) }, void 0)),
+            option.key));
     };
     return ((0, jsx_runtime_1.jsx)(material_1.Autocomplete, __assign({}, props, { size: size, multiple: multiple, getOptionLabel: getOptionLabel, disableCloseOnSelect: multiple, renderTags: renderTags, renderInput: renderInput, renderOption: renderOption, popupIcon: (0, jsx_runtime_1.jsx)(icons_1.ChevronDOutlineMd, {}, void 0), clearIcon: (0, jsx_runtime_1.jsx)(icons_1.CrossSmOutlineSm, {}, void 0), componentsProps: { clearIndicator: { disableRipple: true } }, noOptionsText: "\u041D\u0435\u0442 \u0434\u0430\u043D\u043D\u044B\u0445" }), void 0));
 };

package/DataGrid/DataGrid.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DataGridProps } from './types';
+export declare function DataGrid<T>({ columns, rows, selectedRows, sorting, maxHeight, minDisplayRows, onSelectRow, Footer, loading, onSort, keyId, }: DataGridProps<T>): JSX.Element;

package/DataGrid/DataGrid.js

@@ -0,0 +1,64 @@
+"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, onSelectRow = _a.onSelectRow, Footer = _a.Footer, loading = _a.loading, onSort = _a.onSort, keyId = _a.keyId;
+    var selectable = Boolean(onSelectRow);
+    var handleSelectAllRows = function (event) {
+        if (!onSelectRow)
+            return;
+        if (event.target.checked) {
+            var mergedSelectedRows = __spreadArray(__spreadArray([], selectedRows, true), rows, true);
+            return onSelectRow(mergedSelectedRows);
+        }
+        var filteredRows = selectedRows.filter(function (selectedRow) { return !rows.find(function (row) { return 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]; }));
+        };
+    }, [selectedRows, onSelectRow]);
+    var uncheckedRowsCount = (0, react_1.useMemo)(function () {
+        return rows.filter(function (row) {
+            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 }, void 0), (0, jsx_runtime_1.jsx)(DataGridBody_1.DataGridBody, { keyId: keyId, selectedRows: selectedRows, minDisplayRows: minDisplayRows, onSelectRow: handleSelectRow, selectable: selectable, rows: rows, columns: columns }, void 0)] }), void 0), (0, jsx_runtime_1.jsx)(DataGridLoader_1.default, { loading: loading }, void 0)] }), void 0), Footer] }, void 0));
+}
+exports.DataGrid = DataGrid;

package/DataGrid/DataGridBody/DataGridBody.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DataGridBodyProps } from './types';
+export declare function DataGridBody<T>({ rows, columns, selectable, onSelectRow, selectedRows, minDisplayRows, keyId, }: DataGridBodyProps<T>): JSX.Element;

package/DataGrid/DataGridBody/DataGridBody.js

@@ -0,0 +1,39 @@
+"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, onSelectRow = _a.onSelectRow, _b = _a.selectedRows, selectedRows = _b === void 0 ? [] : _b, minDisplayRows = _a.minDisplayRows, keyId = _a.keyId;
+    var renderCells = (0, react_1.useCallback)(function (row, rowId) {
+        return columns.map(function (cell, index) {
+            var cellId = "".concat(rowId, "-").concat(index);
+            return (0, jsx_runtime_1.jsx)(DataGridCell_1.DataGridCell, { row: row, cell: cell }, cellId);
+        });
+    }, [columns]);
+    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, { children: [selectable && ((0, jsx_runtime_1.jsx)(Table_1.TableCell, __assign({ padding: "checkbox" }, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: checked, onChange: onSelectRow(row) }, void 0) }), void 0)), renderCells(row, rowId)] }, rowId));
+        });
+    }, [rows, keyId, selectable, selectedRows, onSelectRow, columns]);
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledTableBody, __assign({ empty: !rows.length, minDisplayRows: minDisplayRows }, { children: renderedRows }), void 0));
+}
+exports.DataGridBody = DataGridBody;

package/DataGrid/DataGridBody/index.d.ts

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

package/DataGrid/DataGridBody/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./DataGridBody"), exports);

package/DataGrid/DataGridBody/styled.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const StyledTableBody: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TableBodyClasses> | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "key" | keyof import("react").HTMLAttributes<HTMLTableSectionElement>> & {
+    ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    empty: boolean;
+    minDisplayRows: number;
+}, {}, {}>;

package/DataGrid/DataGridBody/styled.js

@@ -0,0 +1,17 @@
+"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;
+exports.StyledTableBody = (0, styles_1.styled)(Table_1.TableBody, {
+    shouldForwardProp: function (prop) { return prop !== 'empty' && prop !== 'minDisplayRows'; },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\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;

package/DataGrid/DataGridBody/types.d.ts

@@ -0,0 +1,11 @@
+import { ChangeEvent } from 'react';
+import { DataGridColumns, DataGridRow } from '../types';
+export declare type DataGridBodyProps<T = DataGridRow> = {
+    columns: DataGridColumns<T>[];
+    keyId: keyof DataGridRow;
+    selectable?: boolean;
+    selectedRows?: Array<T>;
+    rows: T[];
+    onSelectRow: (row: T) => (event: ChangeEvent<HTMLInputElement>) => void;
+    minDisplayRows: number;
+};

package/DataGrid/DataGridBody/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/DataGrid/DataGridCell/DataGridCell.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { CellProps } from './types';
+export declare function DataGridCell<T>({ row, cell: { field, renderCell, format, align }, }: CellProps<T>): JSX.Element;

package/DataGrid/DataGridCell/DataGridCell.js

@@ -0,0 +1,29 @@
+"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;
+    var formattedValue = (0, react_1.useMemo)(function () {
+        if (format) {
+            return format(row);
+        }
+        return row[field];
+    }, [field, format, row]);
+    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: formattedValue }, void 0)] }), void 0));
+}
+exports.DataGridCell = DataGridCell;

package/DataGrid/DataGridCell/index.d.ts

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

package/DataGrid/DataGridCell/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./DataGridCell"), exports);

package/DataGrid/DataGridCell/types.d.ts

@@ -0,0 +1,5 @@
+import { DataGridColumns } from '../types';
+export declare type CellProps<T> = {
+    row: T;
+    cell: DataGridColumns<T>;
+};

package/DataGrid/DataGridCell/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/DataGrid/DataGridHead/DataGridHead.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DataGridHeadProps } from './types';
+export declare function DataGridHead<T>({ columns, selectable, onSelectAllRows, rowsCount, onSort, sorting, uncheckedRowsCount, }: DataGridHeadProps<T>): JSX.Element;

package/DataGrid/DataGridHead/DataGridHead.js

@@ -0,0 +1,71 @@
+"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, sortable) { return function () {
+        if (sortable) {
+            var currentSort = sorting.find(function (_a) {
+                var fieldId = _a.fieldId;
+                return 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 - убираем сортировку
+            }
+            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);
+            }
+            // если для выбранного столбца нет сортировки - добавляем сортировку ASC
+            onSort(__spreadArray(__spreadArray([], sorting, true), [{ fieldId: field, sort: constants_1.SortStates.ASC }], false));
+        }
+    }; }, [sorting]);
+    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, renderCell = _a.renderCell;
+            return ((0, jsx_runtime_1.jsx)(DataGridHeadColumn_1.DataGridHeadColumn, { sorting: sorting, renderCell: renderCell, field: field, onSort: handleSort, label: label, sortable: sortable, align: align }, void 0));
+        });
+    }, [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 }, void 0) }), void 0)), renderColumns] }, void 0) }, void 0));
+}
+exports.DataGridHead = DataGridHead;

package/DataGrid/DataGridHead/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DataGridHead';
+export * from './types';

package/DataGrid/DataGridHead/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./DataGridHead"), exports);
+__exportStar(require("./types"), exports);

package/DataGrid/DataGridHead/types.d.ts

@@ -0,0 +1,11 @@
+import { ChangeEvent } from 'react';
+import { DataGridColumns, DataGridRow, DataGridSort } from '../types';
+export declare type DataGridHeadProps<T = DataGridRow> = {
+    columns: DataGridColumns<T>[];
+    selectable: boolean;
+    onSelectAllRows: (event: ChangeEvent<HTMLInputElement>) => void;
+    sorting: DataGridSort<T>[];
+    onSort: (sorting: DataGridSort<T>[]) => void;
+    uncheckedRowsCount: number;
+    rowsCount: number;
+};

package/DataGrid/DataGridHead/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/DataGrid/DataGridHeadColumn/DataGridHeadColumn.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DataGridHeadColumnProps } from './types';
+export declare function DataGridHeadColumn<T>({ onSort, field, sortable, align, label, sorting, renderCell, }: DataGridHeadColumnProps<T>): JSX.Element;

package/DataGrid/DataGridHeadColumn/DataGridHeadColumn.js

@@ -0,0 +1,30 @@
+"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 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, renderCell = _a.renderCell;
+    var sortParams = sorting.find(function (_a) {
+        var fieldId = _a.fieldId;
+        return field === fieldId;
+    });
+    var hideSortIcon = !Boolean(sortParams);
+    var sortDirection = sortParams ? sortParams.sort : constants_1.SortStates.ASC;
+    var fitContent = Boolean(renderCell);
+    return ((0, jsx_runtime_1.jsxs)(styled_1.StyledTableCell, __assign({ onClick: onSort(field, sortable), fitContent: fitContent, align: align }, { children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, __assign({ variant: "pointer" }, { children: label }), void 0), sortable && ((0, jsx_runtime_1.jsx)(styled_1.StyledTableSortLabel, { hideSortIcon: hideSortIcon, direction: sortDirection, active: true }, void 0))] }), void 0));
+}
+exports.DataGridHeadColumn = DataGridHeadColumn;

package/DataGrid/DataGridHeadColumn/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DataGridHeadColumn';
+export * from './types';

package/DataGrid/DataGridHeadColumn/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./DataGridHeadColumn"), exports);
+__exportStar(require("./types"), exports);

package/DataGrid/DataGridHeadColumn/styled.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { TableCellProps } from '@mui/material';
+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" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "disabled" | "sx" | "tabIndex" | "direction" | "action" | "active" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "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;
+} & {
+    fitContent?: boolean | undefined;
+}, {}, {}>;

package/DataGrid/DataGridHeadColumn/styled.js

@@ -0,0 +1,20 @@
+"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.StyledTableCell = exports.StyledTableSortLabel = 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';
+});
+exports.StyledTableCell = (0, styles_1.styled)(Table_1.TableCell, {
+    shouldForwardProp: function (prop) { return prop !== 'fitContent'; },
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: ", ";\n\n  cursor: pointer;\n\n  user-select: none;\n"], ["\n  width: ", ";\n\n  cursor: pointer;\n\n  user-select: none;\n"])), function (_a) {
+    var fitContent = _a.fitContent;
+    return (fitContent ? '1%' : 'auto');
+});
+var templateObject_1, templateObject_2;

package/DataGrid/DataGridHeadColumn/types.d.ts

@@ -0,0 +1,11 @@
+import { TableCellProps } from '@mui/material';
+import { DataGridSort, RenderCell } from '../types';
+export declare type DataGridHeadColumnProps<T> = {
+    onSort: (field: keyof T, sortable: boolean | undefined) => () => void;
+    sorting: DataGridSort<T>[];
+    renderCell?: RenderCell<T>;
+    label?: string;
+    sortable?: boolean;
+    align?: TableCellProps['align'];
+    field: keyof T;
+};

package/DataGrid/DataGridHeadColumn/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/DataGrid/DataGridLoader/DataGridLoader.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DataGridLoaderProps } from './types';
+declare const DataGridLoader: ({ loading }: DataGridLoaderProps) => JSX.Element;
+export default DataGridLoader;

package/DataGrid/DataGridLoader/DataGridLoader.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_1 = require("./styled");
+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, {}, void 0), loading ? (0, jsx_runtime_1.jsx)(styled_1.StyledLinearProgress, {}, void 0) : (0, jsx_runtime_1.jsx)(styled_1.StyledDivider, {}, void 0)] }, void 0));
+};
+exports.default = DataGridLoader;

package/DataGrid/DataGridLoader/index.d.ts

@@ -0,0 +1,2 @@
+export * from './styled';
+export * from './types';

package/DataGrid/DataGridLoader/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./types"), exports);

package/DataGrid/DataGridLoader/styled.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export declare const Backdrop: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledDivider: import("@emotion/styled").StyledComponent<{
+    absolute?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").DividerClasses> | undefined;
+    flexItem?: boolean | undefined;
+    light?: boolean | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    textAlign?: "left" | "center" | "right" | undefined;
+    variant?: "middle" | "inset" | "fullWidth" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "key" | keyof import("react").HTMLAttributes<HTMLHRElement>> & {
+    ref?: ((instance: HTMLHRElement | null) => void) | import("react").RefObject<HTMLHRElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "orientation" | "textAlign" | "light" | "absolute" | "flexItem"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const LoaderWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledLinearProgress: import("@emotion/styled").StyledComponent<import("@mui/material").LinearProgressProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/DataGrid/DataGridLoader/styled.js

@@ -0,0 +1,18 @@
+"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;

package/DataGrid/DataGridLoader/types.d.ts

@@ -0,0 +1,3 @@
+export declare type DataGridLoaderProps = {
+    loading?: boolean;
+};

package/DataGrid/DataGridLoader/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/DataGrid/constants.d.ts

@@ -0,0 +1,4 @@
+export declare enum SortStates {
+    ASC = "asc",
+    DESC = "desc"
+}