@addev-be/ui 0.16.10 → 0.17.1

package/dist/components/data/DataGrid/helpers/columns.d.ts

@@ -1,17 +1,15 @@
 import { DataGridCheckboxColumn, DataGridColorColumn, DataGridColumn, DataGridDateColumn, DataGridNumberColumn, DataGridSelectColumn, DataGridSettings, DataGridTextColumn } from '../types';
-import { DeepPartial } from '../../../../types';
-import { SqlRequestDataGridTextColumn } from '../../SqlRequestDataGrid/types';
 export declare const isColumnVisible: <R>(obj: DataGridColumn<R> | DataGridSettings) => boolean;
 export declare const buildExcelFormat: (decimals?: number, suffix?: string) => string;
-export declare const textColumn: <R extends Record<string, any>>(key: string, title: string, options?: DeepPartial<SqlRequestDataGridTextColumn<R>>, otherOptions?: Partial<DataGridTextColumn<R>>) => DataGridTextColumn<R>;
-export declare const mailColumn: <R extends Record<string, any>>(key: string, title: string, options?: DeepPartial<SqlRequestDataGridTextColumn<R>>, otherOptions?: Partial<DataGridTextColumn<R>>) => DataGridTextColumn<R>;
-export declare const phoneColumn: <R extends Record<string, any>>(key: string, title: string, options?: DeepPartial<SqlRequestDataGridTextColumn<R>>, otherOptions?: Partial<DataGridTextColumn<R>>) => DataGridTextColumn<R>;
-export declare const dateColumn: <R extends Record<string, any>>(key: string, title: string, options?: DeepPartial<SqlRequestDataGridTextColumn<R>>, otherOptions?: Partial<DataGridDateColumn<R>>) => DataGridDateColumn<R>;
-export declare const dateTimeColumn: <R extends Record<string, any>>(key: string, title: string, options?: DeepPartial<SqlRequestDataGridTextColumn<R>>, otherOptions?: Partial<DataGridDateColumn<R>>) => DataGridDateColumn<R>;
-export declare const monthColumn: <R extends Record<string, any>>(key: string, title: string, options?: DeepPartial<SqlRequestDataGridTextColumn<R>>, otherOptions?: Partial<DataGridTextColumn<R>>) => DataGridTextColumn<R>;
-export declare const numberColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: DeepPartial<SqlRequestDataGridTextColumn<R>>, otherOptions?: Partial<DataGridNumberColumn<R>>) => DataGridNumberColumn<R>;
-export declare const moneyColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, currency?: string | ((row: R) => string), options?: DeepPartial<SqlRequestDataGridTextColumn<R>>, otherOptions?: Partial<DataGridNumberColumn<R>>) => DataGridNumberColumn<R>;
-export declare const percentageColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: DeepPartial<SqlRequestDataGridTextColumn<R>>, otherOptions?: Partial<DataGridNumberColumn<R>>) => DataGridNumberColumn<R>;
+export declare const textColumn: <R extends Record<string, any>>(key: string, title: string, otherOptions?: Partial<DataGridTextColumn<R>>) => DataGridTextColumn<R>;
+export declare const mailColumn: <R extends Record<string, any>>(key: string, title: string, otherOptions?: Partial<DataGridTextColumn<R>>) => DataGridTextColumn<R>;
+export declare const phoneColumn: <R extends Record<string, any>>(key: string, title: string, otherOptions?: Partial<DataGridTextColumn<R>>) => DataGridTextColumn<R>;
+export declare const dateColumn: <R extends Record<string, any>>(key: string, title: string, otherOptions?: Partial<DataGridDateColumn<R>>) => DataGridDateColumn<R>;
+export declare const dateTimeColumn: <R extends Record<string, any>>(key: string, title: string, otherOptions?: Partial<DataGridDateColumn<R>>) => DataGridDateColumn<R>;
+export declare const monthColumn: <R extends Record<string, any>>(key: string, title: string, otherOptions?: Partial<DataGridTextColumn<R>>) => DataGridTextColumn<R>;
+export declare const numberColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, otherOptions?: Partial<DataGridNumberColumn<R>>) => DataGridNumberColumn<R>;
+export declare const moneyColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, otherOptions?: Partial<DataGridNumberColumn<R>>) => DataGridNumberColumn<R>;
+export declare const percentageColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, otherOptions?: Partial<DataGridNumberColumn<R>>) => DataGridNumberColumn<R>;
 export declare const checkboxColumn: <R extends Record<string, any>>(key: string, title: string, otherOptions?: Partial<DataGridCheckboxColumn<R>>) => DataGridCheckboxColumn<R>;
 export declare const selectColumn: <R extends Record<string, any>, T>(key: string, title: string, items: T[], itemKey: (item: T | null) => string, itemLabel: (item: T | null) => string, otherOptions?: Partial<DataGridSelectColumn<R, T>>) => DataGridSelectColumn<R, T>;
 export declare const colorColumn: <R extends Record<string, any>>(key: string, title: string, otherOptions?: Partial<DataGridColorColumn<R>>) => DataGridColorColumn<R>;

