@addev-be/ui 0.7.2 → 0.7.4

package/dist/components/data/DataGrid/hooks/useDataGrid.js

@@ -0,0 +1,241 @@
+"use strict";
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+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 __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());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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.useDataGrid = void 0;
+var react_1 = require("react");
+var _1 = require(".");
+var helpers_1 = require("../helpers");
+var lodash_1 = require("lodash");
+var useDataGridSettings_1 = require("./useDataGridSettings");
+var useDataGrid = function (props, override) {
+    var _a;
+    var rows = props.rows, onFiltersChanged = props.onFiltersChanged, onSortsChanged = props.onSortsChanged, loadCopyRows = props.loadCopyRows, onSelectionChange = props.onSelectionChange, onSelectedRowsChanged = props.onSelectedRowsChanged, selectable = props.selectable, initialSorts = props.initialSorts;
+    var _b = (0, react_1.useState)(props.columns), columns = _b[0], setColumns = _b[1];
+    var visibleColumns = (0, _1.useSortedColumns)(columns);
+    /** SETTINGS */
+    var _c = (0, useDataGridSettings_1.useDataGridSettings)(props.name), settings = _c.settings, setSettings = _c.setSettings, saveSettings = _c.saveSettings;
+    var setColumnWidth = (0, react_1.useCallback)(function (key, width) {
+        setSettings(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[key] = __assign(__assign({}, prev[key]), { width: width }), _a)));
+        });
+    }, [setSettings]);
+    var gridTemplateColumns = (0, react_1.useMemo)(function () {
+        return __spreadArray(__spreadArray([], (selectable ? ['var(--space-8)'] : []), true), visibleColumns.map(function (_a) {
+            var _b;
+            var col = _a[1];
+            return "".concat((_b = col.width) !== null && _b !== void 0 ? _b : 150, "px");
+        }), true).join(' ');
+    }, [selectable, visibleColumns]);
+    // Update columns when settings change
+    (0, react_1.useEffect)(function () {
+        setColumns(function (prev) { return (0, lodash_1.merge)({}, prev, settings); });
+    }, [settings]);
+    /** ROWS SELECTION **/
+    var rowKeyGetter = (0, react_1.useMemo)(function () {
+        return typeof props.rowKey === 'function'
+            ? props.rowKey
+            : function (row) { return String(row === null || row === void 0 ? void 0 : row[props.rowKey]); };
+    }, [props.rowKey]);
+    var _d = (0, react_1.useState)([]), selectedKeys = _d[0], setSelectedKeys = _d[1];
+    var selectedRows = (0, react_1.useMemo)(function () { return props.rows.filter(function (row) { return selectedKeys.includes(rowKeyGetter(row)); }); }, [props.rows, rowKeyGetter, selectedKeys]);
+    (0, react_1.useEffect)(function () {
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectedKeys);
+    }, [onSelectionChange, selectedKeys]);
+    (0, react_1.useEffect)(function () {
+        onSelectedRowsChanged === null || onSelectedRowsChanged === void 0 ? void 0 : onSelectedRowsChanged(selectedRows);
+    }, [onSelectedRowsChanged, selectedRows]);
+    var toggleSelection = (0, react_1.useCallback)(function (key) {
+        if (selectedKeys.includes(key)) {
+            setSelectedKeys(selectedKeys.filter(function (p) { return p !== key; }));
+        }
+        else {
+            setSelectedKeys(__spreadArray(__spreadArray([], selectedKeys, true), [key], false));
+        }
+    }, [selectedKeys, setSelectedKeys]);
+    /** ROWS FILTERING **/
+    var _e = (0, react_1.useState)({}), filters = _e[0], setFilters = _e[1];
+    var _f = (0, react_1.useState)(rows !== null && rows !== void 0 ? rows : []), filteredRows = _f[0], setFilteredRows = _f[1];
+    (0, react_1.useEffect)(function () {
+        onFiltersChanged === null || onFiltersChanged === void 0 ? void 0 : onFiltersChanged(filters);
+    }, [filters, onFiltersChanged]);
+    (0, react_1.useEffect)(function () {
+        var filteredRows = props.filter === false
+            ? rows
+            : Object.entries(filters).reduce(function (tempRows, _a) {
+                var filter = _a[1];
+                return (0, helpers_1.applyFilter)(tempRows, filter /* TODO : fix typings */);
+            }, rows);
+        setFilteredRows(filteredRows !== null && filteredRows !== void 0 ? filteredRows : []);
+    }, [filters, props.filter, rows]);
+    /** CELL EDITING */
+    var _g = (0, react_1.useState)([-1, -1]), editingCell = _g[0], setEditingCell = _g[1];
+    /** ROWS SORTING **/
+    var _h = (0, react_1.useState)(initialSorts !== null && initialSorts !== void 0 ? initialSorts : {}), sorts = _h[0], setSorts = _h[1];
+    var _j = (0, react_1.useState)(rows), sortedRows = _j[0], setSortedRows = _j[1];
+    (0, react_1.useEffect)(function () {
+        var sortedRows = __spreadArray([], filteredRows, true);
+        if (props.sort !== false) {
+            Object.entries(sorts).forEach(function (_a) {
+                var sortKey = _a[0], sort = _a[1];
+                // Get the sort column and make sure it exists and is sortable
+                var sortColumn = columns[sortKey];
+                if (!sortColumn || typeof sortColumn.sortGetter !== 'function')
+                    return;
+                // Sort the rows using the sortGetter function of the column
+                var sortDirection = sort === 'asc' ? 1 : -1;
+                sortedRows.sort(function (a, b) {
+                    var aValue = sortColumn.sortGetter(a);
+                    var bValue = sortColumn.sortGetter(b);
+                    if (aValue === bValue)
+                        return 0;
+                    return aValue > bValue ? sortDirection : -sortDirection;
+                });
+            });
+        }
+        setSortedRows(sortedRows);
+    }, [columns, filteredRows, sorts, onSortsChanged, props.sort]);
+    (0, react_1.useEffect)(function () {
+        onSortsChanged === null || onSortsChanged === void 0 ? void 0 : onSortsChanged(sorts);
+    }, [sorts, onSortsChanged]);
+    /** VIRTUAL SCROLLING */
+    var scrollableRef = (0, react_1.useRef)(null);
+    /** FOOTERS */
+    var _k = (0, react_1.useState)((_a = props.initialFooters) !== null && _a !== void 0 ? _a : {}), footers = _k[0], setFooters = _k[1];
+    var footerFunctions = (0, react_1.useMemo)(function () {
+        return Object.entries(footers).reduce(function (acc, _a) {
+            var columnKey = _a[0], footerKey = _a[1];
+            var column = columns[columnKey];
+            if (!column) {
+                return acc;
+            }
+            if (typeof column.footer === 'function') {
+                acc[columnKey] = column.footer;
+            }
+            else if (typeof column.footer === 'object' &&
+                typeof column.footer[footerKey] === 'function' &&
+                column.footer[footerKey] !== null) {
+                acc[columnKey] = column.footer[footerKey];
+            }
+            return acc;
+        }, {});
+    }, [columns, footers]);
+    /** COPYING */
+    var copyTable = (0, _1.useDataGridCopy)({
+        rows: rows,
+        visibleColumns: visibleColumns,
+        footerFunctions: footerFunctions,
+        loadCopyRows: loadCopyRows,
+    }).copyTable;
+    var contextValue = (0, react_1.useMemo)(function () { return (__assign(__assign(__assign({}, props), { columns: columns, visibleColumns: visibleColumns, sortedRows: sortedRows, selectedRows: selectedRows, selectedKeys: selectedKeys, setSelectedKeys: setSelectedKeys, sorts: sorts, setSorts: setSorts, filters: filters, setFilters: setFilters, editingCell: editingCell, setEditingCell: setEditingCell, copyTable: copyTable, setColumnWidth: setColumnWidth, settings: settings, setSettings: setSettings, saveSettings: saveSettings, scrollableRef: scrollableRef, length: length, rowKeyGetter: rowKeyGetter, gridTemplateColumns: gridTemplateColumns, footers: footers, setFooters: setFooters, footerFunctions: footerFunctions, toggleSelection: toggleSelection }), override)); }, [
+        props,
+        columns,
+        visibleColumns,
+        sortedRows,
+        selectedRows,
+        selectedKeys,
+        sorts,
+        filters,
+        editingCell,
+        copyTable,
+        setColumnWidth,
+        settings,
+        setSettings,
+        saveSettings,
+        scrollableRef,
+        rowKeyGetter,
+        gridTemplateColumns,
+        footers,
+        footerFunctions,
+        toggleSelection,
+        override,
+    ]);
+    var context = (0, react_1.useMemo)(function () {
+        return (0, react_1.createContext)({
+            rows: [],
+            columns: {},
+            visibleColumns: [],
+            rowKey: '',
+            rowKeyGetter: function () { return ''; },
+            sortedRows: [],
+            selectedRows: [],
+            selectedKeys: [],
+            setSelectedKeys: function () { },
+            setSorts: function () { },
+            setFilters: function () { },
+            editingCell: [-1, -1],
+            setEditingCell: function () { },
+            copyTable: function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                return [2 /*return*/];
+            }); }); },
+            setColumnWidth: function () { },
+            saveSettings: function () { },
+            settings: {},
+            setSettings: function () { },
+            length: 0,
+            gridTemplateColumns: '',
+            footers: {},
+            setFooters: function () { },
+            toggleSelection: function () { },
+        });
+    }, []);
+    return (0, react_1.useMemo)(function () { return [contextValue, context]; }, [context, contextValue]);
+};
+exports.useDataGrid = useDataGrid;

