@addev-be/ui 0.16.3 → 0.16.7

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

@@ -67,8 +67,13 @@ var SqlRequestDataGridInner = function (_a, ref) {
     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 setRowsRef = (0, react_1.useCallback)(function (value) {
+        var newRows = typeof value === 'function' ? value(currentRows.current) : value;
+        currentRows.current = newRows;
+        setRows(newRows);
+    }, []);
     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 _f = (0, react_1.useState)(-1), length = _f[0], setLength = _f[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);
@@ -76,30 +81,31 @@ var SqlRequestDataGridInner = function (_a, ref) {
     var _k = (0, react_1.useState)(Object.entries((_b = props.initialSorts) !== null && _b !== void 0 ? _b : {}).map(function (_a) {
         var _b, _c, _d;
         var columnKey = _a[0], direction = _a[1];
-        return ({
-            field: (_c = (_b = props.columns[columnKey].field) === null || _b === void 0 ? void 0 : _b.fieldAlias) !== null && _c !== void 0 ? _c : columnKey,
-            type: (_d = props.columns[columnKey].type) !== null && _d !== void 0 ? _d : 'text',
+        var column = props.columns.find(function (col) { return col.key === columnKey; });
+        return {
+            field: (_c = (_b = column === null || column === void 0 ? void 0 : column.field) === null || _b === void 0 ? void 0 : _b.fieldAlias) !== null && _c !== void 0 ? _c : columnKey,
+            type: (_d = column === null || column === void 0 ? void 0 : column.type) !== null && _d !== void 0 ? _d : 'text',
             direction: direction.toUpperCase(),
-        });
+        };
     })), orderBy = _k[0], setOrderBy = _k[1];
     var _l = (0, react_1.useMemo)(function () {
         var _a, _b;
         return [
-            __spreadArray(__spreadArray([], Object.keys(props.columns), true), ((_a = props.hiddenColumns) !== null && _a !== void 0 ? _a : []), true),
-            __spreadArray(__spreadArray([], Object.keys(props.columns).filter(function (key) {
-                return (0, helpers_2.isColumnVisible)(props.columns[key]);
-            }), true), ((_b = props.hiddenColumns) !== null && _b !== void 0 ? _b : []), true),
+            __spreadArray(__spreadArray([], props.columns.filter(function (col) { return !col.ignore; }).map(function (col) { return col.key; }), true), ((_a = props.hiddenColumns) !== null && _a !== void 0 ? _a : []), true),
+            __spreadArray(__spreadArray([], props.columns
+                .filter(function (col) { return !col.ignore; })
+                .filter(helpers_2.isColumnVisible)
+                .map(function (col) { return col.key; }), true), ((_b = props.hiddenColumns) !== null && _b !== void 0 ? _b : []), true),
         ];
-    }, [props.columns, props.hiddenColumns]), columnsKeys = _l[0], visibleColumnsKeys = _l[1];
+    }, [props.columns, props.hiddenColumns]), columns = _l[0], visibleColumnsKeys = _l[1];
     var columnTypes = (0, react_1.useMemo)(function () {
-        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'); });
+        return visibleColumnsKeys.map(function (key) { var _a, _b; return String((_b = (_a = props.columns.find(function (col) { return col.key === 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([]);
+        setRowsRef([]);
         setStart(0);
-        setLength(50);
         setCount(-1);
-    }, []);
+    }, [setRowsRef]);
     var onFiltersChanged = (0, react_1.useCallback)(function (filters) {
         var newConditions = (0, helpers_1.convertSqlFiltersToConditions)(filters);
         setConditions(newConditions);
@@ -120,64 +126,74 @@ var SqlRequestDataGridInner = function (_a, ref) {
         if (conditions === void 0) { conditions = []; }
         if (orderBy === void 0) { orderBy = []; }
         if (start === void 0) { start = 0; }
-        if (length === void 0) { length = 100; }
+        if (length === void 0) { length = 0; }
         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));
-        });
+        if (length > 0) {
+            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, _c;
+                if (getCount) {
+                    currentRows.current = Array(response.count).fill(null);
+                    if (getCount)
+                        setCount((_b = response.count) !== null && _b !== void 0 ? _b : 0);
+                }
+                var data = (_c = response.data) !== null && _c !== void 0 ? _c : [];
+                var rowsFromData = props.parser
+                    ? data.map(props.parser)
+                    : data;
+                var rowsToReplace = currentRows.current
+                    .slice(start, start + length)
+                    .map(function (row, i) { return (!row ? rowsFromData[i] : row); });
+                (_a = currentRows.current).splice.apply(_a, __spreadArray([start, length], rowsToReplace, false));
+                setRowsRef(__spreadArray([], currentRows.current, true));
+            });
+        }
     }, 100, {
         leading: true,
         trailing: true,
     }));
     var loadFilterValues = (0, react_1.useCallback)(function (columnKey) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
+        var column = props.columns.find(function (col) { return col.key === columnKey; });
+        if (!column) {
+            return Promise.resolve([]);
+        }
         return sqlRequest({
-            columns: columnsKeys,
+            columns: columns,
             returnColumns: [columnKey],
-            columnTypes: [(_a = props.columns[columnKey].type) !== null && _a !== void 0 ? _a : 'text'],
+            columnTypes: [(_a = column.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 (_, 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,
-                    type: (_h = props.columns[columnKey].type) !== null && _h !== void 0 ? _h : 'text',
+                    field: (_g = (_e = (_c = column.filterField) !== null && _c !== void 0 ? _c : (_d = column.field) === null || _d === void 0 ? void 0 : _d.fieldAlias) !== null && _e !== void 0 ? _e : (_f = column.field) === null || _f === void 0 ? void 0 : _f.fieldName) !== null && _g !== void 0 ? _g : columnKey,
+                    type: (_h = column.type) !== null && _h !== void 0 ? _h : 'text',
                     direction: 'ASC',
                 },
             ],
             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; });
+            return response.data.map(function (row) { var _a, _b, _c; return (_c = (_b = (_a = column.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; });
         });
-    }, [columnsKeys, conditions, props.columns, props.conditions, sqlRequest]);
+    }, [columns, conditions, props.columns, props.conditions, sqlRequest]);
     (0, react_1.useEffect)(function () {
         var _a, _b;
-        if (!rows.length ||
+        if ((!rows.length && count < 0) ||
             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);
+            loadRows.current(columns, 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,
@@ -187,14 +203,14 @@ var SqlRequestDataGridInner = function (_a, ref) {
         length,
         count,
         props.conditions,
-        columnsKeys,
+        columns,
         visibleColumnsKeys,
         rows,
     ]);
     var loadCopyRows = (0, react_1.useCallback)(function () {
         var _a, _b;
         return sqlRequest({
-            columns: columnsKeys,
+            columns: columns,
             returnColumns: visibleColumnsKeys,
             columnTypes: columnTypes,
             conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true),
@@ -206,7 +222,7 @@ var SqlRequestDataGridInner = function (_a, ref) {
         });
     }, [
         sqlRequest,
-        columnsKeys,
+        columns,
         visibleColumnsKeys,
         columnTypes,
         props.conditions,
@@ -218,9 +234,7 @@ var SqlRequestDataGridInner = function (_a, ref) {
     var loadAllIds = (0, react_1.useCallback)(function () {
         var _a, _b;
         return sqlIdRequest({
-            columns: columnsKeys.includes('Id')
-                ? columnsKeys
-                : __spreadArray(__spreadArray([], columnsKeys, true), ['Id'], false),
+            columns: columns.includes('Id') ? columns : __spreadArray(__spreadArray([], columns, true), ['Id'], false),
             returnColumns: ['Id'],
             columnTypes: ['text'],
             conditions: __spreadArray(__spreadArray([], ((_a = props.conditions) !== null && _a !== void 0 ? _a : []), true), ((_b = Object.values(conditions)) !== null && _b !== void 0 ? _b : []), true),
@@ -228,7 +242,7 @@ var SqlRequestDataGridInner = function (_a, ref) {
             start: 0,
             length: count,
         }).then(function (response) { return response.data.map(function (row) { return row['Id']; }); });
-    }, [columnsKeys, conditions, orderBy, props.conditions, sqlIdRequest, count]);
+    }, [columns, conditions, orderBy, props.conditions, sqlIdRequest, count]);
     var onVisibleRowsChanged = (0, react_1.useCallback)(function (newStart, newLength) {
         if (newStart !== start || newLength !== length) {
             setStart(newStart);
@@ -249,9 +263,7 @@ var SqlRequestDataGridInner = function (_a, ref) {
         }
         else {
             sqlPartialRequest({
-                columns: columnsKeys.includes('Id')
-                    ? columnsKeys
-                    : __spreadArray(__spreadArray([], columnsKeys, true), ['Id'], false),
+                columns: columns.includes('Id') ? columns : __spreadArray(__spreadArray([], columns, true), ['Id'], false),
                 returnColumns: [],
                 columnTypes: [],
                 totalColumns: footers,
@@ -260,7 +272,7 @@ var SqlRequestDataGridInner = function (_a, ref) {
             }).then(function (response) { var _a; return setFooterData((_a = response.totals) !== null && _a !== void 0 ? _a : {}); });
         }
     }, [
-        columnsKeys,
+        columns,
         conditions,
         footers,
         orderBy,
@@ -276,7 +288,7 @@ var SqlRequestDataGridInner = function (_a, ref) {
             : Object.entries(footers).reduce(function (acc, _a) {
                 var _b, _c;
                 var columnKey = _a[0], footerKey = _a[1];
-                var column = props.columns[columnKey];
+                var column = props.columns.find(function (col) { return col.key === columnKey; });
                 var footerFunc = typeof (column === null || column === void 0 ? void 0 : column.footer) === 'function'
                     ? column.footer
                     : (_b = column === null || column === void 0 ? void 0 : column.footer) === null || _b === void 0 ? void 0 : _b[footerKey];
@@ -295,7 +307,9 @@ var SqlRequestDataGridInner = function (_a, ref) {
         footers: footers,
         setFooters: setFooters,
         footerFunctions: footerFunctions,
-    }); }, [footers, setFooters, footerFunctions]);
+        rows: rows,
+        setRows: setRowsRef,
+    }); }, [footerFunctions, footers, rows, setRowsRef]);
     (0, react_1.useImperativeHandle)(ref, function () {
         var _a, _b;
         return ({

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

@@ -0,0 +1,2 @@
+export declare const SqlImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SqlImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;

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

@@ -0,0 +1,14 @@
+"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.SqlImage = exports.SqlImageWrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.SqlImageWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n"])));
+exports.SqlImage = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  max-width: 100%;\n  height: 100%;\n  object-fit: contain;\n"], ["\n  max-width: 100%;\n  height: 100%;\n  object-fit: contain;\n"])));
+var templateObject_1, templateObject_2;

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

@@ -1,16 +1,26 @@
 import { ConditionDTO, FieldDTO, OrderByDTO, SqlRequestRow } from '../../../services/sqlRequests';
-import { DataGridColumn, DataGridFilter, DataGridFilterType, DataGridProps } from '../DataGrid/types';
+import { DataGridCheckboxColumn, DataGridDateColumn, DataGridFilter, DataGridFilterType, DataGridNumberColumn, DataGridProps, DataGridTextColumn, EditableDataGridColumn } from '../DataGrid/types';
+import { SqlRequestForeignListProps } from '../SqlRequestForeignList/types';
 export type SqlRequestDataGridFilter<T extends DataGridFilterType = DataGridFilterType> = DataGridFilter<T> & {
     field?: FieldDTO;
 };
 export type SqlRequestDataGridFilters = Record<string, SqlRequestDataGridFilter>;
-export type SqlRequestDataGridColumn<R> = DataGridColumn<R> & {
+export type SqlRequestDataGridCommonProps = {
     filter?: SqlRequestDataGridFilter;
     field?: FieldDTO;
     filterField?: string;
     sortField?: string;
+    ignore?: boolean;
 };
-export type SqlRequestDataGridColumns<R> = Record<string, SqlRequestDataGridColumn<R>>;
+export type SqlRequestDataGridTextColumn<R> = DataGridTextColumn<R> & SqlRequestDataGridCommonProps;
+export type SqlRequestDataGridNumberColumn<R> = DataGridNumberColumn<R> & SqlRequestDataGridCommonProps;
+export type SqlRequestDataGridCheckboxColumn<R> = DataGridCheckboxColumn<R> & SqlRequestDataGridCommonProps;
+export type SqlRequestDataGridDateColumn<R> = DataGridDateColumn<R> & SqlRequestDataGridCommonProps;
+export type SqlRequestDataGridForeignListColumn<R, T> = {
+    type: 'foreignList';
+} & SqlRequestForeignListProps<T> & EditableDataGridColumn<R, T> & SqlRequestDataGridCommonProps;
+export type SqlRequestDataGridColumn<R> = SqlRequestDataGridTextColumn<R> | SqlRequestDataGridNumberColumn<R> | SqlRequestDataGridCheckboxColumn<R> | SqlRequestDataGridDateColumn<R> | SqlRequestDataGridForeignListColumn<R, any>;
+export type SqlRequestDataGridColumns<R> = SqlRequestDataGridColumn<R>[];
 export type SqlRequestDataGridProps<R> = Omit<DataGridProps<R>, 'rows' | 'columns'> & {
     columns: SqlRequestDataGridColumns<R>;
     hiddenColumns?: string[];

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

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

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

@@ -0,0 +1,4 @@
+import { ForwardedRef } from 'react';
+import { SqlRequestForeignListProps } from './types';
+export declare const SqlRequestForeignListInner: <T extends Record<string, any>>({ requestName, idColumn, columns, initialValue, onItemChanged, onIdChanged, onClosed, onBlur, itemTemplate, valueTemplate, rowHeight, maxRows, orderBy, conditions, }: SqlRequestForeignListProps<T>, ref: ForwardedRef<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const SqlRequestForeignList: <T extends Record<string, any>>(props: SqlRequestForeignListProps<T> & import("react").RefAttributes<HTMLDivElement>) => import("react").JSX.Element | null;

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

@@ -0,0 +1,131 @@
+"use strict";
+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.SqlRequestForeignList = exports.SqlRequestForeignListInner = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable @typescript-eslint/no-explicit-any */
+var services_1 = require("../../../services");
+var react_1 = require("react");
+var styles_1 = require("./styles");
+var Icons_1 = require("../../../Icons");
+var layout_1 = require("../../layout");
+var VirtualScroller_1 = require("../VirtualScroller");
+var lodash_1 = require("lodash");
+var DEFAULT_ROW_HEIGHT = 24;
+var createValueTemplate = function (ValueTemplate, rowHeight) {
+    if (rowHeight === void 0) { rowHeight = DEFAULT_ROW_HEIGHT; }
+    return function (_a) {
+        var item = _a.item;
+        return ((0, jsx_runtime_1.jsx)(styles_1.SqlRequestForeignListValue, { "$rowHeight": rowHeight, children: (0, jsx_runtime_1.jsx)(ValueTemplate, { item: item, index: 0 }) }));
+    };
+};
+var createItemTemplate = function (ItemTemplate, rowHeight) {
+    if (rowHeight === void 0) { rowHeight = DEFAULT_ROW_HEIGHT; }
+    return function (_a) {
+        var item = _a.item, index = _a.index, onItemClick = _a.onClick;
+        var onClick = (0, react_1.useCallback)(function (e, item, onItemClick) {
+            e.preventDefault();
+            e.stopPropagation();
+            onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item);
+        }, []);
+        return ((0, jsx_runtime_1.jsx)(styles_1.SqlRequestForeignListItem, { "$rowHeight": rowHeight, onClick: function (e) { return onClick(e, item, onItemClick); }, children: (0, jsx_runtime_1.jsx)(ItemTemplate, { item: item, index: index }) }));
+    };
+};
+var SqlRequestForeignListInner = function (_a, ref) {
+    var requestName = _a.requestName, idColumn = _a.idColumn, _b = _a.columns, columns = _b === void 0 ? [] : _b, _c = _a.initialValue, initialValue = _c === void 0 ? null : _c, onItemChanged = _a.onItemChanged, onIdChanged = _a.onIdChanged, onClosed = _a.onClosed, onBlur = _a.onBlur, itemTemplate = _a.itemTemplate, valueTemplate = _a.valueTemplate, _d = _a.rowHeight, rowHeight = _d === void 0 ? DEFAULT_ROW_HEIGHT : _d, _e = _a.maxRows, maxRows = _e === void 0 ? 10 : _e, _f = _a.orderBy, orderBy = _f === void 0 ? [] : _f, _g = _a.conditions, conditions = _g === void 0 ? [] : _g;
+    var _h = (0, react_1.useState)(false), opened = _h[0], setOpened = _h[1];
+    var _j = (0, react_1.useState)(null), rect = _j[0], setRect = _j[1];
+    var currentRows = (0, react_1.useRef)([]);
+    var _k = (0, react_1.useState)([]), rows = _k[0], setRows = _k[1];
+    var _l = (0, react_1.useState)(0), start = _l[0], setStart = _l[1];
+    var _m = (0, react_1.useState)(-1), length = _m[0], setLength = _m[1];
+    var _o = (0, react_1.useState)(-1), count = _o[0], setCount = _o[1];
+    var _p = (0, react_1.useState)(initialValue), selectedItem = _p[0], setSelectedItem = _p[1];
+    // Create an internal ref for the component to use
+    var internalRef = (0, react_1.useRef)(null);
+    // Forward the ref while linking it to our internal ref
+    (0, react_1.useImperativeHandle)(ref, function () { return internalRef.current; }, []);
+    var sqlRequest = (0, services_1.useSqlRequestHandler)(requestName)[0];
+    var open = (0, react_1.useCallback)(function () {
+        if (internalRef.current) {
+            var parentRect = internalRef.current.getBoundingClientRect();
+            setRect(new DOMRect(0, 0, parentRect.width, parentRect.height));
+            setOpened(true);
+        }
+    }, []);
+    var close = (0, react_1.useCallback)(function () {
+        setOpened(false);
+        onClosed === null || onClosed === void 0 ? void 0 : onClosed();
+    }, [onClosed]);
+    var onClick = (0, react_1.useCallback)(function (item) {
+        var _a;
+        setSelectedItem(item);
+        onItemChanged === null || onItemChanged === void 0 ? void 0 : onItemChanged(item);
+        onIdChanged === null || onIdChanged === void 0 ? void 0 : onIdChanged((_a = item === null || item === void 0 ? void 0 : item[idColumn]) !== null && _a !== void 0 ? _a : null);
+        close();
+    }, [close, idColumn, onIdChanged, onItemChanged]);
+    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; }
+        if (length > 0) {
+            sqlRequest({
+                columns: columns.includes('Id') ? columns : __spreadArray(__spreadArray([], columns, true), ['Id'], false),
+                returnColumns: returnColumns.includes('Id')
+                    ? returnColumns
+                    : __spreadArray(__spreadArray([], returnColumns, true), ['Id'], false),
+                conditions: conditions,
+                orderBy: orderBy,
+                start: start,
+                length: length,
+                getCount: getCount,
+            }).then(function (response) {
+                var _a;
+                var _b, _c;
+                if (getCount) {
+                    currentRows.current = Array(response.count).fill(null);
+                    if (getCount)
+                        setCount((_b = response.count) !== null && _b !== void 0 ? _b : 0);
+                }
+                var data = (_c = response.data) !== null && _c !== void 0 ? _c : [];
+                var parsedRows = 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 && count < 0) ||
+            rows.slice(start, start + length).some(function (row) { return row === null; })) {
+            loadRows.current(columns, columns, conditions, orderBy, start, length, count < 0);
+        }
+    }, [start, length, count, conditions, rows, orderBy, columns]);
+    var onVisibleRowsChanged = (0, react_1.useCallback)(function (newStart, newLength) {
+        if (newStart !== start || newLength !== length) {
+            setStart(newStart);
+            setLength(newLength);
+        }
+    }, [length, start]);
+    var ItemTemplate = (0, react_1.useMemo)(function () { return createItemTemplate(itemTemplate, rowHeight); }, [itemTemplate, rowHeight]);
+    var ValueTemplate = (0, react_1.useMemo)(function () { return createValueTemplate(valueTemplate !== null && valueTemplate !== void 0 ? valueTemplate : itemTemplate, rowHeight); }, [itemTemplate, rowHeight, valueTemplate]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(styles_1.SqlRequestForeignListInput, { tabIndex: 0, ref: internalRef, onClick: open, onBlur: onBlur, children: [(0, jsx_runtime_1.jsx)(ValueTemplate, { item: selectedItem, index: 0 }), (0, jsx_runtime_1.jsx)(Icons_1.ChevronDownIcon, {}), opened && rect && ((0, jsx_runtime_1.jsx)(layout_1.Dropdown, { "$height": [Math.min(maxRows, rows.length) * rowHeight, 300], "$width": rect.width, "$sourceRect": rect, onClose: close, usePortal: false, children: (0, jsx_runtime_1.jsx)(VirtualScroller_1.VirtualScroller, { gridTemplateColumns: '1fr', items: rows, itemTemplate: ItemTemplate, rowHeightInPx: rowHeight, itemProps: function (item, index) { return ({
+                            item: item,
+                            onClick: onClick,
+                            index: index,
+                        }); }, onRangeChanged: onVisibleRowsChanged }) }))] }) }));
+};
+exports.SqlRequestForeignListInner = SqlRequestForeignListInner;
+exports.SqlRequestForeignList = (0, react_1.forwardRef)(exports.SqlRequestForeignListInner);

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

@@ -0,0 +1,9 @@
+export declare const SqlRequestForeignListInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $readOnly?: boolean;
+}>> & string;
+export declare const SqlRequestForeignListValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $rowHeight: number;
+}>> & string;
+export declare const SqlRequestForeignListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $rowHeight: number;
+}>> & string;

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