package/dist/components/data/DataGrid/helpers/columns.js

@@ -10,35 +10,22 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.colorColumn = exports.selectColumn = exports.checkboxColumn = exports.percentageColumn = exports.moneyColumn = exports.numberColumn = exports.monthColumn = exports.dateTimeColumn = exports.dateColumn = exports.phoneColumn = exports.mailColumn = exports.textColumn = exports.buildExcelFormat = exports.isColumnVisible = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
 var filters_1 = require("./filters");
-var dates_1 = require("../../../../helpers/dates");
 var numbers_1 = require("../../../../helpers/numbers");
 var CheckboxEditableCell_1 = require("../DataGridEditableCell/CheckboxEditableCell");
 var DateEditableCell_1 = require("../DataGridEditableCell/DateEditableCell");
 var NumberEditableCell_1 = require("../DataGridEditableCell/NumberEditableCell");
 var Select_1 = require("../../../forms/Form/Select");
-var typography_1 = require("../../../../helpers/styled/typography");
 var TextEditableCell_1 = require("../DataGridEditableCell/TextEditableCell");
 var moment_1 = __importDefault(require("moment"));
 var lodash_1 = require("lodash");
-var components_1 = require("../../../../helpers/components");
 var isColumnVisible = function (obj) { return (obj === null || obj === void 0 ? void 0 : obj.order) !== -1; };
 exports.isColumnVisible = isColumnVisible;
 var buildExcelFormat = function (decimals, suffix) {
@@ -47,27 +34,27 @@ var buildExcelFormat = function (decimals, suffix) {
     return "#0".concat(decimals > 0 ? ".".concat((0, lodash_1.repeat)('0', decimals)) : '').concat(suffix);
 };
 exports.buildExcelFormat = buildExcelFormat;
-var textColumn = function (key, title, options, otherOptions) { return (__assign({ key: key, type: 'text', name: title, render: function (value) { return ((0, jsx_runtime_1.jsx)(typography_1.StyledTypography, __assign({}, options === null || options === void 0 ? void 0 : options.typography, { children: value }))); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key), editComponent: TextEditableCell_1.TextEditableCell }, otherOptions)); };
+var textColumn = function (key, title, otherOptions) { return (__assign({ key: key, type: 'text', name: title, render: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key), editComponent: TextEditableCell_1.TextEditableCell }, otherOptions)); };
 exports.textColumn = textColumn;