package/dist/components/data/DataGrid/hooks/useDataGridCopy.d.ts

@@ -0,0 +1,4 @@
+import { DataGridContextProps } from '../types';
+export declare const useDataGridCopy: <R>({ rows, visibleColumns, loadCopyRows, footerFunctions, }: Pick<DataGridContextProps<R>, "rows" | "visibleColumns" | "loadCopyRows" | "footerFunctions">) => {
+    copyTable: (includeHeaders?: boolean, includeFooters?: boolean) => Promise<void>;
+};

package/dist/components/data/DataGrid/hooks/useDataGridCopy.js

@@ -0,0 +1,163 @@
+"use strict";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+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());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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.useDataGridCopy = void 0;
+var react_1 = require("react");
+var useDataGridCopy = function (_a) {
+    var rows = _a.rows, _b = _a.visibleColumns, visibleColumns = _b === void 0 ? [] : _b, loadCopyRows = _a.loadCopyRows, footerFunctions = _a.footerFunctions;
+    var generateHeadersHtml = (0, react_1.useCallback)(function () {
+        return "<tr>\n            ".concat(visibleColumns
+            .map(function (_a) {
+            var col = _a[1];
+            return "<th style=\"\n                        text-align: left;\n                        font-weight: bold;\n                        white-space: nowrap;\n                    \">\n                        ".concat(col.name, "\n                    </th>");
+        })
+            .join('\n'), "\n        </tr>");
+    }, [visibleColumns]);
+    var generateFootersHtml = (0, react_1.useCallback)(function (rowsToCopy) {
+        console.log('generate footers html');
+        return "<tr>\n            ".concat(visibleColumns
+            .map(function (_a) {
+            var _b, _c;
+            var colKey = _a[0];
+            return "<td style=\"\n                      font-weight: bold;\n                      white-space: nowrap;\n                    \">\n                        ".concat((_c = (_b = footerFunctions === null || footerFunctions === void 0 ? void 0 : footerFunctions[colKey]) === null || _b === void 0 ? void 0 : _b.call(footerFunctions, rowsToCopy, rowsToCopy, [])) !== null && _c !== void 0 ? _c : '', "\n                    </td>");
+        })
+            .join('\n'), "\n        </tr>");
+    }, [footerFunctions, visibleColumns]);
+    var generateCellText = (0, react_1.useCallback)(function (col, value) {
+        var _a;
+        return col.excelValue ? col.excelValue(value) : (_a = value === null || value === void 0 ? void 0 : value.toString()) !== null && _a !== void 0 ? _a : '';
+    }, []);
+    var generateCellHtml = (0, react_1.useCallback)(function (col, value) { return "<td style=\"\n        ".concat(col.excelFormatter
+        ? "mso-number-format: '" + col.excelFormatter(col) + "';"
+        : '', "\n        ").concat(col.excelBackgroundColor
+        ? "background-color: '" + col.excelBackgroundColor(value) + "';"
+        : '', "\n        white-space: nowrap;\n      \">\n        ").concat(generateCellText(col, value), "\n      </td>"); }, [generateCellText]);
+    var generateCopyHtml = (0, react_1.useCallback)(function (rowsToCopy, includeHeaders, includeFooters) {
+        return "\n            <table>\n                ".concat(includeHeaders ? generateHeadersHtml() : '', "\n                ").concat((rowsToCopy || [])
+            .map(function (row) {
+            return "<tr>\n                        ".concat(visibleColumns
+                .map(function (_a) {
+                var col = _a[1];
+                var value = col.getter && row ? col.getter(row) : '';
+                return generateCellHtml(col, value);
+            })
+                .join('\n'), "\n                    </tr>");
+        })
+            .join('\n'), "\n                  ").concat(includeFooters ? generateFootersHtml(rowsToCopy) : '', "\n            </table>\n        ");
+    }, [visibleColumns, generateCellHtml, generateFootersHtml, generateHeadersHtml]);
+    var generateHeadersText = (0, react_1.useCallback)(function () {
+        return visibleColumns.map(function (_a) {
+            var col = _a[1];
+            return col.name;
+        }).join('\t');
+    }, [visibleColumns]);
+    var generateFootersText = (0, react_1.useCallback)(function (rowsToCopy) {
+        return visibleColumns
+            .map(function (_a) {
+            var _b, _c;
+            var colKey = _a[0];
+            return (_c = (_b = footerFunctions === null || footerFunctions === void 0 ? void 0 : footerFunctions[colKey]) === null || _b === void 0 ? void 0 : _b.call(footerFunctions, rowsToCopy, [], [])) !== null && _c !== void 0 ? _c : '';
+        })
+            .join('\t');
+    }, [footerFunctions, visibleColumns]);
+    var generateCopyText = (0, react_1.useCallback)(function (rowsToCopy, includeHeaders, includeFooters) {
+        return __spreadArray(__spreadArray([
+            includeHeaders ? generateHeadersText() : ''
+        ], (rowsToCopy || []).map(function (row) {
+            return visibleColumns
+                .map(function (_a) {
+                var col = _a[1];
+                var value = col.getter && row ? col.getter(row) : '';
+                return col.excelValue
+                    ? col.excelValue(value)
+                    : value != null && value !== undefined
+                        ? value.toString()
+                        : '';
+            })
+                .join('\t');
+        }), true), [
+            includeFooters ? generateFootersText(rowsToCopy) : '',
+        ], false).filter(function (s) { return s != null; })
+            .join('\n');
+    }, [visibleColumns, generateFootersText, generateHeadersText]);
+    var copyTable = (0, react_1.useCallback)(function () {
+        var args_1 = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args_1[_i] = arguments[_i];
+        }
+        return __awaiter(void 0, __spreadArray([], args_1, true), void 0, function (includeHeaders, includeFooters) {
+            var rowsToCopy, copyHtml, copyText;
+            if (includeHeaders === void 0) { includeHeaders = true; }
+            if (includeFooters === void 0) { includeFooters = true; }
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, (loadCopyRows !== null && loadCopyRows !== void 0 ? loadCopyRows : (function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+                            return [2 /*return*/, rows];
+                        }); }); }))()];
+                    case 1:
+                        rowsToCopy = _a.sent();
+                        copyHtml = generateCopyHtml(rowsToCopy, includeHeaders, includeFooters);
+                        copyText = generateCopyText(rowsToCopy, includeHeaders, includeFooters);
+                        return [4 /*yield*/, navigator['clipboard'].write([
+                                new ClipboardItem({
+                                    'text/plain': new Blob([copyText], { type: 'text/plain' }),
+                                    'text/html': new Blob([copyHtml], { type: 'text/html' }),
+                                }),
+                            ])];
+                    case 2:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    }, [generateCopyHtml, generateCopyText, loadCopyRows, rows]);
+    return {
+        copyTable: copyTable,
+    };
+};
+exports.useDataGridCopy = useDataGridCopy;

