@addev-be/ui 0.2.2 → 0.2.5

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,46 @@ 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.SelectionCell
+                    //  className="inline-flex items-center justify-center w-12 select-none"
+                    , { children: (0, jsx_runtime_1.jsx)(IndeterminateCheckbox_1.IndeterminateCheckbox, { checked: checkboxStatus, onChange: function () { return toggleAll(!checkboxStatus); } }) })), 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/FilterModalContent/index.d.ts

@@ -3,5 +3,5 @@ type FilterModalContentProps<R, T extends DataGridFilterType = DataGridFilterTyp
     filter: DataGridFilter<R, T>;
     onFilterChanged: (filter: DataGridFilter<R, T>) => 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: <R, T extends DataGridFilterType = keyof import("../types").DataGridFilterPredicates>({ filter, onFilterChanged, }: FilterModalContentProps<R, T>) => import("react/jsx-runtime").JSX.Element | null;
 export {};

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>;

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

@@ -14,82 +14,58 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withGroupBy = exports.colorColumn = exports.checkboxColumn = exports.percentageColumn = exports.moneyColumn = exports.numberColumn = exports.monthColumn = exports.dateColumn = exports.phoneColumn = exports.mailColumn = exports.textColumn = exports.isColumnVisible = void 0;
+exports.colorColumn = exports.checkboxColumn = exports.percentageColumn = exports.moneyColumn = exports.numberColumn = exports.monthColumn = exports.dateColumn = exports.phoneColumn = exports.mailColumn = exports.textColumn = exports.isColumnVisible = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var numbers_1 = require("../../../../helpers/numbers");
-var lodash_1 = __importDefault(require("lodash"));
+var filters_1 = require("./filters");
 var moment_1 = __importDefault(require("moment"));
 var isColumnVisible = function (obj) {
+    console.log('isColumnVisible obj=', obj);
     return (obj === null || obj === void 0 ? void 0 : obj.order) !== -1;
 };
 exports.isColumnVisible = isColumnVisible;
 var textColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: {
-                type: 'text',
-                operator: 'contains',
-                values: [''],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
-            } }, options),
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key) }, options),
         _a);
 };
 exports.textColumn = textColumn;
 var mailColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, row) {
+        _a[key] = __assign({ name: title, render: function (row) {
                 var _a;
                 return ((0, jsx_runtime_1.jsx)("a", { 
                     // className="text-blue-500 hover:text-blue-700"
                     href: "mailto:".concat(row[key]), children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }));
-            }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: {
-                type: 'text',
-                operator: 'contains',
-                values: [''],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
-            } }, options),
+            }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key) }, options),
         _a);
 };
 exports.mailColumn = mailColumn;
 var phoneColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, row) {
+        _a[key] = __assign({ name: title, render: function (row) {
                 var _a;
                 return ((0, jsx_runtime_1.jsx)("a", { 
                     // className="text-blue-500 hover:text-blue-700"
                     href: "tel:".concat(row[key]), children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }));
-            }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: {
-                type: 'text',
-                operator: 'contains',
-                values: [''],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
-            } }, options),
+            }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key) }, options),
         _a);
 };
 exports.phoneColumn = phoneColumn;
 var dateColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: {
-                type: 'text',
-                operator: 'contains',
-                values: [''],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
-            } }, options),
+        _a[key] = __assign({ name: title, render: function (row) { var _a; return (_a = (0, moment_1.default)(row[key]).format('DD/MM/YYYY')) !== null && _a !== void 0 ? _a : ''; }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key) }, options),
         _a);
 };
 exports.dateColumn = dateColumn;
 var monthColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, row) { return (row[key] ? "".concat(row[key], " mois ") : ''); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: {
-                type: 'text',
-                operator: 'contains',
-                values: [''],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
-            } }, options),
+        _a[key] = __assign({ name: title, render: function (row) { return (row[key] ? "".concat(row[key], " mois ") : ''); }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key) }, options),
         _a);
 };
 exports.monthColumn = monthColumn;