@@ -0,0 +1,22 @@
+"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.SqlRequestForeignListItem = exports.SqlRequestForeignListValue = exports.SqlRequestForeignListInput = void 0;
+var styles_1 = require("../../forms/Form/styles");
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.SqlRequestForeignListInput = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n\n  padding: 0;\n  position: relative;\n  cursor: pointer;\n  background-color: var(--color-neutral-0);\n\n  & > svg {\n    position: absolute;\n    right: var(--space-2);\n    top: 50%;\n    transform: translateY(-50%);\n    pointer-events: none;\n    width: var(--space-4);\n    height: var(--space-4);\n    fill: var(--color-neutral-900);\n  }\n"], ["\n  ", "\n\n  padding: 0;\n  position: relative;\n  cursor: pointer;\n  background-color: var(--color-neutral-0);\n\n  & > svg {\n    position: absolute;\n    right: var(--space-2);\n    top: 50%;\n    transform: translateY(-50%);\n    pointer-events: none;\n    width: var(--space-4);\n    height: var(--space-4);\n    fill: var(--color-neutral-900);\n  }\n"])), styles_1.inputCss);
+exports.SqlRequestForeignListValue = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0 var(--space-2);\n  height: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0 var(--space-2);\n  height: ", "px;\n"])), function (_a) {
+    var $rowHeight = _a.$rowHeight;
+    return $rowHeight;
+});
+exports.SqlRequestForeignListItem = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0 var(--space-2);\n  cursor: pointer;\n  height: ", "px;\n  overflow: hidden;\n  box-sizing: border-box;\n\n  &:hover {\n    background-color: var(--color-primary-300);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0 var(--space-2);\n  cursor: pointer;\n  height: ", "px;\n  overflow: hidden;\n  box-sizing: border-box;\n\n  &:hover {\n    background-color: var(--color-primary-300);\n  }\n"])), function (_a) {
+    var $rowHeight = _a.$rowHeight;
+    return $rowHeight;
+});
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,22 @@
+import { ConditionDTO, OrderByDTO } from '../../../services';
+import { VirtualScrollerTemplateFC } from '../VirtualScroller/types';
+export type SqlRequestForeignListProps<T> = {
+    requestName: string;
+    idColumn: string;
+    columns: string[];
+    initialValue?: T | null;
+    onIdChanged?: (value: string | null) => void;
+    onItemChanged?: (value: T | null) => void;
+    onClosed?: () => void;
+    onBlur?: () => void;
+    valueTemplate?: VirtualScrollerTemplateFC<T, SqlRequestForeignListItemProps<T>>;
+    itemTemplate: VirtualScrollerTemplateFC<T, SqlRequestForeignListItemProps<T>>;
+    rowHeight?: number;
+    maxRows?: number;
+    orderBy?: OrderByDTO[];
+    conditions?: ConditionDTO[];
+};
+export type SqlRequestForeignListItemProps<T> = {
+    onClick?: (item: T | null) => void;
+};
+export type SqlRequestForeignListItemFC<T> = VirtualScrollerTemplateFC<T, SqlRequestForeignListItemProps<T>>;

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

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