package/dist/components/data/DataGrid/hooks/useDataGridSettings.d.ts

@@ -0,0 +1,16 @@
+import { DataGridSettings } from '../types';
+export declare const useDataGridSettings: (name?: string) => {
+    settings: {
+        [x: string]: {
+            width?: number | undefined;
+            order?: number | undefined;
+        };
+    };
+    setSettings: import("react").Dispatch<import("react").SetStateAction<{
+        [x: string]: {
+            width?: number | undefined;
+            order?: number | undefined;
+        };
+    }>>;
+    saveSettings: (newValue?: DataGridSettings) => void;
+};

package/dist/components/data/DataGrid/hooks/useDataGridSettings.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataGridSettings = void 0;
+var react_1 = require("react");
+var providers_1 = require("../../../../providers");
+var useDataGridSettings = function (name) {
+    // TODO: Implement settings context
+    var _a = (0, providers_1.useSettings)(), settings = _a.settings, updateSettings = _a.updateSettings;
+    var _b = (0, react_1.useState)({}), dataGridSettings = _b[0], setDataGridSettings = _b[1];
+    (0, react_1.useEffect)(function () {
+        if (name) {
+            var settingName = "user.datagrid.settings.".concat(name);
+            var gridSettingsJson = (settings === null || settings === void 0 ? void 0 : settings[settingName]) || '{}';
+            var gridSettings = {};
+            try {
+                gridSettings = JSON.parse(gridSettingsJson);
+            }
+            catch (error) {
+                console.error('[GRID] cannot decode datagrid settings for', {
+                    name: name,
+                    gridSettingsJson: gridSettingsJson,
+                    error: error,
+                });
+            }
+            setDataGridSettings(gridSettings);
+        }
+    }, [name, settings]);
+    var saveSettings = (0, react_1.useCallback)(function (newValue) {
+        var _a;
+        if (name) {
+            var settingName = "user.datagrid.settings.".concat(name);
+            var newSettings = newValue !== null && newValue !== void 0 ? newValue : dataGridSettings;
+            var newSettingsJson = JSON.stringify(newSettings);
+            updateSettings((_a = {}, _a[settingName] = newSettingsJson, _a));
+        }
+    }, [dataGridSettings, name, updateSettings]);
+    return {
+        settings: dataGridSettings,
+        setSettings: setDataGridSettings,
+        saveSettings: saveSettings,
+    };
+};
+exports.useDataGridSettings = useDataGridSettings;