-var mailColumn = function (key, title, options, otherOptions) { return (__assign({ key: key, type: 'text', name: title, render: function (value) { return ((0, jsx_runtime_1.jsx)(typography_1.StyledTypography, __assign({ href: "mailto:".concat(value) }, options === null || options === void 0 ? void 0 : options.typography, { as: 'a', children: value }))); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key), editComponent: TextEditableCell_1.TextEditableCell }, otherOptions)); };
+var mailColumn = function (key, title, otherOptions) { return (__assign({ key: key, type: 'text', name: title, render: function (row) { var _a; return (0, jsx_runtime_1.jsx)("a", { href: "mailto:".concat(row[key]), children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key), editComponent: TextEditableCell_1.TextEditableCell }, otherOptions)); };
 exports.mailColumn = mailColumn;
-var phoneColumn = function (key, title, options, otherOptions) { return (__assign({ key: key, type: 'text', name: title, render: function (value) { return ((0, jsx_runtime_1.jsx)(typography_1.StyledTypography, __assign({ href: "tel:".concat(value) }, options === null || options === void 0 ? void 0 : options.typography, { as: 'a', children: value }))); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key), editComponent: TextEditableCell_1.TextEditableCell }, otherOptions)); };
+var phoneColumn = function (key, title, otherOptions) { return (__assign({ key: key, type: 'text', name: title, render: function (row) { var _a; return (0, jsx_runtime_1.jsx)("a", { href: "tel:".concat(row[key]), children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key), editComponent: TextEditableCell_1.TextEditableCell }, otherOptions)); };
 exports.phoneColumn = phoneColumn;
-var dateColumn = function (key, title, options, otherOptions) { return (__assign({ key: key, type: 'date', name: title, render: function (value) { return ((0, jsx_runtime_1.jsx)(typography_1.StyledTypography, __assign({}, options === null || options === void 0 ? void 0 : options.typography, { children: (0, dates_1.formatDate)(value) }))); }, excelOptions: {
+var dateColumn = function (key, title, otherOptions) { return (__assign({ key: key, type: 'date', name: title, render: function (row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; }, excelOptions: {
         formatter: function () { return 'dd/mm/yyyy'; },
         valueGetter: function (value) { var _a; return (_a = (0, moment_1.default)(value).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; },
     }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: __assign(__assign({}, (0, filters_1.dateFilter)(key)), { renderer: function (value) { var _a; return (_a = (0, moment_1.default)(value).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; } }), editComponent: DateEditableCell_1.DateEditableCell }, otherOptions)); };
 exports.dateColumn = dateColumn;
-var dateTimeColumn = function (key, title, options, otherOptions) { return (__assign({ key: key, type: 'date', name: title, render: function (value) { return ((0, jsx_runtime_1.jsx)(typography_1.StyledTypography, __assign({}, options === null || options === void 0 ? void 0 : options.typography, { children: (0, dates_1.formatDateTime)(value) }))); }, excelOptions: {
+var dateTimeColumn = function (key, title, otherOptions) { return (__assign({ key: key, type: 'date', name: title, render: function (row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY HH:mm:ss')) !== null && _a !== void 0 ? _a : ''; }, excelOptions: {
         formatter: function () { return 'dd/mm/yyyy hh:mm:ss'; },
         valueGetter: function (value) { var _a; return (_a = (0, moment_1.default)(value).format('DD/MM/YYYY HH:mm:ss')) !== null && _a !== void 0 ? _a : ''; },
     }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: __assign(__assign({}, (0, filters_1.dateFilter)(key)), { renderer: function (value) { var _a; return (_a = (0, moment_1.default)(value).format('DD/MM/YYYY HH:mm:ss')) !== null && _a !== void 0 ? _a : ''; } }), editComponent: DateEditableCell_1.DateEditableCell }, otherOptions)); };
 exports.dateTimeColumn = dateTimeColumn;
-var monthColumn = function (key, title, options, otherOptions) { return (__assign({ key: key, type: 'text', name: title, render: function (value) { return ((0, jsx_runtime_1.jsx)(typography_1.StyledTypography, __assign({}, options === null || options === void 0 ? void 0 : options.typography, { children: value + 'Mois' }))); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key) }, otherOptions)); };
+var monthColumn = function (key, title, otherOptions) { return (__assign({ key: key, type: 'text', name: title, render: function (row) { return (row[key] ? "".concat(row[key], " mois ") : ''); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key) }, otherOptions)); };
 exports.monthColumn = monthColumn;
-var numberColumn = function (key, title, decimals, options, otherOptions) {
+var numberColumn = function (key, title, decimals, otherOptions) {
     if (decimals === void 0) { decimals = 2; }
-    var column = __assign({ key: key, type: 'number', name: title, render: function (value) { return ((0, jsx_runtime_1.jsx)(typography_1.StyledTypography, __assign({}, options === null || options === void 0 ? void 0 : options.typography, { children: (0, numbers_1.formatNumber)(value, decimals) }))); }, excelOptions: {
+    var column = __assign({ key: key, type: 'number', name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatNumber)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelOptions: {
             formatter: function () { return (0, exports.buildExcelFormat)(decimals); },
             valueGetter: function (value) { return (0, numbers_1.formatNumberInvariant)(value, decimals); },
         }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, footer: {
@@ -85,19 +72,13 @@ var numberColumn = function (key, title, decimals, options, otherOptions) {
             min: function (_, filteredRows) {
                 return (0, numbers_1.formatNumber)(Math.min.apply(Math, filteredRows.map(function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : 0; })), decimals);
             },
-        }, filter: __assign(__assign({}, (0, filters_1.numberFilter)(key)), { renderer: function (value) { var _a; return (_a = (0, numbers_1.formatNumber)(value, decimals)) !== null && _a !== void 0 ? _a : ''; } }), editComponent: (0, components_1.withDisplayName)(function (_a) {
-            var ref = _a.ref, otherProps = __rest(_a, ["ref"]);
-            return ((0, jsx_runtime_1.jsx)(NumberEditableCell_1.NumberEditableCell, __assign({ ref: ref, decimals: column.decimals, currency: column.currency }, otherProps)));
-        }, 'NumberColumnEditComponent') }, otherOptions);
+        }, filter: __assign(__assign({}, (0, filters_1.numberFilter)(key)), { renderer: function (value) { var _a; return (_a = (0, numbers_1.formatNumber)(value, decimals)) !== null && _a !== void 0 ? _a : ''; } }), editComponent: (0, react_1.forwardRef)(function (props, ref) { return ((0, jsx_runtime_1.jsx)(NumberEditableCell_1.NumberEditableCell, __assign({ ref: ref, decimals: column.decimals, currency: column.currency }, props))); }) }, otherOptions);
     return column;
 };
 exports.numberColumn = numberColumn;
-var moneyColumn = function (key, title, decimals, currency, options, otherOptions) {
+var moneyColumn = function (key, title, decimals, otherOptions) {
     if (decimals === void 0) { decimals = 2; }
-    if (currency === void 0) { currency = '€'; }
-    var column = __assign({ key: key, type: 'number', name: title, render: typeof currency === 'function'
-            ? function (value, row) { return ((0, jsx_runtime_1.jsx)(typography_1.StyledTypography, __assign({}, options === null || options === void 0 ? void 0 : options.typography, { children: (0, numbers_1.formatMoney)(value, decimals, currency(row)) }))); }
-            : function (value) { return ((0, jsx_runtime_1.jsx)(typography_1.StyledTypography, __assign({}, options === null || options === void 0 ? void 0 : options.typography, { children: (0, numbers_1.formatMoney)(value, decimals, currency) }))); }, excelOptions: {
+    var column = __assign({ key: key, type: 'number', name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatMoney)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelOptions: {
             formatter: function () { return (0, exports.buildExcelFormat)(decimals, ' €'); },
             valueGetter: function (value) { return (0, numbers_1.formatNumberInvariant)(value, decimals); },
         }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: __assign(__assign({}, (0, filters_1.numberFilter)(key)), { renderer: function (value) { var _a; return (_a = (0, numbers_1.formatMoney)(value, decimals)) !== null && _a !== void 0 ? _a : ''; } }), footer: {
@@ -119,9 +100,9 @@ var moneyColumn = function (key, title, decimals, currency, options, otherOption
     return column;
 };
 exports.moneyColumn = moneyColumn;
-var percentageColumn = function (key, title, decimals, options, otherOptions) {
+var percentageColumn = function (key, title, decimals, otherOptions) {
     if (decimals === void 0) { decimals = 2; }
-    var column = __assign({ key: key, type: 'number', name: title, render: function (value) { return ((0, jsx_runtime_1.jsx)(typography_1.StyledTypography, __assign({}, options === null || options === void 0 ? void 0 : options.typography, { children: (0, numbers_1.formatPercentage)(value) }))); }, excelOptions: {
+    var column = __assign({ key: key, type: 'number', name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatPercentage)(row[key])) !== null && _a !== void 0 ? _a : ''; }, excelOptions: {
             formatter: function () { return (0, exports.buildExcelFormat)(decimals, '%'); },
             valueGetter: function (value) { return (0, numbers_1.formatNumberInvariant)(value, decimals); },
         }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.numberFilter)(key), footer: {
@@ -143,7 +124,7 @@ var percentageColumn = function (key, title, decimals, options, otherOptions) {
     return column;
 };
 exports.percentageColumn = percentageColumn;
-var checkboxColumn = function (key, title, otherOptions) { return (__assign({ key: key, type: 'checkbox', name: title, render: function (value, row) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: row[key], readOnly: true }), (0, jsx_runtime_1.jsx)("span", { children: row[key] ? ' Oui' : ' Non' })] })); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.numberFilter)(key), footer: {
+var checkboxColumn = function (key, title, otherOptions) { return (__assign({ key: key, type: 'checkbox', name: title, render: function (row) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: row[key], readOnly: true }), (0, jsx_runtime_1.jsx)("span", { children: row[key] ? ' Oui' : ' Non' })] })); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.numberFilter)(key), footer: {
         count: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); },
         checked: function (_, filteredRows) {
             return "".concat(filteredRows.filter(function (row) { return !!row[key]; }).length, " coch\u00E9s");
@@ -153,12 +134,12 @@ var checkboxColumn = function (key, title, otherOptions) { return (__assign({ ke
         },
     }, editComponent: CheckboxEditableCell_1.CheckboxEditableCell }, otherOptions)); };
 exports.checkboxColumn = checkboxColumn;
-var selectColumn = function (key, title, items, itemKey, itemLabel, otherOptions) { return (__assign({ key: key, type: 'select', name: title, render: function (value, row) { var _a; return (_a = itemLabel(row[key])) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : null; }, sortGetter: function (row) { var _a; return (_a = itemLabel(row[key])) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: __assign(__assign({}, (0, filters_1.textFilter)(key)), { renderer: function (value) { var _a; return (_a = itemLabel(value)) !== null && _a !== void 0 ? _a : ''; } }), items: items, itemKey: itemKey, itemLabel: itemLabel, editComponent: (0, components_1.withDisplayName)(function (_a) {
-        var value = _a.value, onChange = _a.onChange, onClose = _a.onClose, ref = _a.ref;
+var selectColumn = function (key, title, items, itemKey, itemLabel, otherOptions) { return (__assign({ key: key, type: 'select', name: title, render: function (row) { var _a; return (_a = itemLabel(row[key])) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : null; }, sortGetter: function (row) { var _a; return (_a = itemLabel(row[key])) !== null && _a !== void 0 ? _a : ''; }, footer: function (_, filteredRows) { return "".concat(filteredRows.length, " \u00E9l\u00E9ments"); }, filter: (0, filters_1.textFilter)(key), items: items, itemKey: itemKey, itemLabel: itemLabel, editComponent: (0, react_1.forwardRef)(function (_a, ref) {
+        var value = _a.value, onChange = _a.onChange, onClose = _a.onClose;
         return ((0, jsx_runtime_1.jsx)(Select_1.Select, { ref: ref, items: items, itemKey: itemKey, itemLabel: itemLabel, value: value, onChange: onChange, onBlur: function () { return onClose(true); } }));
-    }, 'SelectColumnEditComponent') }, otherOptions)); };
+    }) }, otherOptions)); };
 exports.selectColumn = selectColumn;
-var colorColumn = function (key, title, otherOptions) { return (__assign({ key: key, type: 'color', name: title, render: function (value, row) {
+var colorColumn = function (key, title, otherOptions) { return (__assign({ key: key, type: 'color', name: title, render: function (row) {
         var _a;
         return ((0, jsx_runtime_1.jsx)("div", { style: { backgroundColor: row[key] }, children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }));
     }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key), footer: function (rows) { return "".concat(rows.length, " \u00E9l\u00E9ments"); } }, otherOptions)); };

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

@@ -1,4 +1,5 @@
 "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) {
@@ -131,7 +132,7 @@ var useDataGrid = function (props, override) {
     var onRowAdded = (0, react_1.useCallback)(function (row) {
         setRows(function (prev) { return __spreadArray([row], prev, true); });
     }, [setRows]);
-    var _o = (0, useDataGridChangedRows_1.useDataGridChangedRows)(rowKeyGetter, onRowAdded), addedRows = _o.addedRows, updatedRows = _o.updatedRows, editRow = _o.editRow, addRow = _o.addRow, addRows = _o.addRows, updateRow = _o.updateRow, clearChangedRows = _o.clearChangedRows;
+    var _o = (0, useDataGridChangedRows_1.useDataGridChangedRows)(onRowAdded), addedRows = _o.addedRows, updatedRows = _o.updatedRows, editRow = _o.editRow, addRow = _o.addRow, updateRow = _o.updateRow, clearChangedRows = _o.clearChangedRows;
     /** ROWS SORTING **/
     var _p = (0, react_1.useState)(initialSorts !== null && initialSorts !== void 0 ? initialSorts : {}), sorts = _p[0], setSorts = _p[1];
     var _q = (0, react_1.useState)(rows), sortedRows = _q[0], setSortedRows = _q[1];
@@ -210,7 +211,7 @@ var useDataGrid = function (props, override) {
         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, resizingColumnKey: resizingColumnKey, startResizing: startResizing, moveResizing: moveResizing, endResizing: endResizing, addedRows: addedRows, updatedRows: updatedRows, editRow: editRow, addRow: addRow, addRows: addRows, updateRow: updateRow, clearChangedRows: clearChangedRows, setRows: setRows }), override)); }, [
+    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, resizingColumnKey: resizingColumnKey, startResizing: startResizing, moveResizing: moveResizing, endResizing: endResizing, addedRows: addedRows, updatedRows: updatedRows, editRow: editRow, addRow: addRow, updateRow: updateRow, clearChangedRows: clearChangedRows, setRows: setRows }), override)); }, [
         props,
         columns,
         visibleColumns,
@@ -238,7 +239,6 @@ var useDataGrid = function (props, override) {
         updatedRows,
         editRow,
         addRow,
-        addRows,
         updateRow,
         clearChangedRows,
         setRows,
@@ -275,12 +275,11 @@ var useDataGrid = function (props, override) {
             startResizing: function () { },
             moveResizing: function () { },
             endResizing: function () { },
-            addedRows: [],
-            updatedRows: [],
+            addedRows: {},
+            updatedRows: {},
             setRows: function () { },
             editRow: function () { },
             addRow: function () { },
-            addRows: function () { },
             updateRow: function () { },
             clearChangedRows: function () { },
         });

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

@@ -1,9 +1,9 @@
-export declare const useDataGridChangedRows: <R>(rowKeyGetter: (row: Partial<R>) => string, onRowAdded: (row: R) => void) => {
-    addedRows: Partial<R>[];
-    updatedRows: Partial<R>[];
-    editRow: (row: Partial<R>) => void;
-    addRow: (row: Partial<R>) => void;
-    addRows: (rows: R[]) => void;
-    updateRow: (row: Partial<R>) => void;
+import { DataGridEditedRows } from '../types';
+export declare const useDataGridChangedRows: <R>(onRowAdded: (row: R) => void) => {
+    addedRows: DataGridEditedRows<R>;
+    updatedRows: DataGridEditedRows<R>;
+    editRow: (key: string, row: Partial<R>) => void;
+    addRow: (key: string, row: R) => void;
+    updateRow: (key: string, row: Partial<R>) => void;
     clearChangedRows: (keys?: string[]) => void;
 };

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

@@ -10,80 +10,60 @@ 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.useDataGridChangedRows = void 0;
 var react_1 = require("react");
-var useDataGridChangedRows = function (rowKeyGetter, onRowAdded) {
-    var _a = (0, react_1.useState)([]), addedRows = _a[0], setAddedRows = _a[1];
-    var _b = (0, react_1.useState)([]), updatedRows = _b[0], setUpdatedRows = _b[1];
-    var addRow = (0, react_1.useCallback)(function (row) {
-        setAddedRows(function (prev) { return __spreadArray(__spreadArray([], prev, true), [row], false); });
+var lodash_1 = require("lodash");
+var useDataGridChangedRows = function (onRowAdded) {
+    var _a = (0, react_1.useState)({}), addedRows = _a[0], setAddedRows = _a[1];
+    var _b = (0, react_1.useState)({}), updatedRows = _b[0], setUpdatedRows = _b[1];
+    var addRow = (0, react_1.useCallback)(function (key, row) {
+        setAddedRows(function (prev) {
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[key] = row, _a)));
+        });
         onRowAdded(row);
     }, [onRowAdded]);
-    var addRows = (0, react_1.useCallback)(function (rows) {
-        rows.forEach(addRow);
-    }, [addRow]);
-    var updateRow = (0, react_1.useCallback)(function (row) {
-        var rowKey = rowKeyGetter(row);
+    var updateRow = (0, react_1.useCallback)(function (key, row) {
         setUpdatedRows(function (prev) {
-            var index = prev.findIndex(function (r) { return rowKeyGetter(r) === rowKey; });
-            return index >= 0
-                ? prev.map(function (existingRow, i) {
-                    return i === index ? __assign(__assign({}, existingRow), row) : existingRow;
-                })
-                : __spreadArray(__spreadArray([], prev, true), [row], false);
+            var _a;
+            return (__assign(__assign({}, prev), (_a = {}, _a[key] = row, _a)));
         });
-    }, [rowKeyGetter]);
-    var editRow = (0, react_1.useCallback)(function (row) {
-        var key = rowKeyGetter(row);
-        var addedRowIndex = addedRows.findIndex(function (r) { return rowKeyGetter(r) === key; });
-        if (addedRowIndex >= 0) {
+    }, []);
+    var editRow = (0, react_1.useCallback)(function (key, row) {
+        if (addedRows[key]) {
             setAddedRows(function (prev) {
-                return prev.map(function (existingRow, index) {
-                    return index === addedRowIndex ? __assign(__assign({}, existingRow), row) : existingRow;
-                });
+                var _a;
+                return (__assign(__assign({}, prev), (_a = {}, _a[key] = __assign(__assign({}, prev[key]), row), _a)));
             });
-            return;
         }
-        var updatedRowIndex = updatedRows.findIndex(function (r) { return rowKeyGetter(r) === key; });
-        if (updatedRowIndex >= 0) {
+        else if (updatedRows[key]) {
             setUpdatedRows(function (prev) {
-                return prev.map(function (existingRow, index) {
-                    return index === updatedRowIndex ? __assign(__assign({}, existingRow), row) : existingRow;
-                });
+                var _a;
+                return (__assign(__assign({}, prev), (_a = {}, _a[key] = __assign(__assign({}, prev[key]), row), _a)));
             });
-            return;
         }
-        setUpdatedRows(function (prev) { return __spreadArray(__spreadArray([], prev, true), [row], false); });
-    }, [rowKeyGetter, addedRows, updatedRows]);
+        else {
+            setUpdatedRows(function (prev) {
+                var _a;
+                return (__assign(__assign({}, prev), (_a = {}, _a[key] = row, _a)));
+            });
+        }
+    }, [addedRows, updatedRows]);
     var clearChangedRows = (0, react_1.useCallback)(function (keys) {
         if (!keys) {
-            setAddedRows([]);
-            setUpdatedRows([]);
+            setAddedRows({});
+            setUpdatedRows({});
             return;
         }
-        setAddedRows(function (prev) {
-            return prev.filter(function (row) { return !keys.includes(rowKeyGetter(row)); });
-        });
-        setUpdatedRows(function (prev) {
-            return prev.filter(function (row) { return !keys.includes(rowKeyGetter(row)); });
-        });
-    }, [rowKeyGetter]);
+        setAddedRows(function (prev) { return (0, lodash_1.pickBy)(prev, function (_, key) { return !keys.includes(key); }); });
+        setUpdatedRows(function (prev) { return (0, lodash_1.pickBy)(prev, function (_, key) { return !keys.includes(key); }); });
+    }, []);
     return {
         addedRows: addedRows,
         updatedRows: updatedRows,
         editRow: editRow,
         addRow: addRow,
-        addRows: addRows,
         updateRow: updateRow,
         clearChangedRows: clearChangedRows,
     };

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

@@ -1,12 +1,16 @@
 import { DataGridSettings } from '../types';
 export declare const useDataGridSettings: (name?: string) => {
-    settings: Record<string, {
-        width?: number | undefined;
-        order?: number | undefined;
-    }>;
-    setSettings: import("react").Dispatch<import("react").SetStateAction<Record<string, {
-        width?: number | undefined;
-        order?: number | undefined;
-    }>>>;
+    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

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDataGridSettings = void 0;
 var react_1 = require("react");
-var hooks_1 = require("../../../../providers/hooks");
+var providers_1 = require("../../../../providers");
 var useDataGridSettings = function (name) {
     // TODO: Implement settings context
-    var _a = (0, hooks_1.useSettings)(), settings = _a.settings, updateSettings = _a.updateSettings;
+    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) {

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

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

@@ -1,15 +1,4 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -26,23 +15,13 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+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)
@@ -64,36 +43,34 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataGrid = void 0;
+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 constants_1 = require("./constants");
+var VirtualScroller_1 = require("../VirtualScroller");
 var DataGridFooter_1 = require("./DataGridFooter");
 var DataGridHeader_1 = require("./DataGridHeader");
 var DataGridRowTemplate_1 = require("./DataGridRowTemplate");
-var DataGridToolbar_1 = require("./DataGridToolbar");
-var VirtualScroller_1 = require("../VirtualScroller");
-var space_1 = require("../../../helpers/styled/space");
 var hooks_1 = require("./hooks");
-var DataGrid = function (_a) {
+/* 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 spaceProps = (0, space_1.extractSpaceProps)(props);
     var _b = (0, hooks_1.useDataGrid)(props, contextOverride), contextProps = _b[0], DataGridContext = _b[1];
-    var columns = contextProps.columns, selectable = contextProps.selectable, _c = contextProps.rowHeight, rowHeight = _c === void 0 ? constants_1.DEFAULT_ROW_HEIGHT : _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, addRows = contextProps.addRows, fixedColumnsCount = contextProps.fixedColumnsCount, resizingColumnKey = contextProps.resizingColumnKey, moveResizing = contextProps.moveResizing, endResizing = contextProps.endResizing, footerFunctions = contextProps.footerFunctions;
-    (0, react_1.useImperativeHandle)(props.ref, function () { return ({
+    var columns = contextProps.columns, selectable = contextProps.selectable, _c = contextProps.rowHeight, rowHeight = _c === void 0 ? constants_1.DEFAULT_ROW_HEIGHT : _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, fixedColumnsCount = contextProps.fixedColumnsCount, resizingColumnKey = contextProps.resizingColumnKey, moveResizing = contextProps.moveResizing, endResizing = contextProps.endResizing;
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
         refresh: refresh !== null && refresh !== void 0 ? refresh : (function () { }),
         setSelectedKeys: setSelectedKeys,
-        addRows: addRows,
-    }); }, [addRows, refresh, setSelectedKeys]);
-    var hasFooter = footerFunctions && Object.values(footerFunctions).length > 0;
+    }); }, [refresh, setSelectedKeys]);
+    var hasFooter = Object.values(columns).some(function (col) { return col.footer; });
     var fixedColumnWidths = (0, react_1.useMemo)(function () { return __spreadArray(__spreadArray([], (selectable ? [constants_1.SELECTION_CELL_WIDTH] : []), true), Object.values(columns)
         .slice(0, fixedColumnsCount !== null && fixedColumnsCount !== void 0 ? fixedColumnsCount : 0)
         .map(function (col) { var _a; return (_a = col.width) !== null && _a !== void 0 ? _a : constants_1.DEFAULT_COLUMN_WIDTH; }), true); }, [columns, fixedColumnsCount, selectable]);
-    var itemProps = (0, react_1.useMemo)(function () { return ({ context: DataGridContext }); }, [DataGridContext]);
     var rowTemplate = DataGridRowTemplate_1.DataGridRowTemplate;
-    return ((0, jsx_runtime_1.jsx)(DataGridContext.Provider, { value: contextProps, children: (0, jsx_runtime_1.jsxs)(styles.DataGridWrapper, __assign({}, spaceProps, { children: [(0, jsx_runtime_1.jsx)(DataGridToolbar_1.DataGridToolbar, { context: DataGridContext }), (0, jsx_runtime_1.jsxs)(styles.DataGridContainer, { ref: scrollableRef, "$headerRowHeight": headerRowHeight, "$rowHeight": rowHeight, "$rowsCount": contextProps.sortedRows.length, "$withFooter": hasFooter, className: className, "$fixedColumnWidths": fixedColumnWidths, children: [resizingColumnKey && ((0, jsx_runtime_1.jsx)(styles.ResizeBackdrop, { onMouseMove: moveResizing, onMouseUp: endResizing })), (0, jsx_runtime_1.jsx)(DataGridHeader_1.DataGridHeader, { context: DataGridContext }), (0, jsx_runtime_1.jsx)(VirtualScroller_1.VirtualScroller, { integrated: true, gridTemplateColumns: gridTemplateColumns, items: sortedRows, itemTemplate: rowTemplate, itemProps: itemProps, rowHeightInPx: rowHeight, onRangeChanged: onVisibleRowsChange }), hasFooter && (0, jsx_runtime_1.jsx)(DataGridFooter_1.DataGridFooter, { context: DataGridContext })] })] })) }));
+    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, "$fixedColumnWidths": fixedColumnWidths, children: [resizingColumnKey && ((0, jsx_runtime_1.jsx)(styles.ResizeBackdrop, { onMouseMove: moveResizing, onMouseUp: endResizing })), (0, jsx_runtime_1.jsx)(DataGridHeader_1.DataGridHeader, { context: DataGridContext }), (0, jsx_runtime_1.jsx)(VirtualScroller_1.VirtualScroller, { integrated: true, gridTemplateColumns: gridTemplateColumns, items: sortedRows, itemTemplate: rowTemplate, itemProps: { context: DataGridContext }, rowHeightInPx: rowHeight, onRangeChanged: onVisibleRowsChange }), hasFooter && (0, jsx_runtime_1.jsx)(DataGridFooter_1.DataGridFooter, { context: DataGridContext })] }) }));
 };
-exports.DataGrid = DataGrid;
+exports.DataGridInner = DataGridInner;
+exports.DataGrid = (0, react_1.forwardRef)(exports.DataGridInner);

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

@@ -1,14 +1,11 @@
-import { SpaceProps } from '../../../helpers/styled/space';
 import { DataGridCellFCProps } from './types';
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
-export declare const DataGridWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SpaceProps>> & string;
 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;
-    $hasFilterOpened?: boolean;
 };
 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 DataGridHeaderTextContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
@@ -16,7 +13,6 @@ export declare const dataGridCellCss: import("styled-components").RuleSet<DataGr
 export declare const DataGridCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DataGridCellFCProps>> & string;
 export declare const DataGridHeaderTitle: 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 DataGridToolsRowHeaderContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const DataGridToolsRowButtonsContainer: 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;
@@ -31,14 +27,26 @@ type DataGridHeaderOrFooterRowProps = {
     $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>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, 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>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, DataGridHeaderOrFooterRowProps>, never>> & 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;
 type DataGridRowProps = {
     $edited?: boolean;
 };
 export declare const DataGridRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, DataGridRowProps>> & string;
-export declare const LoadingCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DataGridCellFCProps> & DataGridCellFCProps, never>> & string;
-export declare const SelectionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DataGridCellFCProps> & DataGridCellFCProps, never>> & string;
-export declare const HeaderSelectionCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof DataGridHeaderCellContainerProps> & DataGridHeaderCellContainerProps, 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>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, 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>, keyof DataGridCellFCProps> & DataGridCellFCProps, "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>, keyof DataGridCellFCProps> & DataGridCellFCProps, "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 {};