@addev-be/ui 0.7.0 → 0.7.1

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

@@ -11,11 +11,11 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sqlColorColumn = exports.sqlCheckboxColumn = exports.sqlPercentageColumn = exports.sqlMoneyColumn = exports.sqlNumberColumn = exports.sqlMonthColumn = exports.sqlDateColumn = exports.sqlPhoneColumn = exports.sqlMailColumn = exports.sqlComposedColumn = exports.sqlTextColumn = void 0;
+exports.sqlColorColumn = exports.sqlCheckboxColumn = exports.sqlPercentageColumn = exports.sqlMoneyColumn = exports.sqlNumberColumn = exports.sqlMonthColumn = exports.sqlDateTimeColumn = exports.sqlDateColumn = exports.sqlPhoneColumn = exports.sqlMailColumn = exports.sqlComposedColumn = exports.sqlTextColumn = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
-var numbers_1 = require("../../../../helpers/numbers");
 var helpers_1 = require("../../DataGrid/helpers");
 var dates_1 = require("../../../../helpers/dates");
+var numbers_1 = require("../../../../helpers/numbers");
 var sqlTextColumn = function (key, title, options) {
     var _a;
     return (_a = {},
@@ -58,10 +58,17 @@ exports.sqlPhoneColumn = sqlPhoneColumn;
 var sqlDateColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { return (0, dates_1.formatDate)(row[key]); }, 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, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
+        _a[key] = __assign({ name: title, type: 'date', render: function (row) { return (0, dates_1.formatDate)(row[key]); }, 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 : ''; }, excelFormatter: function () { return 'dd/mm/yyyy'; }, excelValue: function (value) { return (0, dates_1.formatDate)(value, 'YYYY-MM-DD'); }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; }, formatter: function (value) { return (0, dates_1.formatDate)(value); }, renderer: function (value) { return (0, dates_1.formatDate)(value); } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
         _a);
 };
 exports.sqlDateColumn = sqlDateColumn;
+var sqlDateTimeColumn = function (key, title, options) {
+    var _a;
+    return (_a = {},
+        _a[key] = __assign({ name: title, type: 'date', render: function (row) { return (0, dates_1.formatDateTime)(row[key]); }, 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 : ''; }, excelFormatter: function () { return 'dd/mm/yyyy hh:mm:ss'; }, excelValue: function (value) { return (0, dates_1.formatDateTime)(value, 'YYYY-MM-DD HH:mm:ss'); }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; }, formatter: function (value) { return (0, dates_1.formatDateTime)(value); }, renderer: function (value) { return (0, dates_1.formatDateTime)(value); } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
+        _a);
+};
+exports.sqlDateTimeColumn = sqlDateTimeColumn;
 var sqlMonthColumn = function (key, title, options) {
     var _a;
     return (_a = {},
@@ -73,7 +80,7 @@ var sqlNumberColumn = function (key, title, decimals, options) {
     var _a;
     if (decimals === void 0) { decimals = 2; }
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatNumber)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#'; }, 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, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; }, renderer: function (value) { var _a; return (_a = (0, numbers_1.formatNumber)(value, decimals)) !== null && _a !== void 0 ? _a : ''; } }), footer: {
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatNumber)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return (0, helpers_1.buildExcelFormat)(decimals); }, excelValue: 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, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; }, renderer: function (value) { var _a; return (_a = (0, numbers_1.formatNumber)(value, decimals)) !== null && _a !== void 0 ? _a : ''; } }), footer: {
                 sum: null,
                 avg: null,
                 count: null,
@@ -87,7 +94,7 @@ var sqlMoneyColumn = function (key, title, decimals, options) {
     var _a;
     if (decimals === void 0) { decimals = 2; }
     return (_a = {},
-        _a[key] = __assign({ name: title, type: 'number', render: function (row) { var _a; return (_a = (0, numbers_1.formatMoney)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#0.00'; }, 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, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; }, renderer: function (value) { var _a; return (_a = (0, numbers_1.formatMoney)(value, decimals)) !== null && _a !== void 0 ? _a : ''; } }), footer: {
+        _a[key] = __assign({ name: title, type: 'number', render: function (row) { var _a; return (_a = (0, numbers_1.formatMoney)(row[key], decimals)) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return (0, helpers_1.buildExcelFormat)(decimals, ' €'); }, excelValue: 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, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; }, renderer: function (value) { var _a; return (_a = (0, numbers_1.formatMoney)(value, decimals)) !== null && _a !== void 0 ? _a : ''; } }), footer: {
                 sum: null,
                 avg: null,
                 count: null,
@@ -101,21 +108,25 @@ var sqlPercentageColumn = function (key, title, decimals, options) {
     var _a;
     if (decimals === void 0) { decimals = 2; }
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatPercentage)(row[key])) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return '#0.00'; }, 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, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; }, renderer: function (value) { var _a; return (_a = (0, numbers_1.formatPercentage)(value, decimals)) !== null && _a !== void 0 ? _a : ''; } }) }, options),
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, numbers_1.formatPercentage)(row[key])) !== null && _a !== void 0 ? _a : ''; }, excelFormatter: function () { return (0, helpers_1.buildExcelFormat)(decimals, '%'); }, excelValue: 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, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; }, renderer: function (value) { var _a; return (_a = (0, numbers_1.formatPercentage)(value, decimals)) !== null && _a !== void 0 ? _a : ''; } }) }, options),
         _a);
 };
 exports.sqlPercentageColumn = sqlPercentageColumn;
 var sqlCheckboxColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ 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] }), (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: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : 0; } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