package/dist/components/data/DataGrid/index.d.ts

@@ -0,0 +1,8 @@
+import { ForwardedRef } from 'react';
+import { DataGridContextProps, DataGridProps, DataGridRefProps } from './types';
+export declare const DataGridInner: <R>({ contextOverride, ...props }: DataGridProps<R> & {
+    contextOverride?: Partial<DataGridContextProps<R>>;
+}, ref: ForwardedRef<DataGridRefProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGrid: <R>(props: DataGridProps<R> & {
+    contextOverride?: Partial<DataGridContextProps<R>>;
+} & import("react").RefAttributes<DataGridRefProps>) => import("react").JSX.Element | null;

package/dist/components/data/DataGrid/index.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataGrid = exports.DataGridInner = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles = __importStar(require("./styles"));
+var react_1 = require("react");
+var DataGridFooter_1 = require("./DataGridFooter");
+var DataGridHeader_1 = require("./DataGridHeader");
+var DataGridRowTemplate_1 = require("./DataGridRowTemplate");
+var VirtualScroller_1 = require("../VirtualScroller");
+var hooks_1 = require("./hooks");
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+var DataGridInner = function (_a, ref) {
+    var contextOverride = _a.contextOverride, props = __rest(_a, ["contextOverride"]);
+    var scrollableRef = (0, react_1.useRef)(null);
+    var className = props.className;
+    var _b = (0, hooks_1.useDataGrid)(props, contextOverride), contextProps = _b[0], DataGridContext = _b[1];
+    var columns = contextProps.columns, _c = contextProps.rowHeight, rowHeight = _c === void 0 ? 32 : _c, _d = contextProps.headerRowHeight, headerRowHeight = _d === void 0 ? 40 : _d, gridTemplateColumns = contextProps.gridTemplateColumns, sortedRows = contextProps.sortedRows, onVisibleRowsChange = contextProps.onVisibleRowsChange, refresh = contextProps.refresh, setSelectedKeys = contextProps.setSelectedKeys;
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        refresh: refresh !== null && refresh !== void 0 ? refresh : (function () { }),
+        setSelectedKeys: setSelectedKeys,
+    }); }, [refresh, setSelectedKeys]);
+    var hasFooter = Object.values(columns).some(function (col) { return col.footer; });
+    var rowTemplate = DataGridRowTemplate_1.DataGridRowTemplate;
+    return ((0, jsx_runtime_1.jsx)(DataGridContext.Provider, { value: contextProps, children: (0, jsx_runtime_1.jsxs)(styles.DataGridContainer, { ref: scrollableRef, "$headerRowHeight": headerRowHeight, "$rowHeight": rowHeight, "$rowsCount": contextProps.sortedRows.length, "$withFooter": hasFooter, className: className, children: [(0, jsx_runtime_1.jsx)(DataGridHeader_1.DataGridHeader, { context: DataGridContext }), (0, jsx_runtime_1.jsx)(VirtualScroller_1.VirtualScroller, { gridTemplateColumns: gridTemplateColumns, items: sortedRows, itemTemplate: rowTemplate, itemProps: { context: DataGridContext }, rowHeightInPx: styles.DEFAULT_ROW_HEIGHT, onRangeChanged: onVisibleRowsChange }), hasFooter && (0, jsx_runtime_1.jsx)(DataGridFooter_1.DataGridFooter, { context: DataGridContext })] }) }));
+};
+exports.DataGridInner = DataGridInner;
+exports.DataGrid = (0, react_1.forwardRef)(exports.DataGridInner);

