@addev-be/ui 0.2.2 → 0.2.6

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

@@ -0,0 +1,21 @@
+import { AdvancedRequestRow, ConditionDTO, FieldDTO, OrderByDTO } from '../../../services/advancedRequests';
+import { DataGridColumn, DataGridFilter, DataGridFilterType, DataGridProps } from '../DataGrid/types';
+export type AdvancedRequestDataGridFilter<T extends DataGridFilterType = DataGridFilterType> = DataGridFilter<T> & {
+    field?: FieldDTO;
+};
+export type AdvancedRequestDataGridFilters = Record<string, AdvancedRequestDataGridFilter>;
+export type AdvancedRequestDataGridColumn<R> = DataGridColumn<R> & {
+    filter?: AdvancedRequestDataGridFilter;
+    field?: FieldDTO;
+    filterField?: string;
+    sortField?: string;
+};
+export type AdvancedRequestDataGridColumns<R> = Record<string, AdvancedRequestDataGridColumn<R>>;
+export type AdvancedRequestDataGridProps<R> = Omit<DataGridProps<R>, 'rows' | 'columns'> & {
+    columns: AdvancedRequestDataGridColumns<R>;
+    type: string;
+    orderBy?: OrderByDTO[];
+    conditions?: ConditionDTO[];
+    idField?: FieldDTO | null;
+    parser?: (row: AdvancedRequestRow<R>) => R;
+};

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

@@ -1,10 +1,9 @@
-import { AdvancedRequestRow, ConditionDTO, OrderByDTO } from '../../../services/advancedRequests';
+import { ConditionDTO, OrderByDTO } from '../../../services/advancedRequests';
 import { DataGridProps } from './types';
 export type AdvancedRequestDataGridProps<R> = Omit<DataGridProps<R>, 'rows'> & {
     type: string;
     orderBy?: OrderByDTO[];
     conditions?: ConditionDTO[];
     addIdColumn?: boolean;
-    parser?: (row: AdvancedRequestRow<R>) => R;
 };
 export declare const AdvancedRequestDataGrid: <R>(props: AdvancedRequestDataGridProps<R>) => import("react/jsx-runtime").JSX.Element;

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

@@ -93,14 +93,13 @@ var AdvancedRequestDataGrid = function (props) {
             getTotal: getTotal,
         })).then(function (response) {
             var _a;
-            var _b, _c;
+            var _b;
             if (getTotal) {
                 currentRows.current = Array(response.total).fill(null);
                 if (getTotal)
                     setTotal((_b = response.total) !== null && _b !== void 0 ? _b : 0);
             }
-            var parsedRows = response.data.map((_c = props.parser) !== null && _c !== void 0 ? _c : (function (row) { return row; }));
-            (_a = currentRows.current).splice.apply(_a, __spreadArray([start, length], parsedRows, false));
+            (_a = currentRows.current).splice.apply(_a, __spreadArray([start, length], response.data, false));
             setRows(__spreadArray([], currentRows.current, true));
         });
     }, 100));
@@ -151,14 +150,13 @@ var AdvancedRequestDataGrid = function (props) {
             orderBy: orderBy,
             start: 0,
             length: total,
-        })).then(function (response) { var _a; return response.data.map((_a = props.parser) !== null && _a !== void 0 ? _a : (function (row) { return row; })); });
+        })).then(function (response) { return response.data; });
     }, [
         advancedRequest,
         conditions,
         orderBy,
         props.columns,
         props.conditions,
-        props.parser,
         props.type,
         total,
     ]);

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

@@ -1,2 +1,2 @@
 import { DataGridCellProps } from './types';