@@ -97,11 +73,11 @@ var numberColumn = function (key, title, decimals, options) {
     var _a;
     if (decimals === void 0) { decimals = 2; }
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, 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: {
+        _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: {
                 type: 'number',
                 operator: 'equals',
                 values: [0],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : 0; },
+                getter: function (value) { return value !== null && value !== void 0 ? value : 0; },
             } }, options),
         _a);
 };
@@ -110,58 +86,31 @@ var moneyColumn = function (key, title, decimals, options) {
     var _a;
     if (decimals === void 0) { decimals = 2; }
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, 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: {
-                type: 'number',
-                operator: 'equals',
-                values: [0],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : 0; },
-            } }, options),
+        _a[key] = __assign({ name: title, 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: (0, filters_1.numberFilter)(key) }, options),
         _a);
 };
 exports.moneyColumn = moneyColumn;
 var percentageColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, 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: {
-                type: 'number',
-                operator: 'equals',
-                values: [0],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : 0; },
-            } }, 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.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: (0, filters_1.numberFilter)(key) }, options),
         _a);
 };
 exports.percentageColumn = percentageColumn;
 var checkboxColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, 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: {
-                type: 'number',
-                operator: 'equals',
-                values: [0],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : 0; },
-            } }, options),
+        _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: (0, filters_1.numberFilter)(key) }, options),
         _a);
 };
 exports.checkboxColumn = checkboxColumn;
 var colorColumn = function (key, title, options) {
     var _a;
     return (_a = {},
-        _a[key] = __assign({ name: title, render: function (col, row) {
+        _a[key] = __assign({ name: title, render: function (row) {
                 var _a;
                 return ((0, jsx_runtime_1.jsx)("div", { style: { backgroundColor: row[key] }, children: (_a = row[key]) !== null && _a !== void 0 ? _a : '' }));
-            }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: {
-                type: 'text',
-                operator: 'contains',
-                values: [''],
-                getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
-            } }, options),
+            }, getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, sortGetter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; }, filter: (0, filters_1.textFilter)(key) }, options),
         _a);
 };
 exports.colorColumn = colorColumn;
-var withGroupBy = function (columns) {
-    return lodash_1.default.mapValues(columns, function (column, key) {
-        var _a;
-        return (__assign(__assign({}, column), { field: __assign(__assign({}, ((_a = column.field) !== null && _a !== void 0 ? _a : { fieldName: key })), { groupBy: true }) }));
-    });
-};
-exports.withGroupBy = withGroupBy;

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

@@ -1,8 +1,7 @@
-import { DataGridFilter, DataGridFilterCheckbox, DataGridFilterDataType, DataGridFilterFormatter, DataGridFilterGroup, DataGridFilterPredicates, DataGridFilterType, DataGridFilters } from '../types';
-import { ConditionDTO } from '../../../../services/advancedRequests';
+import { DataGridFilter, DataGridFilterCheckbox, DataGridFilterDataType, DataGridFilterFormatter, DataGridFilterGroup, DataGridFilterPredicates, DataGridFilterType } from '../types';
 export declare const filtersPredicates: DataGridFilterPredicates;