package/dist/components/data/SqlRequestGrid/filters/FiltersSidebar.d.ts

@@ -0,0 +1,10 @@
+import { SqlRequestGridProps } from '../types';
+import { DataGridContext } from '../../DataGrid/types';
+type FiltersSidebarProps<R, P extends object = {}> = {
+    props: SqlRequestGridProps<R, P>;
+    context: DataGridContext<R>;
+    onClose?: () => void;
+    onClearFilters?: () => void;
+};
+export declare const FiltersSidebar: <R, P extends object = {}>({ props, context, onClose, onClearFilters, }: FiltersSidebarProps<R, P>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/data/SqlRequestGrid/filters/FiltersSidebar.js

@@ -0,0 +1,51 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FiltersSidebar = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles = __importStar(require("./styles"));
+var Icons_1 = require("../../../../Icons");
+var react_1 = require("react");
+var DataGridFilterMenu_1 = require("../../DataGrid/DataGridFilterMenu");
+var forms_1 = require("../../../forms");
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+var FiltersSidebar = function (_a) {
+    var props = _a.props, context = _a.context, onClose = _a.onClose, onClearFilters = _a.onClearFilters;
+    var _b = (0, react_1.useState)(null), columnKey = _b[0], setColumnKey = _b[1];
+    var column = columnKey
+        ? props.fields.find(function (field) {
+            return field.key === columnKey && !!field.filter;
+        })
+        : null;
+    var visible = !!(columnKey && column);
+    var stopPropagation = (0, react_1.useCallback)(function (e) {
+        e.stopPropagation();
+    }, []);
+    var onFilterClick = (0, react_1.useCallback)(function (columnKey) {
+        setColumnKey(columnKey);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(styles.Backdrop, { onClick: onClose, children: (0, jsx_runtime_1.jsx)(styles.FiltersSidebarContainer, { onClick: stopPropagation, children: visible ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles.FiltersSidebarHeader, { children: [(0, jsx_runtime_1.jsx)(forms_1.IconButton, { rounded: true, bordered: false, icon: Icons_1.AngleLeftIcon, color: "neutral", onClick: function () { return onFilterClick(null); } }), (0, jsx_runtime_1.jsx)("h3", { children: column.name }), (0, jsx_runtime_1.jsx)(forms_1.IconButton, { rounded: true, bordered: false, icon: Icons_1.XMarkIcon, color: "neutral", onClick: onClose })] }), (0, jsx_runtime_1.jsx)(DataGridFilterMenu_1.DataGridFilterMenu, { contextMenu: false, column: column, context: context, showTotalButton: false })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles.FiltersSidebarHeader, { children: [(0, jsx_runtime_1.jsx)("h3", { children: "Filtres" }), (0, jsx_runtime_1.jsx)(forms_1.IconButton, { rounded: true, bordered: false, icon: Icons_1.FilterSlashIcon, color: "danger", onClick: onClearFilters }), (0, jsx_runtime_1.jsx)(forms_1.IconButton, { rounded: true, bordered: false, icon: Icons_1.XMarkIcon, color: "neutral", onClick: onClose })] }), props.fields.map(function (field) { return ((0, jsx_runtime_1.jsxs)(styles.FiltersSidebarFilter, { onClick: function () { return onFilterClick(field.key); }, children: [field.name, (0, jsx_runtime_1.jsx)(Icons_1.AngleRightIcon, {})] }, field.key)); })] })) }) }));
+};
+exports.FiltersSidebar = FiltersSidebar;

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