+        _a[key] = __assign({ name: title, render: function (row) {
+                var _a;
+                var value = !!+((_a = row[key]) !== null && _a !== void 0 ? _a : 0);
+                return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: value, readOnly: true }), (0, jsx_runtime_1.jsx)("span", { children: value ? ' 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: __assign(__assign({}, (0, helpers_1.numberFilter)(key)), { getter: function (value) { var _a; return +((_a = value[key]) !== null && _a !== void 0 ? _a : 0); } }), footer: function (rows) { return "".concat(rows[0][key], " \u00E9l\u00E9ments"); } }, options),
         _a);
 };
 exports.sqlCheckboxColumn = sqlCheckboxColumn;
 var sqlColorColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (row) { return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', inset: 0, backgroundColor: row[key] }, children: "\u00A0" })); }, 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, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; }, renderer: function (value) { return ((0, jsx_runtime_1.jsx)("div", { style: {
+        _a[key] = __assign({ name: title, render: function (row) { return ((0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', inset: 0, backgroundColor: row[key] }, children: "\u00A0" })); }, excelValue: function () { return ''; }, excelBackgroundColor: function (value) { return 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 : ''; }, filter: __assign(__assign({}, (0, helpers_1.textFilter)(key)), { getter: function (value) { var _a; return (_a = value[key]) !== null && _a !== void 0 ? _a : ''; }, renderer: function (value) { return ((0, jsx_runtime_1.jsx)("div", { style: {
                         backgroundColor: value,
                         width: 'var(--space-16)',
                         height: '1em',

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

@@ -1,2 +1,13 @@
+import { ConditionDTO, OrderByDTO, SqlRequestRow } from '../../../services/sqlRequests';
+import { DataGridRefProps } from '../DataGrid/types';
+import { ForwardedRef } from 'react';
 import { SqlRequestDataGridProps } from './types';
-export declare const SqlRequestDataGrid: <R>({ onSelectionChange: onSelectionChangeFromProps, ...props }: SqlRequestDataGridProps<R>) => import("react/jsx-runtime").JSX.Element;
+export declare const SqlRequestDataGridInner: <R>({ onSelectionChange: onSelectionChangeFromProps, ...props }: SqlRequestDataGridProps<R>, ref: ForwardedRef<DataGridRefProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const SqlRequestDataGrid: <R>(props: Omit<import("../DataGrid/types").DataGridProps<R>, "rows" | "columns"> & {
+    columns: import("./types").SqlRequestDataGridColumns<R>;
+    hiddenColumns?: string[];
+    type: string;
+    orderBy?: OrderByDTO[];
+    conditions?: ConditionDTO[];
+    parser?: ((row: SqlRequestRow<R>) => R) | undefined;
+} & import("react").RefAttributes<DataGridRefProps>) => import("react").JSX.Element | null;

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

@@ -54,23 +54,24 @@ 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.SqlRequestDataGrid = void 0;
+exports.SqlRequestDataGrid = exports.SqlRequestDataGridInner = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var sqlRequests_1 = require("../../../services/sqlRequests");
-var lodash_1 = __importStar(require("lodash"));
 var react_1 = require("react");
+var lodash_1 = __importStar(require("lodash"));
 var DataGrid_1 = require("../DataGrid");
 var helpers_1 = require("./helpers");
 var helpers_2 = require("../DataGrid/helpers");
-var SqlRequestDataGrid = function (_a) {
+var SqlRequestDataGridInner = function (_a, ref) {
     var _b, _c;
     var onSelectionChangeFromProps = _a.onSelectionChange, props = __rest(_a, ["onSelectionChange"]);
     var currentRows = (0, react_1.useRef)([]);
     var _d = (0, react_1.useState)([]), rows = _d[0], setRows = _d[1];
     var _e = (0, react_1.useState)(0), start = _e[0], setStart = _e[1];
     var _f = (0, react_1.useState)(50), length = _f[0], setLength = _f[1];
-    var _g = (0, react_1.useState)(-1), total = _g[0], setTotal = _g[1];
+    var _g = (0, react_1.useState)(-1), count = _g[0], setCount = _g[1];
     var _h = (0, sqlRequests_1.useSqlRequestHandler)(props.type), sqlRequest = _h[0], sqlIdRequest = _h[1], sqlPartialRequest = _h[2];
+    var gridRef = (0, react_1.useRef)(null);
     var _j = (0, react_1.useState)({}), conditions = _j[0], setConditions = _j[1];
     var _k = (0, react_1.useState)(Object.entries((_b = props.initialSorts) !== null && _b !== void 0 ? _b : {}).map(function (_a) {
         var _b, _c, _d;
@@ -91,19 +92,19 @@ var SqlRequestDataGrid = function (_a) {
         ];
     }, [props.columns, props.hiddenColumns]), columnsKeys = _l[0], visibleColumnsKeys = _l[1];
     var columnTypes = (0, react_1.useMemo)(function () {
-        return visibleColumnsKeys.map(function (key) { var _a; return String((_a = props.columns[key].type) !== null && _a !== void 0 ? _a : 'text'); });
+        return visibleColumnsKeys.map(function (key) { var _a, _b; return String((_b = (_a = props.columns[key]) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : 'text'); });
     }, [visibleColumnsKeys, props.columns]);
     var refresh = (0, react_1.useCallback)(function () {
         setRows([]);
         setStart(0);
         setLength(50);
-        setTotal(-1);
+        setCount(-1);
     }, []);
     var onFiltersChanged = (0, react_1.useCallback)(function (filters) {
         var newConditions = (0, helpers_1.convertSqlFiltersToConditions)(filters);
-        setTotal(-1);
         setConditions(newConditions);
-    }, []);
+        refresh();
+    }, [refresh]);
     var onSortsChanged = (0, react_1.useCallback)(function (sorts) {
         refresh();
         var newOrderBy = Object.entries(sorts).map(function (_a) {
@@ -115,12 +116,12 @@ var SqlRequestDataGrid = function (_a) {
         });
         setOrderBy(newOrderBy);
     }, [refresh]);
-    var loadRows = (0, react_1.useRef)((0, lodash_1.debounce)(function (columns, returnColumns, conditions, orderBy, start, length, getTotal) {
+    var loadRows = (0, react_1.useRef)((0, lodash_1.debounce)(function (columns, returnColumns, conditions, orderBy, start, length, getCount) {
         if (conditions === void 0) { conditions = []; }
         if (orderBy === void 0) { orderBy = []; }
         if (start === void 0) { start = 0; }
         if (length === void 0) { length = 100; }
-        if (getTotal === void 0) { getTotal = false; }
+        if (getCount === void 0) { getCount = false; }
         sqlRequest({
             columns: columns.includes('Id') ? columns : __spreadArray(__spreadArray([], columns, true), ['Id'], false),
             returnColumns: returnColumns.includes('Id')
@@ -133,14 +134,14 @@ var SqlRequestDataGrid = function (_a) {
             orderBy: orderBy,
             start: start,
             length: length,
-            getTotal: getTotal,
+            getCount: getCount,
         }).then(function (response) {
             var _a;
             var _b;
-            if (getTotal) {
+            if (getCount) {
                 currentRows.current = Array(response.count).fill(null);
-                if (getTotal)
-                    setTotal((_b = response.count) !== null && _b !== void 0 ? _b : 0);
+                if (getCount)
+                    setCount((_b = response.count) !== null && _b !== void 0 ? _b : 0);
             }
             var parsedRows = props.parser
                 ? response.data.map(props.parser)
@@ -158,7 +159,7 @@ var SqlRequestDataGrid = function (_a) {
             columns: columnsKeys,
             returnColumns: [columnKey],
             columnTypes: [(_a = props.columns[columnKey].type) !== null && _a !== void 0 ? _a : 'text'],
-            conditions: __spreadArray(__spreadArray([], ((_b = props.conditions) !== null && _b !== void 0 ? _b : []), true), Object.values(lodash_1.default.pickBy(conditions, function (condition, key) { return key !== columnKey; })), true).filter(function (condition) { return condition.field !== columnKey; }),
+            conditions: __spreadArray(__spreadArray([], ((_b = props.conditions) !== null && _b !== void 0 ? _b : []), true), Object.values(lodash_1.default.pickBy(conditions, function (_, key) { return key !== columnKey; })), true).filter(function (condition) { return condition.field !== columnKey; }),
             orderBy: [
                 {
                     field: (_g = (_e = (_c = props.columns[columnKey].filterField) !== null && _c !== void 0 ? _c : (_d = props.columns[columnKey].field) === null || _d === void 0 ? void 0 : _d.fieldAlias) !== null && _e !== void 0 ? _e : (_f = props.columns[columnKey].field) === null || _f === void 0 ? void 0 : _f.fieldName) !== null && _g !== void 0 ? _g : columnKey,
@@ -166,7 +167,7 @@ var SqlRequestDataGrid = function (_a) {
                     direction: 'ASC',
                 },
             ],
-            getTotal: false,
+            getCount: false,
             unique: true,
         }).then(function (response) {
             return response.data.map(function (row) { var _a, _b, _c; return (_c = (_b = (_a = props.columns[columnKey].filter) === null || _a === void 0 ? void 0 : _a.getter) === null || _b === void 0 ? void 0 : _b.call(_a, row)) !== null && _c !== void 0 ? _c : null; });
@@ -174,17 +175,21 @@ var SqlRequestDataGrid = function (_a) {
     }, [columnsKeys, conditions, props.columns, props.conditions, sqlRequest]);
     (0, react_1.useEffect)(function () {
         var _a, _b;
-        return loadRows.current(columnsKeys, visibleColumnsKeys, __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true), orderBy, start, length, total < 0);
+        if (!rows.length ||
+            rows.slice(start, start + length).some(function (row) { return row === null; })) {
+            loadRows.current(columnsKeys, visibleColumnsKeys, __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true), orderBy, start, length, count < 0);
+        }
     }, [
         props.columns,
         conditions,
         orderBy,
         start,
         length,
-        total,
+        count,
         props.conditions,
         columnsKeys,
         visibleColumnsKeys,
+        rows,
     ]);
     var loadCopyRows = (0, react_1.useCallback)(function () {
         var _a, _b;
@@ -195,7 +200,7 @@ var SqlRequestDataGrid = function (_a) {
             conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true),
             orderBy: orderBy,
             start: 0,
-            length: total,
+            length: count,
         }).then(function (response) {
             return props.parser ? response.data.map(props.parser) : response.data;
         });
@@ -208,7 +213,7 @@ var SqlRequestDataGrid = function (_a) {
         props.parser,
         conditions,
         orderBy,
-        total,
+        count,
     ]);
     var loadAllIds = (0, react_1.useCallback)(function () {
         var _a, _b;
@@ -221,9 +226,9 @@ var SqlRequestDataGrid = function (_a) {
             conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true),
             orderBy: orderBy,
             start: 0,
-            length: total,
+            length: count,
         }).then(function (response) { return response.data.map(function (row) { return row['Id']; }); });
-    }, [columnsKeys, conditions, orderBy, props.conditions, sqlIdRequest, total]);
+    }, [columnsKeys, conditions, orderBy, props.conditions, sqlIdRequest, count]);
     var onVisibleRowsChanged = (0, react_1.useCallback)(function (newStart, newLength) {
         if (newStart !== start || newLength !== length) {
             setStart(newStart);
@@ -291,6 +296,14 @@ var SqlRequestDataGrid = function (_a) {
         setFooters: setFooters,
         footerFunctions: footerFunctions,
     }); }, [footers, setFooters, footerFunctions]);
-    return ((0, jsx_runtime_1.jsx)(DataGrid_1.DataGrid, __assign({ onVisibleRowsChange: onVisibleRowsChanged, filter: false, sort: false, onFiltersChanged: onFiltersChanged, onSortsChanged: onSortsChanged, filterValuesLoader: loadFilterValues, rows: rows, loadCopyRows: loadCopyRows, refresh: refresh, onSelectionChange: onSelectionChange, getAllIds: loadAllIds, contextOverride: contextOverride }, props)));
+    (0, react_1.useImperativeHandle)(ref, function () {
+        var _a, _b;
+        return ({
+            refresh: refresh,
+            setSelectedKeys: (_b = (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.setSelectedKeys) !== null && _b !== void 0 ? _b : (function () { }),
+        });
+    }, [refresh]);
+    return ((0, jsx_runtime_1.jsx)(DataGrid_1.DataGrid, __assign({ ref: gridRef, onVisibleRowsChange: onVisibleRowsChanged, filter: false, sort: false, onFiltersChanged: onFiltersChanged, onSortsChanged: onSortsChanged, filterValuesLoader: loadFilterValues, rows: rows, loadCopyRows: loadCopyRows, refresh: refresh, onSelectionChange: onSelectionChange, getAllIds: loadAllIds, contextOverride: contextOverride }, props)));
 };
-exports.SqlRequestDataGrid = SqlRequestDataGrid;
+exports.SqlRequestDataGridInner = SqlRequestDataGridInner;
+exports.SqlRequestDataGrid = (0, react_1.forwardRef)(exports.SqlRequestDataGridInner);

package/dist/components/data/SqlRequestGrid/helpers/index.d.ts

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

package/dist/components/data/SqlRequestGrid/helpers/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./sqlRequests"), exports);

package/dist/components/data/SqlRequestGrid/helpers/sqlRequests.d.ts

@@ -0,0 +1,3 @@
+import { ConditionDTO } from '../../../../services/sqlRequests';
+import { SqlRequestDataGridFilters } from '../../SqlRequestDataGrid/types';
+export declare const convertSqlFiltersToConditions: (filters: SqlRequestDataGridFilters) => Record<string, ConditionDTO>;

package/dist/components/data/SqlRequestGrid/helpers/sqlRequests.js

@@ -0,0 +1,18 @@
+"use strict";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertSqlFiltersToConditions = void 0;
+var lodash_1 = __importDefault(require("lodash"));
+var convertSqlFiltersToConditions = function (filters) {
+    return lodash_1.default.mapValues(filters, function (filter, columnKey) { return ({
+        field: columnKey,
+        operator: filter.operator,
+        value: ['inArray', 'inRange'].includes(filter.operator)
+            ? filter.values
+            : lodash_1.default.castArray(filter.values)[0],
+    }); });
+};
+exports.convertSqlFiltersToConditions = convertSqlFiltersToConditions;

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

@@ -0,0 +1,4 @@
+import { ForwardedRef } from 'react';
+import { SqlRequestGridProps, SqlRequestGridRefProps } from './types';
+export declare const SqlRequestGridInner: <R, P extends object = {}>({ rowHeight, itemsPerRow, itemTemplate, itemProps, gap, ...props }: SqlRequestGridProps<R, P>, ref: ForwardedRef<SqlRequestGridRefProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const SqlRequestGrid: <R, P extends object = {}>(props: SqlRequestGridProps<R, P> & import("react").RefAttributes<SqlRequestGridRefProps>) => import("react").JSX.Element | null;

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

@@ -0,0 +1,145 @@
+"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;
+};
+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.SqlRequestGrid = exports.SqlRequestGridInner = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles = __importStar(require("./styles"));
+var sqlRequests_1 = require("../../../services/sqlRequests");
+var react_1 = require("react");
+var VirtualScroller_1 = require("../VirtualScroller");
+var lodash_1 = require("lodash");
+var helpers_1 = require("../DataGrid/helpers");
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+var SqlRequestGridInner = function (_a, ref) {
+    var _b = _a.rowHeight, rowHeight = _b === void 0 ? styles.DEFAULT_ROW_HEIGHT : _b, itemsPerRow = _a.itemsPerRow, itemTemplate = _a.itemTemplate, itemProps = _a.itemProps, gap = _a.gap, props = __rest(_a, ["rowHeight", "itemsPerRow", "itemTemplate", "itemProps", "gap"]);
+    var currentRows = (0, react_1.useRef)([]);
+    var _c = (0, react_1.useState)([]), rows = _c[0], setRows = _c[1];
+    var _d = (0, react_1.useState)(0), start = _d[0], setStart = _d[1];
+    var _e = (0, react_1.useState)(50), length = _e[0], setLength = _e[1];
+    var _f = (0, react_1.useState)(-1), count = _f[0], setCount = _f[1];
+    var sqlRequest = (0, sqlRequests_1.useSqlRequestHandler)(props.type)[0];
+    var _g = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        return [
+            __spreadArray(__spreadArray([], Object.keys(props.fields), true), ((_a = props.additionalFields) !== null && _a !== void 0 ? _a : []), true),
+            __spreadArray(__spreadArray([], Object.keys(props.fields).filter(function (key) {
+                return (0, helpers_1.isColumnVisible)(props.fields[key]);
+            }), true), ((_b = props.additionalFields) !== null && _b !== void 0 ? _b : []), true),
+        ];
+    }, [props.fields, props.additionalFields]), columnsKeys = _g[0], visibleColumnsKeys = _g[1];
+    var columnTypes = (0, react_1.useMemo)(function () {
+        return visibleColumnsKeys.map(function (key) { var _a, _b; return String((_b = (_a = props.fields[key]) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : 'text'); });
+    }, [visibleColumnsKeys, props.fields]);
+    var loadRows = (0, react_1.useRef)((0, lodash_1.debounce)(function (columns, returnColumns, conditions, orderBy, start, length, getCount) {
+        if (conditions === void 0) { conditions = []; }
+        if (orderBy === void 0) { orderBy = []; }
+        if (start === void 0) { start = 0; }
+        if (length === void 0) { length = 100; }
+        if (getCount === void 0) { getCount = false; }
+        sqlRequest({
+            columns: columns.includes('Id') ? columns : __spreadArray(__spreadArray([], columns, true), ['Id'], false),
+            returnColumns: returnColumns.includes('Id')
+                ? returnColumns
+                : __spreadArray(__spreadArray([], returnColumns, true), ['Id'], false),
+            columnTypes: columnTypes.includes('Id')
+                ? columnTypes
+                : __spreadArray(__spreadArray([], columnTypes, true), ['Id'], false),
+            conditions: conditions,
+            orderBy: orderBy,
+            start: start,
+            length: length,
+            getCount: getCount,
+        }).then(function (response) {
+            var _a;
+            var _b;
+            if (getCount) {
+                currentRows.current = Array(response.count).fill(null);
+                if (getCount)
+                    setCount((_b = response.count) !== null && _b !== void 0 ? _b : 0);
+            }
+            var parsedRows = props.parser
+                ? response.data.map(props.parser)
+                : response.data;
+            (_a = currentRows.current).splice.apply(_a, __spreadArray([start, length], parsedRows, false));
+            setRows(__spreadArray([], currentRows.current, true));
+        });
+    }, 100, {
+        leading: true,
+        trailing: true,
+    }));
+    (0, react_1.useEffect)(function () {
+        if (!rows.length ||
+            rows.slice(start, start + length).some(function (row) { return row === null; })) {
+            loadRows.current(columnsKeys, visibleColumnsKeys, [], [], start, length, count < 0);
+        }
+    }, [
+        props.fields,
+        start,
+        length,
+        count,
+        props.conditions,
+        columnsKeys,
+        visibleColumnsKeys,
+        rows,
+    ]);
+    var onVisibleRowsChanged = (0, react_1.useCallback)(function (newStart, newLength) {
+        if (newStart !== start || newLength !== length) {
+            setStart(newStart);
+            setLength(newLength);
+        }
+    }, [length, start]);
+    var refresh = (0, react_1.useCallback)(function () {
+        setRows([]);
+        setStart(0);
+        setLength(50);
+        setCount(-1);
+    }, []);
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
+        refresh: refresh,
+    }); }, [refresh]);
+    return ((0, jsx_runtime_1.jsx)(styles.SqlRequestGridContainer, { children: (0, jsx_runtime_1.jsx)(VirtualScroller_1.VirtualScroller, { gridTemplateColumns: "repeat(".concat(itemsPerRow, ", 1fr)"), items: rows, itemTemplate: itemTemplate, itemsPerRow: itemsPerRow, itemProps: itemProps, rowHeightInPx: rowHeight, onRangeChanged: onVisibleRowsChanged, gap: gap }) }));
+};
+exports.SqlRequestGridInner = SqlRequestGridInner;
+exports.SqlRequestGrid = (0, react_1.forwardRef)(exports.SqlRequestGridInner);

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

@@ -0,0 +1,16 @@
+export declare const DEFAULT_ROW_HEIGHT = 200;
+export declare const SqlRequestGridContainer: 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 declare const TopPaddingRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BottomPaddingRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VirtualScrollerContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $height: number;
+}>> & string;
+export declare const VirtualScrollerRowsContainer: 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;
+}>, {
+    $gridTemplateColumns: string;
+    $topPadding: number;
+    $rowHeight?: number;
+}>, never>> & string;

package/dist/components/data/SqlRequestGrid/styles.js

@@ -0,0 +1,33 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VirtualScrollerRowsContainer = exports.VirtualScrollerContainer = exports.BottomPaddingRow = exports.TopPaddingRow = exports.SqlRequestGridContainer = exports.DEFAULT_ROW_HEIGHT = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.DEFAULT_ROW_HEIGHT = 200;
+exports.SqlRequestGridContainer = styled_components_1.default.div.attrs({
+    className: 'SqlRequestGridContainer',
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n"], ["\n  height: 100%;\n  width: 100%;\n  overflow: auto;\n"])));
+exports.TopPaddingRow = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+exports.BottomPaddingRow = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
+exports.VirtualScrollerContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  overflow: visible;\n  height: ", ";\n"], ["\n  position: relative;\n  overflow: visible;\n  height: ", ";\n"])), function (_a) {
+    var $height = _a.$height;
+    return "".concat($height, "px");
+});
+exports.VirtualScrollerRowsContainer = styled_components_1.default.div.attrs(function (_a) {
+    var $gridTemplateColumns = _a.$gridTemplateColumns, $topPadding = _a.$topPadding, _b = _a.$rowHeight, $rowHeight = _b === void 0 ? exports.DEFAULT_ROW_HEIGHT : _b;
+    var rowHeightValue = "".concat($rowHeight, "px");
+    return {
+        style: {
+            top: "".concat($topPadding, "px"),
+            gridTemplateColumns: $gridTemplateColumns,
+            gridAutoRows: rowHeightValue,
+        },
+    };
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: grid;\n  position: absolute;\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 1;\n  }\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: -1;\n  }\n"], ["\n  display: grid;\n  position: absolute;\n\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: 1;\n  }\n  ", " {\n    grid-column-start: 1;\n    grid-column-end: -1;\n    grid-row: -1;\n  }\n"])), exports.TopPaddingRow, exports.BottomPaddingRow);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/data/SqlRequestGrid/types.d.ts

@@ -0,0 +1,30 @@
+import { ConditionDTO, FieldDTO, OrderByDTO, SqlRequestRow } from '../../../services/sqlRequests';
+import { DataGridColumn, DataGridFilter, DataGridFilterType } from '../DataGrid/types';
+import { VirtualScrollerTemplateFC } from '../VirtualScroller/types';
+export type SqlRequestGridFilter<T extends DataGridFilterType = DataGridFilterType> = DataGridFilter<T> & {
+    field?: FieldDTO;
+};
+export type SqlRequestGridFilters = Record<string, SqlRequestGridFilter>;
+export type SqlRequestGridColumn<R> = DataGridColumn<R> & {
+    filter?: SqlRequestGridFilter;
+    field?: FieldDTO;
+    filterField?: string;
+    sortField?: string;
+};
+export type SqlRequestGridColumns<R> = Record<string, SqlRequestGridColumn<R>>;
+export type SqlRequestGridProps<R, P extends object = {}> = {
+    itemTemplate: VirtualScrollerTemplateFC<R, P>;
+    itemsPerRow?: number;
+    rowHeight?: number;
+    gap?: string;
+    fields: SqlRequestGridColumns<R>;
+    additionalFields?: string[];
+    type: string;
+    orderBy?: OrderByDTO[];
+    conditions?: ConditionDTO[];
+    parser?: (row: SqlRequestRow<R>) => R;
+    itemProps: P;
+};
+export type SqlRequestGridRefProps = {
+    refresh: () => void;
+};

package/dist/components/data/SqlRequestGrid/types.js

@@ -0,0 +1,3 @@
+"use strict";
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/data/VirtualScroller/hooks.d.ts

@@ -0,0 +1,18 @@
+export declare const VIRTUAL_SCROLL_TOLERANCE = 20;
+type VirtualScrollingProps<R> = {
+    scrollableElement: HTMLElement | null;
+    rowHeightInPx: number;
+    items: R[];
+    itemsPerRow?: number;
+    tolerance?: number;
+};
+export declare const useVirtualScrolling: <R>({ scrollableElement, rowHeightInPx, items, itemsPerRow, tolerance, }: VirtualScrollingProps<R>) => {
+    index: number;
+    length: number;
+    indexWithTolerance: number;
+    lengthWithTolerance: number;
+    visibleItems: R[];
+    totalHeight: number;
+    topPadding: number;
+};
+export {};