-export declare const applyFilters: <R>(rows: R[], filters: DataGridFilter<R, DataGridFilterType>[]) => R[];
-export declare const applyFilter: <R, T extends DataGridFilterType>(rows: R[], filter: DataGridFilter<R, T>) => R[];
+export declare const applyFilters: <R>(rows: R[], filters: DataGridFilter[]) => R[];
+export declare const applyFilter: <R>(rows: R[], filter: DataGridFilter) => R[];
 export declare const defaultFilterGetter: (row: any, columnKey: string) => any;
 export declare const defaultFilterValues: {
     [K in DataGridFilterType]: DataGridFilterDataType<K>;
@@ -12,5 +11,6 @@ export declare const defaultValueParsers: {
 };
 export declare const groupDatesByYearAndMonth: (dates: any[]) => Record<string, Record<string, any[]>>;
 export declare const getDateGroups: <R extends string | number | null>(dates: any[]) => DataGridFilterGroup<R>[];
-export declare const convertFiltersToConditions: <R>(filters: DataGridFilters<R>) => ConditionDTO[];
 export declare const getCheckboxes: <R extends string | number | null>(values: R[], formatter: DataGridFilterFormatter, groups?: DataGridFilterGroup<R>[], level?: number) => DataGridFilterCheckbox<R>[];
+export declare const textFilter: (key: string) => DataGridFilter<"text">;
+export declare const numberFilter: (key: string) => DataGridFilter<"number">;

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

@@ -13,8 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCheckboxes = exports.convertFiltersToConditions = exports.getDateGroups = exports.groupDatesByYearAndMonth = exports.defaultValueParsers = exports.defaultFilterValues = exports.defaultFilterGetter = exports.applyFilter = exports.applyFilters = exports.filtersPredicates = void 0;
-var lodash_1 = __importDefault(require("lodash"));
+exports.numberFilter = exports.textFilter = exports.getCheckboxes = exports.getDateGroups = exports.groupDatesByYearAndMonth = exports.defaultValueParsers = exports.defaultFilterValues = exports.defaultFilterGetter = exports.applyFilter = exports.applyFilters = exports.filtersPredicates = void 0;
 var moment_1 = __importDefault(require("moment"));
 var escapeRegExp = function (s) { return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); };
 var textContainsPredicate = function () {
@@ -220,22 +219,6 @@ var getDateGroups = function (dates) {
     });
 };
 exports.getDateGroups = getDateGroups;
-var convertFiltersToConditions = function (filters) {
-    return Object.entries(filters).map(function (_a) {
-        var columnKey = _a[0], filter = _a[1];
-        var condition = {
-            field: {
-                fieldName: columnKey,
-            },
-            operator: filter.operator,
-            value: ['inArray', 'inRange'].includes(filter.operator)
-                ? filter.values
-                : lodash_1.default.castArray(filter.values)[0],
-        };
-        return condition;
-    });
-};
-exports.convertFiltersToConditions = convertFiltersToConditions;
 var getCheckboxes = function (values, formatter, groups, level) {
     if (level === void 0) { level = 0; }
     return __spreadArray(__spreadArray([], (groups !== null && groups !== void 0 ? groups : [])
@@ -247,3 +230,17 @@ var getCheckboxes = function (values, formatter, groups, level) {
     }); }), true);
 };
 exports.getCheckboxes = getCheckboxes;
+var textFilter = function (key) { return ({
+    type: 'text',
+    operator: 'contains',
+    values: [''],
+    getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
+}); };
+exports.textFilter = textFilter;
+var numberFilter = function (key) { return ({
+    type: 'number',
+    operator: 'equals',
+    values: [0],
+    getter: function (row) { var _a; return (_a = row[key]) !== null && _a !== void 0 ? _a : ''; },
+}); };
+exports.numberFilter = numberFilter;

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

@@ -1,3 +1,2 @@
-export * from './columns';
 export * from './filters';
-export * from './advancedRequests';
+export * from './columns';

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

@@ -14,6 +14,5 @@ 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("./columns"), exports);
 __exportStar(require("./filters"), exports);
-__exportStar(require("./advancedRequests"), exports);
+__exportStar(require("./columns"), exports);

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

@@ -3,5 +3,5 @@ export { useDataGridCopy } from './useDataGridCopy';
 export { useDataGridSettings } from './useDataGridSettings';
 export { useDataGrid } from './useDataGrid';
 export declare const useDataGridContext: <R>(context: DataGridContext<R>) => import("../types").DataGridContextProps<R>;
-export declare const useVisibleAndHiddenColumns: <R>(columns: DataGridColumns<R>) => import("lodash").Dictionary<import("../types").DataGridColumn<R, import("../types").DataGridFilterType | undefined>>[];
-export declare const useSortedColumns: <R>(columns: DataGridColumns<R>) => [string, import("../types").DataGridColumn<R, import("../types").DataGridFilterType | undefined>][];
+export declare const useVisibleAndHiddenColumns: <R>(columns: DataGridColumns<R>) => import("lodash").Dictionary<import("../types").DataGridColumn<R>>[];
+export declare const useSortedColumns: <R>(columns: DataGridColumns<R>) => [string, import("../types").DataGridColumn<R>][];

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSortedColumns = exports.useVisibleAndHiddenColumns = exports.useDataGridContext = exports.useDataGrid = exports.useDataGridSettings = exports.useDataGridCopy = void 0;
 var react_1 = require("react");