@@ -0,0 +1,4 @@
+export declare const FiltersSidebarContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FiltersSidebarHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FiltersSidebarFilter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Backdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -0,0 +1,17 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Backdrop = exports.FiltersSidebarFilter = exports.FiltersSidebarHeader = exports.FiltersSidebarContainer = void 0;
+var styles_1 = require("../../../ui/ContextMenu/styles");
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.FiltersSidebarContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  max-width: var(--space-96);\n  border-radius: var(--rounded-none);\n  padding: 0;\n  z-index: 1;\n  overflow-y: auto;\n  box-sizing: border-box;\n  background-color: var(--color-neutral-50);\n  border-right: 1px solid var(--color-neutral-300);\n  box-shadow: var(--shadow-sm);\n\n  & > ", " {\n    position: relative;\n    background: none;\n    padding: var(--space-2) 0;\n\n    ", " {\n      background: none;\n      /* height: var(--size-6); */\n      padding: var(--space-2) var(--space-4);\n    }\n\n    ", " {\n      margin: var(--space-2) 0;\n    }\n  }\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  max-width: var(--space-96);\n  border-radius: var(--rounded-none);\n  padding: 0;\n  z-index: 1;\n  overflow-y: auto;\n  box-sizing: border-box;\n  background-color: var(--color-neutral-50);\n  border-right: 1px solid var(--color-neutral-300);\n  box-shadow: var(--shadow-sm);\n\n  & > ", " {\n    position: relative;\n    background: none;\n    padding: var(--space-2) 0;\n\n    ", " {\n      background: none;\n      /* height: var(--size-6); */\n      padding: var(--space-2) var(--space-4);\n    }\n\n    ", " {\n      margin: var(--space-2) 0;\n    }\n  }\n"])), styles_1.MenuContainer, styles_1.MenuItemContainer, styles_1.Divider);
+exports.FiltersSidebarHeader = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background-color: var(--color-neutral-50);\n\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-2);\n\n  padding-bottom: var(--space-2);\n  border-bottom: 1px solid var(--color-neutral-300);\n\n  h3 {\n    margin: 0;\n    margin-right: auto;\n  }\n"], ["\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background-color: var(--color-neutral-50);\n\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--space-4);\n  padding: var(--space-2);\n\n  padding-bottom: var(--space-2);\n  border-bottom: 1px solid var(--color-neutral-300);\n\n  h3 {\n    margin: 0;\n    margin-right: auto;\n  }\n"])));
+exports.FiltersSidebarFilter = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: var(--space-4) var(--space-2);\n  border-bottom: 1px solid var(--color-neutral-300);\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--color-neutral-100);\n  }\n  svg {\n    margin-left: auto;\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: var(--space-4) var(--space-2);\n  border-bottom: 1px solid var(--color-neutral-300);\n  cursor: pointer;\n\n  &:hover {\n    background-color: var(--color-neutral-100);\n  }\n  svg {\n    margin-left: auto;\n    width: var(--space-4);\n    height: var(--space-4);\n  }\n"])));
+exports.Backdrop = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: sticky;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  background-color: rgba(0, 0, 0, 0.5);\n"], ["\n  position: sticky;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  background-color: rgba(0, 0, 0, 0.5);\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -1,4 +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 SqlRequestGridInner: <R, P extends object = {}>(allProps: 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;