package/dist/components/data/DataGrid/styles.d.ts

@@ -0,0 +1,47 @@
+import { ThemeColor } from '../../../providers/ThemeProvider/types';
+export declare const TOOLBAR_HEIGHT = 40;
+export declare const DEFAULT_HEADER_ROW_HEIGHT = 40;
+export declare const DEFAULT_FOOTER_ROW_HEIGHT = 40;
+export declare const DEFAULT_ROW_HEIGHT = 32;
+export declare const DataGridResizeGrip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $headerColor?: ThemeColor;
+}>> & string;
+type DataGridHeaderCellContainerProps = {
+    $isResizing?: boolean;
+    $headerColor?: ThemeColor;
+};
+export declare const DataGridHeaderCellContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DataGridHeaderCellContainerProps>> & string;
+export declare const DataGridCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DataGridToolsRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DataGridContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $headerRowHeight?: number;
+    $rowHeight?: number;
+    $rowsCount: number;
+    $showToolsHeader?: boolean;
+    $withFooter?: boolean;
+}>> & string;
+type DataGridHeaderOrFooterRowProps = {
+    $headerRowHeight?: number;
+    $headerColor?: ThemeColor;
+    $gridTemplateColumns: string;
+};
+export declare const DataGridHeaderRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, DataGridHeaderOrFooterRowProps>, never>> & string;
+export declare const DataGridFooterRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, DataGridHeaderOrFooterRowProps>, never>> & string;
+export declare const DataGridRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LoadingCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const SelectionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const HeaderSelectionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DataGridHeaderCellContainerProps> & DataGridHeaderCellContainerProps, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const ResizeBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;
+export {};