-var helpers_1 = require("../helpers");
+var columns_1 = require("../helpers/columns");
 var lodash_1 = require("lodash");
 var useDataGridCopy_1 = require("./useDataGridCopy");
 Object.defineProperty(exports, "useDataGridCopy", { enumerable: true, get: function () { return useDataGridCopy_1.useDataGridCopy; } });
@@ -16,8 +16,8 @@ var useDataGridContext = function (context) {
 exports.useDataGridContext = useDataGridContext;
 var useVisibleAndHiddenColumns = function (columns) {
     return (0, react_1.useMemo)(function () { return [
-        (0, lodash_1.pickBy)(columns, function (col) { return (0, helpers_1.isColumnVisible)(col); }),
-        (0, lodash_1.pickBy)(columns, function (col) { return !(0, helpers_1.isColumnVisible)(col); }),
+        (0, lodash_1.pickBy)(columns, function (col) { return (0, columns_1.isColumnVisible)(col); }),
+        (0, lodash_1.pickBy)(columns, function (col) { return !(0, columns_1.isColumnVisible)(col); }),
     ]; }, [columns]);
 };
 exports.useVisibleAndHiddenColumns = useVisibleAndHiddenColumns;
@@ -26,7 +26,7 @@ var useSortedColumns = function (columns) {
         return Object.entries(columns)
             .filter(function (_a) {
             var col = _a[1];
-            return (0, helpers_1.isColumnVisible)(col);
+            return (0, columns_1.isColumnVisible)(col);
         })
             .sort(function (a, b) { var _a, _b; return ((_a = a[1].order) !== null && _a !== void 0 ? _a : 0) - ((_b = b[1].order) !== null && _b !== void 0 ? _b : 0); });
     }, [columns]);

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

@@ -67,7 +67,7 @@ var lodash_1 = require("lodash");
 var useDataGridSettings_1 = require("./useDataGridSettings");
 var hooks_1 = require("../../../../hooks");
 var useDataGrid = function (props) {
-    var rows = props.rows, onFiltersChanged = props.onFiltersChanged, onSortsChanged = props.onSortsChanged, loadCopyRows = props.loadCopyRows, _a = props.rowHeight, rowHeight = _a === void 0 ? styles_1.DEFAULT_ROW_HEIGHT : _a, onVisibleRowsChange = props.onVisibleRowsChange;
+    var rows = props.rows, onFiltersChanged = props.onFiltersChanged, onSortsChanged = props.onSortsChanged, loadCopyRows = props.loadCopyRows, _a = props.rowHeight, rowHeight = _a === void 0 ? styles_1.DEFAULT_ROW_HEIGHT : _a, onVisibleRowsChange = props.onVisibleRowsChange, onSelectionChange = props.onSelectionChange, selectable = props.selectable;
     var _b = (0, react_1.useState)(props.columns), columns = _b[0], setColumns = _b[1];
     var visibleColumns = (0, _1.useSortedColumns)(columns);
     /** SETTINGS */
@@ -78,12 +78,28 @@ var useDataGrid = function (props) {
             return (__assign(__assign({}, prev), (_a = {}, _a[key] = __assign(__assign({}, prev[key]), { width: width }), _a)));
         });
     }, [setSettings]);
+    var gridTemplateColumns = (0, react_1.useMemo)(function () {
+        return __spreadArray(__spreadArray([], (selectable ? ['var(--space-8)'] : []), true), visibleColumns.map(function (_a) {
+            var _b;
+            var col = _a[1];
+            return "".concat((_b = col.width) !== null && _b !== void 0 ? _b : 150, "px");
+        }), true).join(' ');
+    }, [selectable, visibleColumns]);
     // Update columns when settings change
     (0, react_1.useEffect)(function () {
         setColumns(function (prev) { return (0, lodash_1.merge)({}, prev, settings); });
     }, [settings]);
     /** ROWS SELECTION **/