-export declare const DataGridCell: <R>({ row, rowIndex, columnKey, columnIndex, column, context, className, style, }: DataGridCellProps<R>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataGridCell: <R>({ row, rowIndex, columnKey, columnIndex, column, context, style, }: DataGridCellProps<R>) => import("react/jsx-runtime").JSX.Element;

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

@@ -30,18 +30,18 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var styles = __importStar(require("./styles"));
 var react_1 = require("react");
 var DataGridEditableCell_1 = require("./DataGridEditableCell");
-var lodash_1 = require("lodash");
 var hooks_1 = require("./hooks");
-var defaultRender = function (col, row) {
+var defaultRender = function (row, col) {
     var value = col.propertyName ? row[col.propertyName] : '';
     return !value ? '' : String(value);
 };
 var DataGridCell = function (_a) {
-    var _b;
-    var row = _a.row, rowIndex = _a.rowIndex, columnKey = _a.columnKey, columnIndex = _a.columnIndex, column = _a.column, context = _a.context, className = _a.className, style = _a.style;
-    var _c = (0, hooks_1.useDataGridContext)(context), name = _c.name, editable = _c.editable, _d = _c.editingCell, editingCell = _d === void 0 ? [-1, -1] : _d, setEditingCell = _c.setEditingCell, onRowDoubleClick = _c.onRowDoubleClick;
+    var _b, _c;
+    var row = _a.row, rowIndex = _a.rowIndex, columnKey = _a.columnKey, columnIndex = _a.columnIndex, column = _a.column, context = _a.context, style = _a.style;
+    var _d = (0, hooks_1.useDataGridContext)(context), name = _d.name, editable = _d.editable, _e = _d.editingCell, editingCell = _e === void 0 ? [-1, -1] : _e, setEditingCell = _d.setEditingCell, onRowDoubleClick = _d.onRowDoubleClick;
     var isEditable = !!editable && !!column.editable && column.type && column.getter;
     var isEditing = isEditable && editingCell[0] === rowIndex && editingCell[1] === columnIndex;
+    var DataGridCellComponent = (_b = column.component) !== null && _b !== void 0 ? _b : styles.DataGridCell;
     var onDoubleClick = (0, react_1.useCallback)(function (e) {
         e.stopPropagation();
         e.preventDefault();
@@ -54,6 +54,6 @@ var DataGridCell = function (_a) {
     if (isEditing) {
         return ((0, jsx_runtime_1.jsx)(DataGridEditableCell_1.DataGridEditableCell, { row: row, rowIndex: rowIndex, columnKey: columnKey, columnIndex: columnIndex, column: column, context: context }, "".concat(name, "-").concat(rowIndex, "-").concat(columnIndex)));
     }
-    return ((0, jsx_runtime_1.jsx)(styles.DataGridCell, { className: (0, lodash_1.join)([className, column.className, column.bodyClassName], ' '), onDoubleClick: onDoubleClick, style: style, children: ((_b = column.render) !== null && _b !== void 0 ? _b : defaultRender)(column, row) }, "".concat(name, "-").concat(rowIndex, "-").concat(columnIndex)));
+    return ((0, jsx_runtime_1.jsx)(DataGridCellComponent, { onDoubleClick: onDoubleClick, style: style, children: ((_c = column.render) !== null && _c !== void 0 ? _c : defaultRender)(row, column) }, "".concat(name, "-").concat(rowIndex, "-").concat(columnIndex)));
 };
 exports.DataGridCell = DataGridCell;

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

@@ -5,7 +5,6 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 var react_1 = require("react");
-var lodash_1 = require("lodash");
 var hooks_1 = require("./hooks");
 var DataGridEditableCell = function (_a) {
     var row = _a.row, columnKey = _a.columnKey, column = _a.column, context = _a.context;
@@ -19,13 +18,9 @@ var DataGridEditableCell = function (_a) {
         onCellEdited === null || onCellEdited === void 0 ? void 0 : onCellEdited(row, columnKey, value);
         setEditingCell([-1, -1]);
     }, [columnKey, onCellEdited, row, setEditingCell, value]);
-    return ((0, jsx_runtime_1.jsxs)("td", { className: (0, lodash_1.join)([
-            // 'whitespace-nowrap py-1 text-sm',
-            column.className,
-            column.bodyClassName,
-        ], ' '), children: [(0, jsx_runtime_1.jsx)("input", { type: "text", 
+    return ((0, jsx_runtime_1.jsxs)("td", { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", 
                 // className="relative  z-10 block text-normal w-full border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-sky-600 sm:text-sm sm:leading-6"
-                value: value, onChange: function (e) { return setValue(e.target.value); } }), (0, jsx_runtime_1.jsx)("div", { 
+                value: String(value), onChange: function (e) { return setValue(e.target.value); } }), (0, jsx_runtime_1.jsx)("div", { 
                 // className="fixed inset-0 bg-black bg-opacity-10"
                 onClick: onClose })] }, columnKey));
 };

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

@@ -56,14 +56,14 @@ var FilterValuesScroller_1 = require("../FilterValuesScroller");
 var forms_1 = require("../../../forms");
 var hooks_1 = require("./hooks");
 var DataGridFilterMenu = function (_a) {
-    var _b, _c;
+    var _b, _c, _d;
     var columnKey = _a.columnKey, context = _a.context, onClose = _a.onClose;
-    var _d = (0, hooks_1.useFilterModal)({ columnKey: columnKey, context: context }), openModal = _d.openModal, modal = _d.modal;
-    var _e = (0, react_1.useContext)(context), _f = _e.filters, filters = _f === void 0 ? {} : _f, rows = _e.rows, columns = _e.columns, setFilters = _e.setFilters, filterValuesLoader = _e.filterValuesLoader;
+    var _e = (0, hooks_1.useFilterModal)({ columnKey: columnKey, context: context }), openModal = _e.openModal, modal = _e.modal;
+    var _f = (0, react_1.useContext)(context), _g = _f.filters, filters = _g === void 0 ? {} : _g, rows = _f.rows, columns = _f.columns, setFilters = _f.setFilters, filterValuesLoader = _f.filterValuesLoader;
     var column = (_b = columns[columnKey]) !== null && _b !== void 0 ? _b : {};
     var textFilterInputRef = (0, react_1.useRef)(null);
-    var _g = (0, react_1.useState)(''), textFilter = _g[0], setTextFilter = _g[1];
-    var _h = (0, react_1.useState)([]), availableValues = _h[0], setAvailableValues = _h[1];
+    var _h = (0, react_1.useState)(''), textFilter = _h[0], setTextFilter = _h[1];
+    var _j = (0, react_1.useState)([]), availableValues = _j[0], setAvailableValues = _j[1];
     (0, react_1.useEffect)(function () {
         if (filterValuesLoader) {
             filterValuesLoader(columnKey).then(function (values) {
@@ -111,7 +111,8 @@ var DataGridFilterMenu = function (_a) {
         var checked = (0, lodash_1.intersection)(selectedValues, values).length === values.length;
         setValuesChecked(values, !checked);
     }, [setValuesChecked, selectedValues]);
-    var formatter = (0, react_1.useMemo)(function () { var _a, _b; return (_b = (_a = column.filter) === null || _a === void 0 ? void 0 : _a.formatter) !== null && _b !== void 0 ? _b : (function (v) { return (v === null ? null : String(v)); }); }, [(_c = column.filter) === null || _c === void 0 ? void 0 : _c.formatter]);
+    var formatter = (0, react_1.useMemo)(function () { var _a, _b; return (_b = (_a = column.filter) === null || _a === void 0 ? void 0 : _a.formatter) !== null && _b !== void 0 ? _b : helpers_1.defaultRendererAndFormatter; }, [(_c = column.filter) === null || _c === void 0 ? void 0 : _c.formatter]);
+    var renderer = (0, react_1.useMemo)(function () { var _a, _b; return (_b = (_a = column.filter) === null || _a === void 0 ? void 0 : _a.renderer) !== null && _b !== void 0 ? _b : helpers_1.defaultRendererAndFormatter; }, [(_d = column.filter) === null || _d === void 0 ? void 0 : _d.renderer]);
     var filteredAvailableValues = (0, react_1.useMemo)(function () {
         return !textFilter
             ? availableValues
@@ -125,13 +126,14 @@ var DataGridFilterMenu = function (_a) {
     var checkboxesComponent = (0, react_1.useMemo)(function () {
         if (column.type === 'date') {
             var groups = (0, helpers_1.getDateGroups)(filteredAvailableValues);
-            return ((0, jsx_runtime_1.jsx)(FilterValuesScroller_1.FilterValuesScroller, { values: filteredAvailableValues, selectedValues: selectedValues, onToggle: toggleValues, formatter: formatter, groups: groups }));
+            return ((0, jsx_runtime_1.jsx)(FilterValuesScroller_1.FilterValuesScroller, { values: filteredAvailableValues, selectedValues: selectedValues, onToggle: toggleValues, formatter: formatter, renderer: renderer, groups: groups }));
         }
-        return ((0, jsx_runtime_1.jsx)(FilterValuesScroller_1.FilterValuesScroller, { values: filteredAvailableValues, selectedValues: selectedValues, onToggle: toggleValues, formatter: formatter }));
+        return ((0, jsx_runtime_1.jsx)(FilterValuesScroller_1.FilterValuesScroller, { values: filteredAvailableValues, selectedValues: selectedValues, onToggle: toggleValues, formatter: formatter, renderer: renderer }));
     }, [
         column.type,
         filteredAvailableValues,
         formatter,
+        renderer,
         selectedValues,
         toggleValues,
     ]);

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

@@ -3,29 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridFooter = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var getScrollbarSize_1 = require("../../../helpers/getScrollbarSize");
-var lodash_1 = require("lodash");
 var hooks_1 = require("./hooks");
 var SCROLL_BAR_SIZE = (0, getScrollbarSize_1.getScrollBarSize)();
 var DataGridFooter = function (_a) {
     var context = _a.context;
     var _b = (0, hooks_1.useDataGridContext)(context), visibleColumns = _b.visibleColumns, rows = _b.rows, selectedRows = _b.selectedRows, sortedRows = _b.sortedRows, _c = _b.rowHeight, rowHeight = _c === void 0 ? 48 : _c, selectable = _b.selectable;
-    return ((0, jsx_runtime_1.jsx)("tfoot", { 
-        // className="block border-t border-t-gray-300"
-        style: {
+    return ((0, jsx_runtime_1.jsx)("tfoot", { style: {
             paddingRight: "".concat(SCROLL_BAR_SIZE[0], "px"),
-        }, children: (0, jsx_runtime_1.jsxs)("tr", { 
-            // className="grid bg-gray-100"
-            style: {
+        }, children: (0, jsx_runtime_1.jsxs)("tr", { style: {
                 height: "".concat(rowHeight, "px"),
-            }, children: [!!selectable && ((0, jsx_runtime_1.jsx)("th", {}, "__select_checkbox__")), visibleColumns.map(function (_a) {
+            }, children: [!!selectable && (0, jsx_runtime_1.jsx)("div", {}, "__select_checkbox__"), visibleColumns.map(function (_a) {
                     var _b, _c;
                     var key = _a[0], col = _a[1];
-                    return ((0, jsx_runtime_1.jsx)("th", { className: (0, lodash_1.join)([
-                            // 'inline-block relative group px-3 py-0 text-left text-sm hover:bg-gray-50 leading-6',
-                            col.className,
-                            col.footerClassName,
-                            // '!overflow-visible',
-                        ], ' '), style: { width: ((_b = col.width) !== null && _b !== void 0 ? _b : 150) + 'px' }, children: (_c = col.footer) === null || _c === void 0 ? void 0 : _c.call(col, rows, sortedRows, selectedRows) }, key));
+                    return ((0, jsx_runtime_1.jsx)("div", { style: { width: ((_b = col.width) !== null && _b !== void 0 ? _b : 150) + 'px' }, children: (_c = col.footer) === null || _c === void 0 ? void 0 : _c.call(col, rows, sortedRows, selectedRows) }, key));
                 })] }) }));
 };
 exports.DataGridFooter = DataGridFooter;

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

@@ -22,6 +22,42 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridHeader = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
@@ -38,32 +74,44 @@ var hooks_1 = require("./DataGridColumnsModal/hooks");
 var hooks_2 = require("./hooks");
 var DataGridHeader = function (_a) {
     var context = _a.context;
-    var _b = (0, hooks_2.useDataGridContext)(context), name = _b.name, visibleColumns = _b.visibleColumns, selectable = _b.selectable, rows = _b.rows, selectedRows = _b.selectedRows, setSelectedRows = _b.setSelectedRows, copyTable = _b.copyTable, setFilters = _b.setFilters, refresh = _b.refresh, headerColor = _b.headerColor;
+    var _b = (0, hooks_2.useDataGridContext)(context), name = _b.name, visibleColumns = _b.visibleColumns, selectable = _b.selectable, rows = _b.rows, selectedKeys = _b.selectedKeys, setSelectedKeys = _b.setSelectedKeys, copyTable = _b.copyTable, setFilters = _b.setFilters, refresh = _b.refresh, headerColor = _b.headerColor, rowKeyGetter = _b.rowKeyGetter, gridTemplateColumns = _b.gridTemplateColumns, getAllIds = _b.getAllIds;
     var _c = (0, react_1.useState)(), visibleFilter = _c[0], setVisibleFilter = _c[1];
     var _d = (0, hooks_1.useDataGridColumnsModal)(context), openModal = _d.openModal, modal = _d.modal;
-    var checkboxStatus = selectedRows.length === 0
+    var checkboxStatus = selectedKeys.length === 0
         ? false
-        : selectedRows.length === rows.length
+        : selectedKeys.length === rows.length
             ? true
             : undefined;
-    var toggleAll = (0, react_1.useCallback)(function (newStatus) {
-        setSelectedRows(newStatus ? rows : []);
-    }, [rows, setSelectedRows]);
+    var toggleAll = (0, react_1.useCallback)(function (newStatus) { return __awaiter(void 0, void 0, void 0, function () {
+        var allIds, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!getAllIds) return [3 /*break*/, 2];
+                    return [4 /*yield*/, getAllIds()];
+                case 1:
+                    _a = _b.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    _a = rows.map(rowKeyGetter);
+                    _b.label = 3;
+                case 3:
+                    allIds = _a;
+                    setSelectedKeys(newStatus ? allIds : []);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [getAllIds, rowKeyGetter, rows, setSelectedKeys]);
     var onFilterButtonClicked = (0, react_1.useCallback)(function (columnKey) {
         setVisibleFilter(function (prev) { return (prev === columnKey ? undefined : columnKey); });
     }, []);
-    var gridTemplateColumns = (0, react_1.useMemo)(function () { return visibleColumns.map(function (_a) {
-        var _b;
-        var col = _a[1];
-        return "".concat((_b = col.width) !== null && _b !== void 0 ? _b : 150, "px");
-    }).join(' '); }, [visibleColumns]);
     var _e = (0, react_1.useState)(false), isLoadingVisible = _e[0], setIsLoadingVisible = _e[1];
     var runCopyTable = (0, react_1.useCallback)(function () {
         setIsLoadingVisible(true);
         copyTable().then(function () { return setIsLoadingVisible(false); });
     }, [copyTable]);
     var toolsRow = ((0, jsx_runtime_1.jsxs)(styles.DataGridToolsRow, { children: [(0, jsx_runtime_1.jsx)(layout_1.Loading, { visible: isLoadingVisible }), refresh && ((0, jsx_runtime_1.jsxs)(forms_1.Button, { size: "small", onClick: refresh, children: [(0, jsx_runtime_1.jsx)(Icons_1.ArrowsRotateIcon, {}), "Rafra\u00EEchir"] })), (0, jsx_runtime_1.jsxs)(forms_1.Button, { color: "emerald", size: "small", onClick: runCopyTable, children: [(0, jsx_runtime_1.jsx)(Icons_1.CopyIcon, {}), "Copier la table"] }), (0, jsx_runtime_1.jsxs)(forms_1.Button, { size: "small", color: "danger", onClick: function () { return setFilters({}); }, children: [(0, jsx_runtime_1.jsx)(Icons_1.FilterSlashIcon, {}), "Supprimer les filtres"] }), name && ((0, jsx_runtime_1.jsxs)(forms_1.Button, { color: "info", size: "small", onClick: openModal, children: [(0, jsx_runtime_1.jsx)(Icons_1.TableColumnsIcon, {}), "Param\u00E8tres des colonnes"] }))] }));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modal, toolsRow, (0, jsx_runtime_1.jsxs)(styles.DataGridHeaderRow, { "$gridTemplateColumns": gridTemplateColumns, "$headerColor": headerColor, children: [!!selectable && ((0, jsx_runtime_1.jsx)("th", { children: (0, jsx_runtime_1.jsx)(IndeterminateCheckbox_1.IndeterminateCheckbox, { checked: checkboxStatus, onChange: function () { return toggleAll(!checkboxStatus); } }) })), visibleColumns.map(function (_a, index) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modal, toolsRow, (0, jsx_runtime_1.jsxs)(styles.DataGridHeaderRow, { "$gridTemplateColumns": gridTemplateColumns, "$headerColor": headerColor, children: [!!selectable && ((0, jsx_runtime_1.jsx)(styles.HeaderSelectionCell, { "$headerColor": headerColor, children: (0, jsx_runtime_1.jsx)(IndeterminateCheckbox_1.IndeterminateCheckbox, { checked: checkboxStatus, onChange: function () { return toggleAll(!(checkboxStatus !== null && checkboxStatus !== void 0 ? checkboxStatus : true)); } }) })), visibleColumns.map(function (_a, index) {
                         var key = _a[0], col = _a[1];
                         return ((0, jsx_runtime_1.jsx)(DataGridHeaderCell_1.DataGridHeaderCell, { columnKey: key, column: col, context: context, columnIndex: index, isFilterOpen: visibleFilter === key, onFilterButtonClicked: onFilterButtonClicked }, key));
                     })] })] }));

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

@@ -36,11 +36,11 @@ var IconButton_1 = require("../../forms/IconButton");
 var hooks_1 = require("./hooks");
 var providers_1 = require("../../../providers");
 var DataGridHeaderCell = function (_a) {
-    var _b, _c;
+    var _b;
     var columnKey = _a.columnKey, columnIndex = _a.columnIndex, column = _a.column, context = _a.context;
     var getElementScreenRect = (0, providers_1.useUi)().getElementScreenRect;
     var contextValue = (0, hooks_1.useDataGridContext)(context);
-    var _d = contextValue.filters, filters = _d === void 0 ? {} : _d, _e = contextValue.sorts, sorts = _e === void 0 ? {} : _e, setSorts = contextValue.setSorts, setColumnWidth = contextValue.setColumnWidth, saveSettings = contextValue.saveSettings, headerColor = contextValue.headerColor;
+    var _c = contextValue.filters, filters = _c === void 0 ? {} : _c, _d = contextValue.sorts, sorts = _d === void 0 ? {} : _d, setSorts = contextValue.setSorts, setColumnWidth = contextValue.setColumnWidth, saveSettings = contextValue.saveSettings, headerColor = contextValue.headerColor;
     var filterButtonRef = (0, react_1.useRef)(null);
     /** SORTING */
     var SortIcon = sorts[columnKey]
@@ -59,7 +59,7 @@ var DataGridHeaderCell = function (_a) {
         }
     }, [setSorts, sorts]);
     /** RESIZING */
-    var _f = (0, react_1.useState)(false), isResizing = _f[0], setIsResizing = _f[1];
+    var _e = (0, react_1.useState)(false), isResizing = _e[0], setIsResizing = _e[1];
     var resizingOffset = (0, react_1.useRef)(0);
     var onResizeStart = (0, react_1.useCallback)(function (e) {
         resizingOffset.current = e.screenX - (column.width || 150);
@@ -75,7 +75,7 @@ var DataGridHeaderCell = function (_a) {
         setIsResizing(false);
         saveSettings();
     }, [saveSettings]);
-    var _g = (0, react_1.useState)(false), isFilterDropdownVisible = _g[0], setIsFilterDropdownVisible = _g[1];
+    var _f = (0, react_1.useState)(false), isFilterDropdownVisible = _f[0], setIsFilterDropdownVisible = _f[1];
     var filterDropdown = (0, react_1.useMemo)(function () {
         if (!isFilterDropdownVisible || !filterButtonRef.current || !columnKey) {
             return null;
@@ -94,6 +94,7 @@ var DataGridHeaderCell = function (_a) {
     var onFilterButtonClicked = (0, react_1.useCallback)(function () {
         setIsFilterDropdownVisible(true);
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(styles.DataGridHeaderCellContainer, { "$headerColor": headerColor, "$isResizing": isResizing, children: [filterDropdown, (0, jsx_runtime_1.jsx)("span", { children: column.name }), !!column.sortGetter && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: headerColor, size: "small", icon: SortIcon, onClick: function () { return onSortButtonClicked === null || onSortButtonClicked === void 0 ? void 0 : onSortButtonClicked(columnKey); } })), !!column.filter && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { size: "small", ref: filterButtonRef, icon: ((_b = filters[columnKey]) === null || _b === void 0 ? void 0 : _b.values.length) > 0 ? Icons_1.FilterFullIcon : Icons_1.FilterIcon, color: ((_c = filters[columnKey]) === null || _c === void 0 ? void 0 : _c.values.length) > 0 ? 'danger' : headerColor, onClick: onFilterButtonClicked })), column.resizable !== false && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles.DataGridResizeGrip, { className: isResizing ? 'active' : '', "$headerColor": headerColor, onMouseDown: onResizeStart }), isResizing && ((0, jsx_runtime_1.jsx)(styles.ResizeBackdrop, { onMouseMove: onResizeMove, onMouseUp: onResizeEnd }))] }))] }));
+    var hasFilters = ((_b = filters[columnKey]) === null || _b === void 0 ? void 0 : _b.values.length) > 0;
+    return ((0, jsx_runtime_1.jsxs)(styles.DataGridHeaderCellContainer, { "$headerColor": headerColor, "$isResizing": isResizing, children: [filterDropdown, (0, jsx_runtime_1.jsx)("span", { children: column.name }), !!column.sortGetter && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { color: headerColor, size: "small", icon: SortIcon, onClick: function () { return onSortButtonClicked === null || onSortButtonClicked === void 0 ? void 0 : onSortButtonClicked(columnKey); } })), !!column.filter && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { size: "small", className: hasFilters ? 'danger' : '', ref: filterButtonRef, icon: hasFilters ? Icons_1.FilterFullIcon : Icons_1.FilterIcon, color: hasFilters ? 'danger' : headerColor, onClick: onFilterButtonClicked })), column.resizable !== false && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles.DataGridResizeGrip, { className: isResizing ? 'active' : '', "$headerColor": headerColor, onMouseDown: onResizeStart }), isResizing && ((0, jsx_runtime_1.jsx)(styles.ResizeBackdrop, { onMouseMove: onResizeMove, onMouseUp: onResizeEnd }))] }))] }));
 };
 exports.DataGridHeaderCell = DataGridHeaderCell;

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

@@ -1,7 +1,7 @@
-import { DataGridFilter, DataGridFilterType } from '../types';
-type FilterModalContentProps<R, T extends DataGridFilterType = DataGridFilterType> = {
-    filter: DataGridFilter<R, T>;
-    onFilterChanged: (filter: DataGridFilter<R, T>) => void;
+import { DataGridFilter } from '../types';
+type FilterModalContentProps = {
+    filter: DataGridFilter;
+    onFilterChanged: (filter: DataGridFilter) => void;
 };
-export declare const FilterModalContent: <R, T extends DataGridFilterType = DataGridFilterType>({ filter, onFilterChanged, }: FilterModalContentProps<R, T>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FilterModalContent: ({ filter, onFilterChanged, }: FilterModalContentProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -83,15 +83,17 @@ var FilterModalContent = function (_a) {
     var operator = filter.operator, type = filter.type, values = filter.values;
     return ((0, jsx_runtime_1.jsxs)(styles.FilterModalContentContainer, { children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: "filterOperator", children: [(0, jsx_runtime_1.jsx)("span", { children: "Op\u00E9rateur :" }), (0, jsx_runtime_1.jsx)(forms_1.Select, { name: "filterOperator", items: Object.entries(filterOperators[filter.type]), itemKey: 0, itemLabel: 1, value: String(operator), className: "text-sm", onChange: function (e) {
                             return onFilterChanged(__assign(__assign({}, filter), { operator: e.target.value }));
-                        } })] }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: "filterValue1", children: [(0, jsx_runtime_1.jsxs)("span", { children: [operator === 'inRange' ? 'Entre' : 'Valeur', " :"] }), (0, jsx_runtime_1.jsx)(forms_1.Input, { ref: value1Ref, name: "filterValue1", type: filter.type, value: (_b = values[0]) !== null && _b !== void 0 ? _b : '', 
-                        // className={(type === 'number' ? 'w-24 ' : '') + 'text-sm'}
-                        onChange: function (e) {
-                            var newValues = __spreadArray([], values, true);
-                            newValues[0] =
-                                type === 'number'
-                                    ? Number(e.target.value)
-                                    : String(e.target.value);
-                            onFilterChanged(__assign(__assign({}, filter), { values: newValues }));
+                        } })] }), (0, jsx_runtime_1.jsxs)("label", { htmlFor: "filterValue1", children: [(0, jsx_runtime_1.jsxs)("span", { children: [operator === 'inRange' ? 'Entre' : 'Valeur', " :"] }), (0, jsx_runtime_1.jsx)(forms_1.Input, { ref: value1Ref, name: "filterValue1", type: filter.type, value: (_b = values[0]) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
+                            if (type === 'number') {
+                                var newValues = __spreadArray([], values, true);
+                                newValues[0] = Number(e.target.value);
+                                onFilterChanged(__assign(__assign({}, filter), { values: newValues }));
+                            }
+                            else {
+                                var newValues = __spreadArray([], values, true);
+                                newValues[0] = String(e.target.value);
+                                onFilterChanged(__assign(__assign({}, filter), { values: newValues }));
+                            }
                         } })] }), operator === 'inRange' && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: "filterValue2", children: [(0, jsx_runtime_1.jsx)("span", { children: "et" }), (0, jsx_runtime_1.jsx)("input", { name: "filterValue2", type: filter.type, value: (_c = values[1]) !== null && _c !== void 0 ? _c : '', 
                         // className="text-sm w-24"
                         onChange: function (e) {

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

@@ -1,12 +1,13 @@
-import { DataGridFilterFormatter, DataGridFilterGroup } from './types';
-type FilterValuesScrollerProps<R extends string | number | null> = {
-    values: R[];
+import { DataGridFilterFormatter, DataGridFilterGroup, DataGridFilterRenderer, DataGridFilterValue } from './types';
+type FilterValuesScrollerProps = {
+    values: DataGridFilterValue[];
     rowHeight?: number;
     formatter: DataGridFilterFormatter;
+    renderer: DataGridFilterRenderer;
     onRangeChange?: (startIndex: number, length: number) => void;
-    onToggle?: (values: R[]) => void;
-    selectedValues?: R[];
-    groups?: DataGridFilterGroup<R>[];
+    onToggle?: (values: DataGridFilterValue[]) => void;
+    selectedValues?: DataGridFilterValue[];
+    groups?: DataGridFilterGroup[];
 };
-export declare const FilterValuesScroller: <R extends string | number | null>({ values, rowHeight, onRangeChange, onToggle, formatter, selectedValues, groups, }: FilterValuesScrollerProps<R>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterValuesScroller: ({ values, rowHeight, onRangeChange, onToggle, formatter, renderer, selectedValues, groups, }: FilterValuesScrollerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -39,23 +39,22 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-explicit-any */
 var styles = __importStar(require("./styles"));
 var lodash_1 = require("lodash");
-var react_1 = require("react");
 var helpers_1 = require("./helpers");
+var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
-var defaultFormatter = function (value) { return (value == null ? null : String(value)); };
 var CheckboxTemplate = function (_a) {
     var selectedValues = _a.selectedValues, value = _a.value, index = _a.index, className = _a.className, style = _a.style, onToggle = _a.onToggle;
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, lodash_1.join)([
             // 'absolute left-0 right-0 flex flex-row cursor-pointer hover:bg-gray-50',
             className,
-        ], ' '), style: __assign(__assign({}, style), { paddingLeft: "".concat(value.level, "rem") }), title: value.displayValue || '(Vides)', onClick: function () { return onToggle === null || onToggle === void 0 ? void 0 : onToggle(value.values); }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectedValues.includes(value.values[0]), readOnly: true }), (0, jsx_runtime_1.jsx)("span", { children: value.displayValue || '(Vides)' })] }, index));
+        ], ' '), style: __assign(__assign({}, style), { paddingLeft: "".concat(value.level, "rem") }), title: value.title, onClick: function () { return onToggle === null || onToggle === void 0 ? void 0 : onToggle([value.value]); }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: selectedValues.includes(value.value), readOnly: true }), (0, jsx_runtime_1.jsx)("span", { children: value.displayValue || '(Vides)' })] }, index));
 };
 var FilterValuesScroller = function (_a) {
-    var values = _a.values, _b = _a.rowHeight, rowHeight = _b === void 0 ? styles.DEFAULT_FILTER_ROW_HEIGHT : _b, onRangeChange = _a.onRangeChange, onToggle = _a.onToggle, _c = _a.formatter, formatter = _c === void 0 ? defaultFormatter : _c, _d = _a.selectedValues, selectedValues = _d === void 0 ? [] : _d, groups = _a.groups;
+    var values = _a.values, _b = _a.rowHeight, rowHeight = _b === void 0 ? styles.DEFAULT_FILTER_ROW_HEIGHT : _b, onRangeChange = _a.onRangeChange, onToggle = _a.onToggle, _c = _a.formatter, formatter = _c === void 0 ? helpers_1.defaultRendererAndFormatter : _c, _d = _a.renderer, renderer = _d === void 0 ? helpers_1.defaultRendererAndFormatter : _d, _e = _a.selectedValues, selectedValues = _e === void 0 ? [] : _e, groups = _a.groups;
     var scrollableRef = (0, react_1.useRef)(null);
     var height = (0, hooks_1.useElementSize)(scrollableRef.current).height;
     var tolerance = 20;
-    var _e = (0, react_1.useState)(0), scrollTop = _e[0], setScrollTop = _e[1];
+    var _f = (0, react_1.useState)(0), scrollTop = _f[0], setScrollTop = _f[1];
     var index = Math.floor(scrollTop / rowHeight);
     var length = Math.ceil(height / rowHeight);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -63,7 +62,7 @@ var FilterValuesScroller = function (_a) {
         var target = e.target;
         setScrollTop(function () { return target.scrollTop; });
     }, 50), []);
-    var checkboxes = (0, react_1.useMemo)(function () { return (0, helpers_1.getCheckboxes)(values, formatter !== null && formatter !== void 0 ? formatter : defaultFormatter, groups); }, [values, groups, formatter]);
+    var checkboxes = (0, react_1.useMemo)(function () { return (0, helpers_1.getCheckboxes)(values, renderer, formatter, groups); }, [values, groups, renderer, formatter]);
     var visibleCheckboxes = checkboxes.slice(Math.max(0, index - tolerance), index + length + 1 + tolerance);
     var firstCheckboxTop = Math.max(0, index - tolerance) * rowHeight;
     (0, react_1.useEffect)(function () {

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

@@ -30,17 +30,12 @@ var react_1 = require("react");
 var VirtualScroller = function (props) {
     var _a = (0, react_1.useContext)(props.context), _b = _a.rowHeight, rowHeight = _b === void 0 ? styles.DEFAULT_ROW_HEIGHT : _b, 
     // headerRowHeight = styles.DEFAULT_HEADER_ROW_HEIGHT,
-    sortedRows = _a.sortedRows, visibleColumns = _a.visibleColumns, index = _a.index, visibleRows = _a.visibleRows;
+    sortedRows = _a.sortedRows, index = _a.index, visibleRows = _a.visibleRows, gridTemplateColumns = _a.gridTemplateColumns;
     var rowTemplate = props.rowTemplate;
     var totalHeight = sortedRows.length * rowHeight;
     var topPadding = Math.max(0, index - styles.VIRTUAL_SCROLL_TOLERANCE) * rowHeight;
     // const headerAndFooterHeight =
     //   2 * headerRowHeight + (hasFooter ? rowHeight : 0) + 2;
-    var gridTemplateColumns = (0, react_1.useMemo)(function () { return visibleColumns.map(function (_a) {
-        var _b;
-        var col = _a[1];
-        return "".concat((_b = col.width) !== null && _b !== void 0 ? _b : 150, "px");
-    }).join(' '); }, [visibleColumns]);
     return ((0, jsx_runtime_1.jsx)(styles.VirtualScrollerContainer, { "$height": totalHeight, children: (0, jsx_runtime_1.jsx)(styles.VirtualScrollerRowsContainer, { "$gridTemplateColumns": gridTemplateColumns, "$topPadding": topPadding, "$rowHeight": rowHeight, children: visibleRows.map(rowTemplate) }) }));
 };
 exports.VirtualScroller = VirtualScroller;

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

@@ -1,13 +1,12 @@
-import { DataGridColumn, DataGridColumns, DataGridFilterType, DataGridSettings } from '../types';
-export declare const isColumnVisible: <R>(obj: DataGridColumn<R, any> | DataGridSettings) => boolean;
-export declare const textColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R, DataGridFilterType>>) => DataGridColumns<R>;
-export declare const mailColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R, DataGridFilterType>>) => DataGridColumns<R>;
-export declare const phoneColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R, DataGridFilterType>>) => DataGridColumns<R>;
-export declare const dateColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R, DataGridFilterType>>) => DataGridColumns<R>;
-export declare const monthColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R, DataGridFilterType>>) => DataGridColumns<R>;
-export declare const numberColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<DataGridColumn<R, DataGridFilterType>>) => DataGridColumns<R>;
-export declare const moneyColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<DataGridColumn<R, DataGridFilterType>>) => DataGridColumns<R>;
-export declare const percentageColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R, DataGridFilterType>>) => DataGridColumns<R>;
-export declare const checkboxColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R, DataGridFilterType>>) => DataGridColumns<R>;
-export declare const colorColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R, DataGridFilterType>>) => DataGridColumns<R>;
-export declare const withGroupBy: <R extends Record<string, any>>(columns: DataGridColumns<R>) => DataGridColumns<R>;
+import { DataGridColumn, DataGridColumns, DataGridSettings } from '../types';
+export declare const isColumnVisible: <R>(obj: DataGridColumn<R> | DataGridSettings) => boolean;
+export declare const textColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const mailColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const phoneColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const dateColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const monthColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const numberColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const moneyColumn: <R extends Record<string, any>>(key: string, title: string, decimals?: number, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const percentageColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const checkboxColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;
+export declare const colorColumn: <R extends Record<string, any>>(key: string, title: string, options?: Partial<DataGridColumn<R>>) => DataGridColumns<R>;