-    var _d = (0, react_1.useState)([]), selectedRows = _d[0], setSelectedRows = _d[1];
+    var rowKeyGetter = (0, react_1.useMemo)(function () {
+        return typeof props.rowKey === 'function'
+            ? props.rowKey
+            : function (row) { return String(row === null || row === void 0 ? void 0 : row[props.rowKey]); };
+    }, [props.rowKey]);
+    var _d = (0, react_1.useState)([]), selectedKeys = _d[0], setSelectedKeys = _d[1];
+    var selectedRows = (0, react_1.useMemo)(function () { return props.rows.filter(function (row) { return selectedKeys.includes(rowKeyGetter(row)); }); }, [props.rows, rowKeyGetter, selectedKeys]);
+    (0, react_1.useEffect)(function () {
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(selectedKeys);
+    }, [onSelectionChange, selectedKeys]);
     /** ROWS FILTERING **/
     var _e = (0, react_1.useState)({}), filters = _e[0], setFilters = _e[1];
     var _f = (0, react_1.useState)(rows !== null && rows !== void 0 ? rows : []), filteredRows = _f[0], setFilteredRows = _f[1];
@@ -148,7 +164,7 @@ var useDataGrid = function (props) {
     }, [indexWithTolerance, lengthWithTolerance, onVisibleRowsChange]);
     /** COPYING */
     var copyTable = (0, _1.useDataGridCopy)(sortedRows, columns, loadCopyRows).copyTable;
-    var contextValue = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props), { columns: columns, visibleColumns: visibleColumns, sortedRows: sortedRows, selectedRows: selectedRows, setSelectedRows: setSelectedRows, sorts: sorts, setSorts: setSorts, filters: filters, setFilters: setFilters, editingCell: editingCell, setEditingCell: setEditingCell, copyTable: copyTable, setColumnWidth: setColumnWidth, settings: settings, setSettings: setSettings, saveSettings: saveSettings, visibleRows: visibleRows, scrollableRef: scrollableRef, onScroll: onScroll, index: index, length: length })); }, [
+    var contextValue = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props), { columns: columns, visibleColumns: visibleColumns, sortedRows: sortedRows, selectedRows: selectedRows, selectedKeys: selectedKeys, setSelectedKeys: setSelectedKeys, sorts: sorts, setSorts: setSorts, filters: filters, setFilters: setFilters, editingCell: editingCell, setEditingCell: setEditingCell, copyTable: copyTable, setColumnWidth: setColumnWidth, settings: settings, setSettings: setSettings, saveSettings: saveSettings, visibleRows: visibleRows, scrollableRef: scrollableRef, onScroll: onScroll, index: index, length: length, rowKeyGetter: rowKeyGetter, gridTemplateColumns: gridTemplateColumns })); }, [
         columns,
         copyTable,
         editingCell,
@@ -157,7 +173,9 @@ var useDataGrid = function (props) {
         length,
         onScroll,
         props,
+        rowKeyGetter,
         saveSettings,
+        selectedKeys,
         selectedRows,
         setColumnWidth,
         setSettings,
@@ -166,6 +184,7 @@ var useDataGrid = function (props) {
         sorts,
         visibleColumns,
         visibleRows,
+        gridTemplateColumns,
     ]);
     var context = (0, react_1.useMemo)(function () {
         return (0, react_1.createContext)({
@@ -173,9 +192,11 @@ var useDataGrid = function (props) {
             columns: {},
             visibleColumns: [],
             rowKey: '',
+            rowKeyGetter: function () { return ''; },
             sortedRows: [],
             selectedRows: [],
-            setSelectedRows: function () { },
+            selectedKeys: [],
+            setSelectedKeys: function () { },
             setSorts: function () { },
             setFilters: function () { },
             editingCell: [-1, -1],
@@ -192,6 +213,7 @@ var useDataGrid = function (props) {
             onScroll: function () { },
             index: 0,
             length: 0,
+            gridTemplateColumns: '',
         });
     }, []);
     return (0, react_1.useMemo)(function () { return [contextValue, context]; }, [context, contextValue]);